@yuno-payments/prototype-kit

Yuno Dashboard Prototype Kit as an npm package: the shadcn-style atoms (ui), patterns and organisms skinned with Yuno tokens. Source and docs: https://github.com/yuno-payments/prototype-kit (https://prototype-kit.tools.y.uno).

Where the Dashboard design system (@yuno-payments/dashboard-design-system) has an atom, the kit's ui export is that atom, re-exported or wrapped; the rest is the kit's own, meant for prototypes.

Install

npm install @yuno-payments/prototype-kit

Peer dependencies: react ^19, react-dom ^19. Tailwind v4 in the consumer.

Styles

In your Tailwind CSS entry, the design system's tokens.css takes the place of @import "tailwindcss" (it imports Tailwind itself):

@import "@yuno-payments/dashboard-design-system/tokens.css";
@import "@yuno-payments/prototype-kit/styles.css";
@source "../node_modules/@yuno-payments/prototype-kit";

Define --font-geist-sans and --font-geist-mono on <html> (next/font, the geist package, or Google Fonts). Dark mode is the .dark class on <html>.

Providers

Wrap the app once:

import { LanguageProvider } from "@yuno-payments/prototype-kit/lib/i18n/context";
import { TooltipProvider } from "@yuno-payments/prototype-kit/ui/tooltip";

<LanguageProvider>
  <TooltipProvider>{children}</TooltipProvider>
</LanguageProvider>

The Sidebar and the keyboard-shortcuts dialog read labels through the i18n context; tooltips need the Radix provider.

Components

import { Button } from "@yuno-payments/prototype-kit/ui/button";
import { KpiCard } from "@yuno-payments/prototype-kit/patterns/kpi-card";
import { Sidebar } from "@yuno-payments/prototype-kit/organisms/sidebar";
import { cn } from "@yuno-payments/prototype-kit/lib/utils";

Every file under components/ui, components/patterns and components/organisms is an entry point. manifest.json lists all of them with purpose, triggers, variants, recipes and the exact import line; it is what the kit's Claude Code skills and MCP server read.

Assets

Some components reference static files by absolute URL (/yuno-logo.svg, /illustrations/*, /empty-state/*). Copy node_modules/@yuno-payments/prototype-kit/assets/* into your public directory, or pass your own paths where the component takes a prop (e.g. Sidebar logoSrc).

Conventions

Tokens only (never hex), one Primary per screen, Phosphor icons in light / fill, Geist Sans, spacing in multiples of 4, the 9-token radius scale, no shadows on inputs. The full rules live in the kit's CLAUDE.md.