Variants
Sizes
Icon Button
Loading
Button Group
@
USD
PIN Code
This is a basic card with a title and description.
A card with the outline variant styling.
Image Placeholder
First nested card
Second nested card
Heading 1
Heading 2
Heading 3
Heading 4
This is muted body text used for secondary content.
Use the console.log() function for debugging.
const greeting = "Hello, world!"; console.log(greeting);
Keyboard Shortcut
Press ⌘+K to open the command palette.
Good design is as little design as possible.
This sentence has an important word highlighted.
This is a styled linkDialog
Tooltip
Popover
This is the popover body content with some useful information.
Menu
Checkbox
Switch
Segment Group
Rating
Tabs
Overview content goes here.
Settings panel content.
Billing information.
Accordion
Onkit is a component library built on Chakra UI v3.
Run npm install @onkit/ui in your project.
Yes, use the Themer to customize all tokens.
Steps
Create your account.
Set up your profile.
All done!
Breadcrumb
Pagination
Progress
Progress Circle
Spinner
Skeleton
No results found
Try adjusting your search or filters.
Table
| Name | Role | Status |
|---|---|---|
| Alice Johnson | Designer | Active |
| Bob Smith | Developer | Inactive |
| Carol White | Manager | Active |
Data List
- Name
- Onkit UI
- Version
- 3.0.0
- License
- MIT
- Components
- 68
Stat
- Revenue
- $12,400 +12% from last month
- Users
- 1,240 -3% this week
Timeline
Avatar Sizes
Avatar Fallbacks
Badge - Solid
Badge - Subtle
Badge - Outline
Tags
File Upload
Clipboard
Color Picker
Editable Text
Placeholder chart visualizations using semantic color tokens.
Area Chart
Bar Chart
Line Chart
Pie Chart
BarList
BarSegment
QR Code
Marquee
Tree View
Carousel