cozy-code-design-system

Standalone React design system extracted from Cozy Code Library — Deema. Components, tokens, typography, icons, spacing, radii, shadows, and webfonts match the source library. This package does not include app pages, routes, APIs, or demo-only code.

Compatible with React 18, Vite, TypeScript, and Figma Make kits.

Install

npm install cozy-code-design-system

Peer dependencies: react and react-dom (^18 or ^19).

Usage

Import styles once, then import components from the main entry:

import "cozy-code-design-system/styles.css";
import { Button, Input, Card } from "cozy-code-design-system";

export function Example() {
  return (
    <Card>
      <Input label="Email" placeholder="[email protected]" />
      <Button variant="primary">Continue</Button>
    </Card>
  );
}

Vite + Tailwind (Figma Make default)

Figma Make uses Vite. If the host app already runs Tailwind CSS v4, import the theme instead of the compiled stylesheet so host utilities and component classes share the same tokens:

@import "tailwindcss";
@import "cozy-code-design-system/theme.css";
@source "../node_modules/cozy-code-design-system/src/**/*.{js,ts,jsx,tsx}";

import { Button, Input, Card } from "cozy-code-design-system";

theme.css ships self-hosted Poppins and Roboto Mono webfonts plus colour, type, radius, and shadow tokens.

Exports

| Import | What it provides | | --- | --- | | cozy-code-design-system | Components, variants helpers, cn | | cozy-code-design-system/styles.css | Compiled Tailwind + tokens + fonts | | cozy-code-design-system/theme.css | Tokens, webfonts, and base styles only |

Components

Accordion, AccordionTrigger, AccordionContent, Alert, Badge, Breadcrumb, Button, Card, CardHeader, CardTitle, CardContent, CardFooter, Carousel, Checkbox, CheckboxGroup, ColourSwatch, Combobox, Counter, DatePicker, EnergyLabel, FavouriteButton, Header, Input, InputRange, Link, PillNav, Price, ProductTile, PromoFlag, PromoStrip, Rating, SearchBar, Select, Skeleton, UtilityBar

Tokens

Colour, typography, radius, and shadow values live in src/styles/theme.css as CSS variables (--color-primary, --font-display, --radius-md, --shadow-sm, …). Components consume them through Tailwind utilities such as bg-primary, text-display-1, rounded-md.

Build

From this package folder:

npm install
npm run build

Output: dist/ (ESM + TypeScript declarations + compiled CSS + font assets).

Publish

Do not publish until you are ready. When you are:

npm publish --access public

Private Figma organisation registry:

npm publish

Figma Make kits

This package is prepared for Make kits:

• React 18 compatible (no React 19-only APIs)
• Vite-compatible ESM build
• No workspace-only dependencies
• CSS, fonts, and tokens included in the published files
• Single import path for components

After publishing to npm (public or Figma’s private registry), add cozy-code-design-system to a Make kit and import styles as shown above. Author kit guidelines in Figma Make so generated apps import styles.css (or theme.css + @source) before using components.

License

UNLICENSED — internal design system package.