Installation

Add them

npx designme add status-pill thinking composer

Each component lands in its own folder in ./designme, with its .html, .css and .js. The shared core, core/core.css and core/core.js, is added once. Every component also gets a demo.html you can open straight away.

Load them in a page

Load the core and the component's files, and copy in the markup from its .html:

<link rel="stylesheet" href="designme/core/core.css">
<link rel="stylesheet" href="designme/status-pill/status-pill.css">

<!-- the markup from designme/status-pill/status-pill.html -->

<script src="designme/core/core.js"></script>
<script src="designme/status-pill/status-pill.js"></script>

Give them your data

The core renders each component when it scrolls into view and plays its demo. To feed one your own data, change its .js, or use the React version, which takes props.

Add them

npx designme add status-pill thinking composer --react

They land in src/components/designme, or components/designme when there is no src folder. Only the shared files they need come with them: designme.css and a few helpers in lib/.

Import them

Each component imports its own styles, so importing it is all it takes:

import { StatusPill } from '@/components/designme/status-pill/StatusPill';

<StatusPill state="reading" label="Reading Figma frames" meta="2 of 4" />

Drive them from your state

Every component takes className. Anything a person can change has a controlled pair, like value and onValueChange, and a default… prop for leaving it to the component. Each component's page lists its props.

Load Inter and JetBrains Mono for the full look. Without them, the components fall back to the system font.