The same system, in Figma. Components, variables and screens that match the code.
The WunderUI Figma library is the design side of the React components: the same components, the same props and the same tokens, so a screen moves from Figma to code without translation. Browse the free preview below — it is the real file, read-only — or open it in the Figma Community to duplicate it into your drafts.
Built like the code. Ready for your own screens.
Every component, every variant
165 components with 2,549 variants. Properties are wired the way the React props work: Type, Size, State and icon toggles.
Variables, light and dark
Colour, spacing, radius and type are Figma variables with a Light and a Dark mode. Switch a frame's mode and the whole screen follows.
Same names as the code
A Figma variable and its CSS token share one name, and so do components and props. What you design is what the code calls it.
Auto layout everywhere
Components and screens are built with auto layout, so they stretch, wrap and reflow when you change the content.
UI Block screens
314 screens across 56 blocks, each in light, dark and mobile, built from the library's own instances.
Figma AI skills
With Pro, your agent builds WunderUI screens in Figma from library instances and keeps Figma variables and the CSS tokens in sync.
Start with the free file. Unlock the whole library with Core or Pro.
- All free components with their variants
- The first screen of every UI block
- Read-only — duplicate it to explore
- The full library: 165 components, 2,549 variants
- 2,866 icons and every variable
- All UI block screens in light, dark and mobile
- Everything in Core
- The React source of every UI block
- Figma AI skills for your coding agent