# @shadcn/designer

> A composable, themeable design editor built with React, Tailwind CSS, and shadcn/ui.

## Get Started

- [Welcome](https://designer.shadcn.com/docs.md): This is the documentation for the @shadcn/designer package.
- [Pricing](https://designer.shadcn.com/docs/pricing.md): Get a business license to use shadcn/designer in your projects.
- [License](https://designer.shadcn.com/docs/license.md)
- [Roadmap](https://designer.shadcn.com/docs/roadmap.md)
- [Changelog](https://designer.shadcn.com/docs/changelog.md)

## Concepts

- [Designer](https://designer.shadcn.com/docs/concepts/designer.md): Learn how to use the designer component.
- [Layers](https://designer.shadcn.com/docs/concepts/layers.md): Learn how to work with layers and layer types in designer.
- [Theming](https://designer.shadcn.com/docs/concepts/theming.md): Add custom themes to your designer.
- [Unit System](https://designer.shadcn.com/docs/concepts/unit-system.md): Work with multiple measurement units including pixels, millimeters, inches, centimeters, and points for both print and digital design workflows.

## Examples

- [All Examples](https://designer.shadcn.com/docs/examples.md): See all examples of how to use the designer.
- [Basic Editor](https://designer.shadcn.com/docs/examples/basic.md): A simple editor with a frame.
- [Header](https://designer.shadcn.com/docs/examples/header.md): Add a header to the designer.
- [Panels](https://designer.shadcn.com/docs/examples/panels.md): Add left and right panels to the designer.
- [Panes](https://designer.shadcn.com/docs/examples/panes.md): Add panes to the designer.
- [Toolbar](https://designer.shadcn.com/docs/examples/toolbar.md): Add a toolbar to the designer.
- [Custom Toolbar](https://designer.shadcn.com/docs/examples/toolbar-custom.md): Build a custom toolbar for the designer.
- [Print & PDF](https://designer.shadcn.com/docs/examples/print.md): A print-ready editor with PDF export and paper size controls.
- [Unit System](https://designer.shadcn.com/docs/examples/unit-system.md): Work with different measurement units like pixels, mm, cm, in, and pt.
- [Blob Editor](https://designer.shadcn.com/docs/examples/blob-editor.md): A custom svg blob editor built using the designer.
- [Designer Tool](https://designer.shadcn.com/docs/examples/designer-tool.md): Switch between Move and Hand tools for different interaction modes.
- [Export Layers](https://designer.shadcn.com/docs/examples/export-layers.md): How to export the layers as JSON.
- [Frame Size](https://designer.shadcn.com/docs/examples/frame-size.md): How to change the size of the frame.
- [History](https://designer.shadcn.com/docs/examples/history.md): How to use the history feature to undo and redo actions.
- [Image Generator](https://designer.shadcn.com/docs/examples/image-generator.md): An AI image generator with filters.
- [Custom Layer](https://designer.shadcn.com/docs/examples/layer-custom.md): Add custom layer types to the designer.
- [Layer Tree](https://designer.shadcn.com/docs/examples/layer-tree.md): Add a layer tree to the designer.
- [Mobile](https://designer.shadcn.com/docs/examples/mobile.md): How to make the designer mobile friendly.
- [Mode](https://designer.shadcn.com/docs/examples/mode.md): Single or multiple layer mode.
- [Pages](https://designer.shadcn.com/docs/examples/pages.md): How to create multi-page designs.
- [Performance](https://designer.shadcn.com/docs/examples/performance.md): Optimized for performance
- [Read Only](https://designer.shadcn.com/docs/examples/read-only.md): How to make the designer read only.
- [Save to Database](https://designer.shadcn.com/docs/examples/save.md): This example shows how to save and load layers from a database.
- [Zoom](https://designer.shadcn.com/docs/examples/zoom.md): Zoom in and out controls and custom controls.

## Guides

- [Installation](https://designer.shadcn.com/docs/guides/installation.md): Learn how to install the @shadcn/designer package and get started with the designer.
- [Update](https://designer.shadcn.com/docs/guides/update.md): How to update shadcn/designer to the latest version.
- [Convert to Image](https://designer.shadcn.com/docs/guides/convert-image.md): Learn how to convert layers into an image.
- [Image Browser](https://designer.shadcn.com/docs/guides/image-browser.md): Using the image browser to select images for your layers.

## Reference

- [Designer](https://designer.shadcn.com/docs/reference/designer.md): The core components for building the design canvas and layout structure.
- [Actions](https://designer.shadcn.com/docs/reference/actions.md): Property editor components for modifying layer properties.
- [Toolbar](https://designer.shadcn.com/docs/reference/toolbar.md): Components for building the floating designer toolbar.
- [UI](https://designer.shadcn.com/docs/reference/ui.md): Primitive UI components for building custom designer controls and actions.
- [Other](https://designer.shadcn.com/docs/reference/other.md): Other components available in the designer.
- [Hooks](https://designer.shadcn.com/docs/reference/hooks.md)
- [Types](https://designer.shadcn.com/docs/reference/types.md): TypeScript type definitions for building with the designer