Ship

Export code

Download components, tokens, a design-system package or a full Next.js project.

Export turns your file into code you can hand to developers or run yourself. You export from the Export section of the right panel: choose what to export and which code stack to target, and Shippp packages it as a .zip.

Export in four steps

Choose what to export
Select a screen or a section — or select nothing and open the Export tab of the right panel to export your code-ready screens.
Add an export
In the Export section, click + (Export code). Keep Code selected.
Choose a code target
Next.js + Chakra UI, Next.js + Base UI, Next.js + Radix or OpenUI library (beta). The ⋯ button opens Export options, where Design system package adds your tokens and components to the export.
Export and download
Click Export — the button says what it will export, for example Export 1 screen + DS. When you see Export ready, download the .zip.

The Export section of the inspector with Code and Image tabs, the Next.js + Chakra UI code target and an Export 1 screen + DS button. — The Export section for a selected section.

Tip

Export settings are saved in the document, so the next export of the same screens uses the same target and options. For the Chakra target, the design system package is included by default.

What you get

Export	You get	Best for
Next.js project	A complete, runnable app — npm install and go — with a generated Storybook for every component.	Prototypes, new products, reviewing components in Storybook
Design system	Tokens, components and runtime in one package. Exported when you include the design system package without screens.	Handing a design system to a development team
OpenUI (beta)	Your components for AI agents, with a runnable chat sample.	Generative UI apps built on your design system

Code targets

Target	Stack
Next.js + Chakra UI	React components styled with Chakra UI v3 recipes and a Chakra theme.
Next.js + Base UI	Tailwind CSS with Base UI primitives.
Next.js + Radix	Tailwind CSS with Radix primitives.
OpenUI library (beta)	Your components packaged for AI agents.

Note

Not sure which to pick? Ask your developers which stack the product uses. For a stand-alone project, Next.js + Chakra UI is the default.

Which screens are exported

You start from	Exported
A selected screen or section	What you selected.
Nothing selected (Export tab)	Code-ready screens — sections marked Select for dev.

Copy as code and images

The copy button in the Export section header copies the selected layer as code, for a quick paste into your codebase.
Switch the export to Image to download the selection as PNG or JPG at 1×, 2× or 3×.

Run an exported project

Unzip the Next.js project and run it with Node.js installed:

Terminal

cd my-file-nextjs
npm install
npm run dev

Run npm run storybook to browse every component, variant and state in isolation — see Storybook.

Open http://localhost:3000 to see your design running. This documentation site started exactly this way: its theme and components are a Shippp design-system export.

What is inside a design-system package

Package structure (Chakra target)

theme/
  index.ts              ← createSystem(…) with your tokens and styles
  tokens/               ← primitives: fonts, breakpoints, …
  semantic-tokens/      ← colors, spacing, … (responsive values included)
  text-styles.ts        ← H1, H2, P1, …
  slot-recipes/         ← one recipe per component, variants included
  shippp-receipt.json   ← which file and version the code came from
components/
  button/               ← typed React components, one folder each
  …

The receipt records the file, version and generator settings. The same input always produces the same code, so developers can regenerate safely and review real differences.

Other ways to get code

MCP — let Claude, Cursor or VS Code generate code and sync it into a repository. Learn about MCP.
Export DS (File menu) — a .ds.json of tokens and components to import into another Shippp file. This is a design file, not code.
Save as… — a .comet backup of the whole file.

Limits

Free includes 5 code exports per calendar month; Pro and Max are unlimited. Downloading the same export again does not count twice, and failed exports are never counted. If you hit the limit you'll see Export limit reached. See Plans & usage.

Preview

Storybook