Export structure

Formats

• DESIGN.md (free): a design-system file that coding agents read.
• Code, zip (Pro): the whole project below, ready to pnpm install and run.
• Code, copy into existing project (Pro): the same files as a list with contents, plus the dependencies to add.
• Design tokens (DTCG): tokens.json, for design tooling. Pro.

What is in the zip

package.json  tsconfig.json  next.config.ts  postcss.config.mjs  .gitignore  README.md
app/
  layout.tsx            fonts and the root layout
  globals.css           Tailwind v4 import and base styles
  page.tsx              the design: one shell, its sections placed by region
data/
  content.ts            the typed content model (copy, numbers, rows)
  layout.ts             the Style DNA and each section's settings
  handlers.ts           typed no-op handlers, one per action in the design
styles/
  tokens.css            design tokens generated from the Style DNA
  dna.css               the .dna utilities the components rely on
components/catalog/
  shells/               the shell (sidebar, top bar, ...) the design uses
  sections/             one file per section variant the design uses
  primitives.tsx  region.tsx  content.ts  types.ts
lib/
  types.ts  utils.ts    shared types and the cn() helper
  engine/content-read.ts

Only the catalog components the design actually uses are copied, verbatim. The page composes them statically, so there is no design runtime, no generated wrapper library and no network call. Actions such as buttons are typed no-op handlers marked TODO: StyleDUI generates no business logic. The dependencies are pinned to the versions this project builds against and include only what the copied files import (for example lucide-react, clsx, tailwind-merge).

Does the export match the preview?

The preview and the export render from the same catalog source files, and the tokens come from the same function, so they match by construction. An automated check exports ten designs, installs and builds each one, and compares screenshots of the result with the preview at 375 and 1280 pixels wide, allowing under 0.5% of pixels to differ. It runs daily.

Add it to a Next.js and shadcn/ui app

The export uses the same conventions as a shadcn/ui project (the @/ alias, a cn() helper in lib/utils.ts, Tailwind CSS variables, lucide icons), but its components do not import shadcn/ui components, so nothing extra needs installing from shadcn. It is built against Next.js 16, React 19 and Tailwind CSS v4, the versions pinned in the export's package.json.

1. Choose Copy into existing project in the editor's Export menu (or run styledui export … --format files) and add the listed dependencies with your package manager.
2. Copy components/catalog, data, styles and lib/engine/content-read.ts into your project, and merge lib/types.ts and lib/utils.ts with yours (shadcn's cn() is the same helper).
3. In your global stylesheet, after @import "tailwindcss", add @import "../styles/dna.css"; and @import "../styles/tokens.css"; (adjust the path to where styles/ sits).
4. Put the contents of app/page.tsx in the route where you want the dashboard, for example app/dashboard/page.tsx. For matching type, load the Geist and Instrument Serif fonts as the exported app/layout.tsx does.
5. Replace the sample data in data/content.ts with your own, and connect data/handlers.ts to your code. Edit styles/tokens.css to restyle.

Who can export code

Code export is part of Pro, and so are DTCG tokens and API keys for the CLI and MCP server. Exploring, share links and DESIGN.md are free, so you can shape a design and see it live before you decide. Pro exports carry no attribution or watermark: the files are yours. The licence terms for exported code are in the Terms.

Limits for every plan are on plans and limits.