Getting started

How to use this kit

This kit does not replace the official Design System (Storybook). It's the prototype-flavored mirror: same tokens, same components visually, but focused on mockup speed.

For designers and PMs

When you need to build a prototype of a flow — a new risk form, a reports view, a confirmation modal — copy the components from here. Each one ships with code ready to paste into your local prototype (or hand to Claude to assemble).

For devs

This kit is not imported as a package.

Prototypes are illustrative. When a flow reaches production, take the structure and composition and swap for the official DS components (Storybook) — which is already wired to the monorepo with hover overrides, neutral vs slate tokens, and other established decisions.

Copying a component

On any component page you'll see examples with a Copy button at the top right of the code block. Paste into your project assuming you already have shadcn base installed (cn() utility, Tailwind, and radix primitives).

Example

<Button>Continue</Button>
<Button variant="outline">Cancel</Button>

Contributing new components

When creating a Yuno-specific component on top of shadcn (e.g. currency selector, transaction card), add it under src/components/ui/ and document it with the same format: Anatomy → When to use → Do/Don't → Examples.