im-test-kit
v0.1.0
Published
InsuranceMarket UI Kit — React 18 component library for Figma Make. Built on Tailwind CSS v4 with a token-driven, light/dark design system.
Readme
im-test-kit
React 18 component library for the InsuranceMarket design system, packaged as a Figma Make kit. Built with Tailwind CSS v4 (CSS-first tokens), TypeScript, and Vite library mode. Light + dark themes, token-driven, zero icon dependencies.
Brand primary: deep ocean blue
sky-800(#075985). Mirrors the Figma fileInsuranceMarket — Test UI Kit.
Install
npm install im-test-kitreact@^18 and react-dom@^18 are peer dependencies.
Usage
import { Button, QuoteCard, NavHeader } from 'im-test-kit'
import 'im-test-kit/styles.css' // once, at the app root
export default function App() {
return (
<>
<NavHeader
brandName="InsuranceMarket"
links={[{ label: 'Car', active: true }, { label: 'Health' }]}
actions={<Button variant="primary" size="sm">Get a quote</Button>}
/>
<QuoteCard insurer="Falcon Assure" price={1620} period="/yr" highlighted
badge={{ label: 'Best value', tone: 'success' }}
features={[{ label: 'Comprehensive cover' }, { label: 'Roadside assistance' }]} />
</>
)
}Components (17)
- Atoms:
Button·Badge·Input·Select·Checkbox·RadioGroup·Toggle - Molecules:
FormField·SearchBar·Alert·InsuranceChip·StepIndicator - Organisms:
NavHeader·QuoteCard·PolicyCard·InsuranceSelector·ComparisonRow
Plus the cn() class-merge helper and the INSURANCE_TYPES metadata map. See
guidelines/ for full per-component usage.
Theming
- Tokens are CSS variables defined in
src/styles/tokens.css: a primitive layer (Tailwind palette) and a semantic layer (background,brand,danger, …). - Style with semantic Tailwind utilities (
bg-brand,text-foreground,border-border) — they flip automatically in dark mode. - Dark mode is class-based: add
darkto<html>.
document.documentElement.classList.toggle('dark')Develop
npm install
npm run typecheck # tsc --noEmit
npm run build # -> dist/index.js, dist/index.d.ts, dist/style.css
npm run preview # browse all 17 components in a local gallery (port 5190)The preview/ gallery imports the kit from source and hot-reloads as you edit.
It is dev-only and never published (the files field ships dist/ + guidelines/
README.mdonly).
The build externalizes React and emits a single precompiled dist/style.css
containing all tokens + used utilities (Figma Make never runs Tailwind itself).
Publishing
This package can publish to either target. Update name first if needed.
A) Public npm registry
# name e.g. "@your-scope/ui" (public) or an unscoped name
npm publish --access publicB) Figma's private registry (Org/Enterprise)
For restricting the kit to your organization. An org admin must enable the
private registry; then authenticate and publish with the scope Figma assigns
(use a unique scope that doesn't collide with public npm, e.g.
@insurancemarket-private/ui). Follow Figma's
Bring your design system package
docs for the exact registry URL and auth token steps.
Before either: npm pack --dry-run and confirm the tarball contains only dist/,
guidelines/, README.md, and package.json — no src, no devDeps, no
workspace: protocols.
Use it as a Figma Make kit
- Publish the package (above), or keep iterating locally first.
- In Figma Make: open a file → Settings → Create a kit.
- Add this npm package. Optionally also import the variables/styles from
the published Figma library
InsuranceMarket — Test UI Kitso designer tokens and code stay aligned. - Attach the guidelines (this repo's
guidelines/folder) — Make relies on them to use components correctly. - Test with a prompt (e.g. "build a car-insurance comparison page"), then Publish kit to an organization project so your team can select it.
License
UNLICENSED — internal/private use unless you change license in package.json.