## License Required

You will need a license key to install the package. You can learn more about the pricing and purchase a business license [here](/docs/pricing).

## Create Project

First, let's setup a new Vite + Tailwind project.

> **Note:** You can use any React framework with the designer. This guide uses
>   Vite + React + Tailwind. The only requirement is that you have Tailwind
>   installed.

```bash
npx create-vite@latest my-designer --template react-ts
```

## Configure Tailwind

The `@shadcn/designer` package is built with Tailwind CSS. You will need to install Tailwind and configure it in your project.

### Install Tailwind

Add the following dependencies to your project.

```bash
npm install tailwindcss @tailwindcss/vite
```

### Configure the Vite plugin

Import the Tailwind Vite plugin in your `vite.config.ts` file.

```tsx
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
});
```

### Import Tailwind CSS

Replace the content of your `src/index.css` file with the following.

```tsx
@import "tailwindcss";
```

## Install Package

Next, let's install the package. You will need a license key to install the package. You can purchase a business license [here](https://ds.shadcn.com/pricing).

```bash
npm install https://ds.shadcn.com/registry\?license\=YOUR_LICENSE_KEY
```

For a standalone setup, import the `Designer` component from `@shadcn/designer` and the full stylesheet from `@shadcn/designer/styles.css`.

```tsx
import { Designer } from "@shadcn/designer";
import "@shadcn/designer/styles.css";

export default function App() {
  return <Designer className="h-svh" />;
}
```

Make sure you import `@shadcn/designer/styles.css` once in standalone apps. This should be imported after your own styles.

> **Existing Tailwind app:** If your app already has its own Tailwind CSS 4
>   theme, base reset, and utilities, do not import
>   `@shadcn/designer/styles.css`. Import `@shadcn/designer/core.css` from your
>   global CSS file and add `@source "../node_modules/@shadcn/designer";` so your
>   app generates the Designer utility classes.

```css
@import "tailwindcss";
@import "@shadcn/designer/core.css";

@source "../node_modules/@shadcn/designer";
```

The examples below omit the stylesheet import. Configure one of the stylesheet options above once in your app.

> **Note:** The Designer will take up the height of its container. The `h-svh` class is used to make the designer take up the full height of the viewport.

## Components

The `Designer` is built to be composable. You build your custom designer by composing the components that you need.

The following will setup a basic designer with a canvas and a frame. The default frame size is `1024x1024`.

```tsx
import {
  Designer,
  DesignerContent,
  DesignerCanvas,
  DesignerFrame,
} from "@shadcn/designer";

export default function App() {
  return (
    <Designer className="h-svh">
      <DesignerContent>
        <DesignerCanvas>
          <DesignerFrame />
        </DesignerCanvas>
      </DesignerContent>
    </Designer>
  );
}
```

## Layers

Now that your designer is setup, you can add layers to it. Press T on your keyboard to add a new `text` layer.

You will see a new text layer added to the canvas. You can drag the text layer around the canvas and use the handles to resize it.

The designer comes with the following layer types by default: `frame`, `text` and `image`.

You can extend the designer by adding your own layer types. See the [Custom Layer](/docs/concepts/layers) example for more information.

## Toolbar

Let's place a toolbar with buttons to add layers to the canvas.

```tsx
import {
  Designer,
  DesignerContent,
  DesignerCanvas,
  DesignerFrame,
  DesignerToolbar,
  DesignerToolbarGroup,
  ActionToolbarAddLayer,
} from "@shadcn/designer";

export default function App() {
  return (
    <Designer className="h-svh">
      <DesignerContent>
        <DesignerCanvas>
          <DesignerFrame />
        </DesignerCanvas>
      </DesignerContent>
      <DesignerToolbar>
        <DesignerToolbarGroup>
          <ActionToolbarAddLayer />
        </DesignerToolbarGroup>
      </DesignerToolbar>
    </Designer>
  );
}
```

You should see a new toolbar at the bottom of the canvas. The toolbar has one action to add a new layer.

## Panels

Now that we have a canvas and we can add layers to it, let's add a `<DesignerPanel />` to display layer controls.

