The official Chakra UI Figma Kit ⚡️.
Get access to simple, modular and accessible components you need to design and build your applications.
What’s Included
- Extensive styles for typography, color and effects
- Component variants including size and state, now also with interactions
- Dynamic layers powered by Auto Layout
- Implicit pixel grid sizes and spacing
Components
- Data Display: Badge, Close Button, Kbd, Stat, Table, Tag
- Feedback: Alert, Toast, Progress
- Forms: Button, Circular Progress, Checkbox, Form Control, Icon Button, Input, Number Input, Radio, Select, Slider, Switch, Textarea
- Media and Icons: Avatar, Icon (Remix Icon)
- Navigation: Tabs
- Overlay: Alert Dialog, Dialog
All components are open source and available for production-level React applications. Learn more in our
documentation
.
What’s new
December 13, 2022
- Redesigned all components to use variants, auto layout and component properties
- Consistent layer and property naming with Chakra UI
- Added support for colorScheme in most components
- Added more components
July 22, 2021
- Added Number Input component
July 15, 2021
- Added Tooltip component
- Added Progress component
- Added Slider component
- Added Circular Slider component
- Added Input filled and flushed component variants
- Updated icon sizes in Icon Button component
May 9, 2021
- Added Auto Layout for closable Toast component variants without accents
- Added Auto Layout for Alert Dialog text for dynamic modal height based on length
- Added descriptions and documentation links to all components
- Fixed Auto Layout in Alert title-top variant where text layers weren’t filling the entire container
Past contributors
- Javier Alaves
Feedback
If you have any requests or bugs you’d like to report related to this UI Kit, please drop a comment in this Figma Community file page and we’ll address it as soon as possible.
Terms of use
Available for use across personal and commercial projects. Distributing, reselling or sub-licensing Chakra UI is prohibited.
