Chakra UI Figma Kit

Templates
Figma Resource

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.