```tsx
import {
  Designer,
  DesignerContent,
  DesignerCanvas,
  DesignerFrame,
  DesignerToolbar,
  DesignerToolbarGroup,
  ActionToolbarAddLayer,
  DesignerPanel,
} from "@shadcn/designer";

export default function App() {
  return (
    <Designer className="h-svh">
      <DesignerContent>
        <DesignerCanvas>
          <DesignerFrame />
        </DesignerCanvas>
        <DesignerPanel />
      </DesignerContent>
      <DesignerToolbar>
        <DesignerToolbarGroup>
          <ActionToolbarAddLayer />
        </DesignerToolbarGroup>
      </DesignerToolbar>
    </Designer>
  );
}
```

This will place a panel on the right side of the canvas. We can have multiple panels in the designer. Let's add a panel to the left side of the canvas.

```tsx
import {
  Designer,
  DesignerContent,
  DesignerCanvas,
  DesignerFrame,
  DesignerToolbar,
  DesignerToolbarGroup,
  ActionToolbarAddLayer,
  DesignerPanel,
} from "@shadcn/designer";

export default function App() {
  return (
    <Designer className="h-svh">
      <DesignerContent>
        <DesignerPanel />
        <DesignerCanvas>
          <DesignerFrame />
        </DesignerCanvas>
        <DesignerPanel />
      </DesignerContent>
      <DesignerToolbar>
        <DesignerToolbarGroup>
          <ActionToolbarAddLayer />
        </DesignerToolbarGroup>
      </DesignerToolbar>
    </Designer>
  );
}
```

## Panes

We use `<DesignerPane />` to display and group controls. Let's add a new pane to the right panel.

```tsx
import {
  Designer,
  DesignerContent,
  DesignerCanvas,
  DesignerFrame,
  DesignerToolbar,
  DesignerToolbarGroup,
  ActionToolbarAddLayer,
  DesignerPanel,
  DesignerPane,
  DesignerPaneTitle,
  DesignerPaneContent,
} from "@shadcn/designer";

export default function App() {
  return (
    <Designer className="h-svh">
      <DesignerContent>
        <DesignerPanel />
        <DesignerCanvas>
          <DesignerFrame />
        </DesignerCanvas>
        <DesignerPanel>
          <DesignerPane>
            <DesignerPaneTitle>Layers</DesignerPaneTitle>
            <DesignerPaneContent>Hello World</DesignerPaneContent>
          </DesignerPane>
        </DesignerPanel>
      </DesignerContent>
      <DesignerToolbar>
        <DesignerToolbarGroup>
          <ActionToolbarAddLayer />
        </DesignerToolbarGroup>
      </DesignerToolbar>
    </Designer>
  );
}
```

You should see a new pane with the title "Layers" and the content "Hello World" in the right panel.

## Actions and Controls

To display and control the properties of a layer, we use [`<Action />`](/docs/reference/actions) components.

The `@shadcn/designer` package ships with several actions out of the box. **We provide the necessary API and components to create your own custom actions.**

Let's add a [`<ActionPosition />`](/docs/reference/actions#actionposition) to the right panel to display the position of the layer.

```tsx
import {
  Designer,
  DesignerContent,
  DesignerCanvas,
  DesignerFrame,
  DesignerToolbar,
  DesignerToolbarGroup,
  ActionPosition,
  ActionToolbarAddLayer,
  DesignerPanel,
  DesignerPane,
  DesignerPaneTitle,
  DesignerPaneContent,
} from "@shadcn/designer";

export default function App() {
  return (
    <Designer className="h-svh">
      <DesignerContent>
        <DesignerPanel />
        <DesignerCanvas>
          <DesignerFrame />
        </DesignerCanvas>
        <DesignerPanel>
          <DesignerPane>
            <DesignerPaneTitle>Layers</DesignerPaneTitle>
            <DesignerPaneContent>
              <ActionPosition />
            </DesignerPaneContent>
          </DesignerPane>
        </DesignerPanel>
      </DesignerContent>
      <DesignerToolbar>
        <DesignerToolbarGroup>
          <ActionToolbarAddLayer />
        </DesignerToolbarGroup>
      </DesignerToolbar>
    </Designer>
  );
}
```

You should see a new _Position_ action in the right panel. It comes with `X` and `Y` inputs to control the position of the layer. If you click and drag a layer you should see the `X` and `Y` values change.

## More Actions

