If your engineering team uses the shadcn/ui framework, you already know why it’s so popular right now. It gives developers total control over their components. But there has been a missing piece for design teams: if you prefer working natively in Sketch for Mac, building those same components from scratch to match the code is a massive pain.
We built this new UI kit to bridge that gap.
A lot of UI kits on the market just give you static shapes that look nice on a canvas. We took a different approach. We wanted to build a tool that actually behaves like the coded components, saving you hours of manual resizing and pixel-pushing.
What makes this kit different?
- Real Stack Layouts: We didn't just group layers together. Every button, dropdown, and data card is built using Sketch’s native Smart Layout and Stacks. When you type longer text or hide an icon, the entire component resizes and shifts automatically.
- True Color Variables: We mapped all the foundational shadcn/ui design tokens straight into Sketch Color Variables. Need to test a dark mode or change your primary brand color? Just update the variable once, and your entire design system updates instantly.
- Strict Shared Styles: We locked down the typography, shadows, and borders using Shared Layer Styles. This keeps your files incredibly clean and ensures that every designer on your team is using the exact same styling rules.
- Painless Developer Handoff: We structured and named the layers to mirror the actual React components. When you hand your Sketch file over to your developers, they will know exactly what they are looking at. No more guessing games or translating design terms into code terms.
We poured a lot of time into making this a practical, everyday tool for product designers. Because it is built exclusively for Sketch for Mac, it runs incredibly fast and feels like a natural extension of your workflow.
You can check out the full preview and grab the kit right now on our store: https://www.whiteui.store/product/shadcn-sketch-ui
