Figma React UI kit — Design & code templates for web apps

31 components, 3700+ variants, 60 dashboard templates 

Figma React UI kit — designed in Figma and coded for React to build web apps faster. Based on restyled Blueprint.js / Chakra-UI. Powered by Figma's auto-layout. Allows toggling between styles quickly with Variants: Flat, Filled, Raised, Outlined and Smooth (Shaded). Themed into ⚪🔵🟢🔴 to swap components themes with ease.

Figma preview · Docs · React templates

Highlights:

• Design System for Figma & React to quickstart. The fullest UI kit was made in advance for Figma then synced with React via the styled Blueprint.js library, or Chakra-UI.
• 3700+ variants of 31 styled-components. Organized & named to match between design & code, with Auto-layout & Variants. Easy to customize.
• Ready for deep themification. Color tokens, Font styles, Reflexed shadows to allow you quickly remix styles to produce custom-themed templates.
• 60 dashboard templates. Start screen, Analytics, Data grid, Profile, Settings, Inputs and more to come in upcoming updates which are free.
  

⭐ More than 2,000 happy customers

For whom this product might be useful?

For startups

Setproduct Design System is aimed at serious teams where designers and coders will collaborate more efficiently. Our product saves your time, money and pushes the release.

For developers

Our Figma library allows you to learn or enhance interface design skills. Simply dip into the design process, where you only need to drag, drop and fit. That’s it!

For designers

Skip creating from scratch those boring UI items along with a project. Use our Figma React to concentrate on quickstart, not on the designing from scratch routine. Pst, designer, use a secret code fromfigma to cut some off just because you've scrolled here.

Refund policy • Licensing agreement • More for Figma