Let's build a custom panel with more actions and import it into our designer.

Create a new file called `src/panel-right.tsx` and add the following code.

```tsx
import {
  ActionFill,
  ActionPadding,
  ActionBoxShadow,
  DesignerPanel,
  DesignerPane,
  DesignerPaneTitle,
  DesignerPaneContent,
  ActionPosition,
  ActionSize,
  ActionCorner,
  ActionBorder,
  ActionRotate,
  ActionDirection,
  ActionTextValue,
  ActionImageFit,
  ActionImageFilter,
  ActionFont,
  ActionColor,
  ActionFontSize,
  ActionLineHeight,
  ActionLetterSpacing,
  ActionTextAlign,
  ActionAlignItems,
  ActionFontStyle,
  ActionTextDecoration,
  ActionTextTransform,
  ActionTextShadow,
  ActionTextStroke,
} from "@shadcn/designer";

export function PanelRight() {
  return (
    <DesignerPanel>
      <DesignerPane>
        <DesignerPaneTitle>Layer</DesignerPaneTitle>
        <DesignerPaneContent>
          <ActionPosition />
          <ActionSize />
        </DesignerPaneContent>
      </DesignerPane>
      <DesignerPane>
        <DesignerPaneTitle>Styles</DesignerPaneTitle>
        <DesignerPaneContent>
          <ActionCorner />
          <ActionBorder />
          <ActionBoxShadow />
          <ActionPadding />
          <ActionFill />
        </DesignerPaneContent>
      </DesignerPane>
      <DesignerPane>
        <DesignerPaneTitle>Transforms</DesignerPaneTitle>
        <DesignerPaneContent>
          <ActionRotate />
          <ActionDirection />
        </DesignerPaneContent>
      </DesignerPane>
      <DesignerPane showForLayerTypes={["text"]}>
        <DesignerPaneContent>
          <ActionTextValue />
        </DesignerPaneContent>
      </DesignerPane>
      <DesignerPane showForLayerTypes={["image"]}>
        <DesignerPaneTitle>Image</DesignerPaneTitle>
        <DesignerPaneContent>
          <ActionImageFit />
        </DesignerPaneContent>
      </DesignerPane>
      <DesignerPane showForLayerTypes={["image"]}>
        <DesignerPaneTitle>Filters</DesignerPaneTitle>
        <DesignerPaneContent>
          <ActionImageFilter />
        </DesignerPaneContent>
      </DesignerPane>
      <DesignerPane showForLayerTypes={["text", "icon"]}>
        <DesignerPaneTitle>Text</DesignerPaneTitle>
        <DesignerPaneContent>
          <ActionColor />
          <ActionFontSize />
          <ActionLineHeight />
          <ActionLetterSpacing />
          <ActionTextAlign />
          <ActionAlignItems />
          <ActionFontStyle />
          <ActionTextDecoration />
          <ActionTextTransform />
          <ActionTextShadow />
          <ActionTextStroke />
        </DesignerPaneContent>
      </DesignerPane>
    </DesignerPanel>
  );
}
```

Then import the `PanelRight` component into your `src/App.tsx` file.

```tsx
import {
  Designer,
  DesignerContent,
  DesignerCanvas,
  DesignerFrame,
  DesignerToolbar,
  DesignerToolbarGroup,
  ActionToolbarAddLayer,
  DesignerPanel,
} from "@shadcn/designer";

import { PanelRight } from "./panel-right";

export default function App() {
  return (
    <Designer className="h-svh">
      <DesignerContent>
        <DesignerPanel />
        <DesignerCanvas>
          <DesignerFrame />
        </DesignerCanvas>
        <PanelRight />
      </DesignerContent>
      <DesignerToolbar>
        <DesignerToolbarGroup>
          <ActionToolbarAddLayer />
        </DesignerToolbarGroup>
      </DesignerToolbar>
    </Designer>
  );
}
```

You should see a new panel on the right side of the canvas. The panel has the actions to control the layer.

See the [Actions](/docs/reference/actions) section for more information on available actions.

## Next Steps

- [Add a custom layer to the designer](/docs/concepts/layers)
- [Browse more examples](/docs/examples)
- Read more about [components](/docs/reference/designer) and [hooks](/docs/reference/hooks)