shadcn/designer - Components for building design tools like Framer, Canva, and more.

svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent [a&]:hover:bg-secondary/90 rounded-full bg-blue-50 px-3 text-blue-600 dark:bg-blue-900 dark:text-blue-50 dark:hover:bg-blue-700/80" href="/docs/changelog">v2.0 - group and nested layers, full type-safety and moreComponents for building design tools like Framer, Canva, and more.<br>Infinite Canvas. Layers. Drag and Drop. Resize. Style. Composable. Performant. Developer-friendly.<br>svg]:px-3 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-3.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 !pl-3 hidden h-[31px] w-fit gap-1.5 lg:flex">Try the Demo svg]:px-3 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-3.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 gap-1.5 h-[31px] w-fit lg:hidden">See Examples svg]:px-3 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-3.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 bg-secondary text-secondary-foreground hover:bg-secondary/80 h-8 gap-1.5 !pl-4 w-fit" href="/docs/pricing">Get a License

Launch Editor

Try the full editor on your desktop

code]:p-0 **:[pre]:overflow-x-auto **:[pre]:rounded-lg **:[pre]:bg-muted **:[pre]:p-4 **:[pre]:text-left **:[pre]:font-mono **:[pre]:text-lg lg:**:[pre]:p-6 **:[strong]:font-semibold">Look, building a design tool from scratch is not easy . You need infinite canvas, layer management, selection tools, drag-and-drop, resize handles, apis to handle layer properties, styles and values...It's a lot of moving parts.<br>We've been there. We've built a few design tools ourselves. We've struggled with the same problems for years.<br>Existing libraries do too little, or too much. They are not customizable . They have a steep learning curve . You end up with a lot of custom code to make them work the way you want.<br>We've built the solution.<br>Here's what it looks like.

Three components. Five lines of code. A fully interactive canvas with zoom, pan, and layer selection.<br>Primitives to help you build: Canvas, Frames, Panels, Panes, Headers, Toolbars, Actions, and more. You build by composing the components you need. Style with Tailwind CSS .<br>Here's the code for a pane that will only show for frame layers. It has an action to change layer fill color.

If you need an action to rotate the layer, you can add it to the pane like this:

The API is dead simple. It's just hooks. useLayers, useZoom, useUndo, useDesignerAction...<br>Here's the code to unselect all layers and reset the zoom:<br>const designerAction = useDesignerAction()

designerAction("UNSELECT_ALL")<br>designerAction("ZOOM_RESET")<br>You already know how this works.<br>Layers are simple objects styled with CSS variables. Here's how easy it is to add a custom action to change text color:<br>const fontColorAction = createLayerCssVarAction("--color", "#000")<br>const [fontColor, setFontColor] = useLayerCssVarAction(fontColorAction)

setFontColor("#fff")}>Click

We have built actions for all types of layer manipulation including transforms, rotation, opacity, font browser , image filters , image cropping and more.<br>We've also made it really easy to bring in your own custom layer types . Build image editors, SVG tools, 3D interfaces, whatever you want.<br>What about performance? It's really fast. We test on the slowest machines with hundreds of layers. It runs smoothly. We handle re-renders, smart contextual updates and state management.<br>This is just scratching the surface. There's a lot more: multi-layer support, history management, pages, keyboard shortcuts, custom themes, and more.<br>We've been using this in production for years. It's now ready for you. One-time payment. Unlimited projects. No subscriptions. No limits.<br>svg]:px-3 !pl-4 w-fit rounded-full" href="/docs/pricing">Get a Business License