@jason/ui-kit (0.5.0)
Installation
@jason:registry=https://git.alwisp.com/api/packages/jason/npm/npm install @jason/[email protected]"@jason/ui-kit": "0.5.0"About this package
@jason/ui-kit
Shared design foundation for all my apps. One brand system, reused everywhere — so new apps start polished and existing apps have a clear upgrade path.
Built on the stack I already use (React + Vite + Tailwind + TypeScript) and guarded by Impeccable so nothing ships looking like a generic AI-generated template.
What's inside
- Generated design tokens + Tailwind preset — accessible dark/light palettes, semantic foregrounds, radius/shadow/motion scales, and a parity check that prevents CSS/TypeScript drift.
- Theme runtime + optional self-hosted fonts — persisted dark/light/system mode, a no-flash script, and Latin variable-font delivery.
cn()helper (clsx + tailwind-merge) — the standard everywhere.- Primitives — Button, Card, FormField, Input, Select, Checkbox, Switch, Tabs, Tooltip, Badge, Dialog, DropdownMenu, Table, Pagination, Skeleton, and Toaster. Radix-backed, accessible, pre-themed.
- Motion —
FadeIn,Stagger(framer/motion, reduced-motion aware). - Animated —
AnimatedNumber(count-up stats),SpotlightCard(cursor glow). - Blocks — responsive
AppShell(desktop sidebar + mobile drawer),CommandPalette(⌘K),Hero,FeatureGrid,Pricing. - Living showcase — executable coverage of themes, states, product UI, and marketing blocks.
- Impeccable wired in —
DESIGN.md/PRODUCT.mddesign context, config, and a CI anti-slop detector.
Install (in a consuming app)
This package publishes to the Gitea npm registry. Add an .npmrc (see .npmrc.example):
@jason:registry=https://git.alwisp.com/api/packages/jason/npm/
//git.alwisp.com/api/packages/jason/npm/:_authToken=${GITEA_NPM_TOKEN}
Then:
npm install @jason/ui-kit
Wire up Tailwind
// tailwind.config.js
module.exports = {
presets: [require("@jason/ui-kit/preset")],
content: [
"./index.html",
"./src/**/*.{ts,tsx}",
"./node_modules/@jason/ui-kit/dist/**/*.js", // so kit classes aren't purged
],
};
// app entry (main.tsx)
import "@jason/ui-kit/styles.css";
Load the branded variable fonts as an opt-in asset:
import "@jason/ui-kit/fonts.css";
import "@jason/ui-kit/styles.css";
Use it
import {
Button, FormField, Input, ThemeProvider, ThemeScript, Toaster
} from "@jason/ui-kit";
<ThemeScript />
<ThemeProvider>
<FormField label="Workspace name" description="Shown in navigation.">
<Input />
</FormField>
<Button>Save</Button>
<Toaster />
</ThemeProvider>
Develop
npm ci
npm run dev # tsup watch build
npm run demo # root demo.html using the real kit components
npm run showcase # living component review surface
npm run check # tokens, types, tests, builds, and design detector
The portable project entry is demo.html. Open
http://localhost:5173/demo.html after running npm run demo.
Publish a new version
npm version patch # or minor / major
npm publish # builds via prepare, pushes to Gitea registry
Extending with 21st.dev
This kit is the base layer. For richer one-off blocks, pull
21st.dev components (shadcn-registry compatible) into an app,
then re-theme them with these tokens and, if broadly useful, promote them into
src/blocks/ here. Run /impeccable polish on anything new before it ships.
See DESIGN.md for the full system spec and MIGRATION.md for adopting the kit in apps that already exist.
Dependencies
Dependencies
| ID | Version |
|---|---|
| @fontsource-variable/jetbrains-mono | ^5.3.0 |
| @fontsource-variable/montserrat | ^5.3.0 |
| @fontsource-variable/open-sans | ^5.3.0 |
| @radix-ui/react-checkbox | ^1.3.9 |
| @radix-ui/react-dialog | ^1.1.4 |
| @radix-ui/react-dropdown-menu | ^2.1.4 |
| @radix-ui/react-select | ^2.3.3 |
| @radix-ui/react-slot | ^1.1.1 |
| @radix-ui/react-switch | ^1.3.5 |
| @radix-ui/react-tabs | ^1.1.19 |
| @radix-ui/react-tooltip | ^1.2.14 |
| class-variance-authority | ^0.7.1 |
| clsx | ^2.1.1 |
| cmdk | ^1.0.4 |
| lucide-react | ^0.469.0 |
| motion | ^11.15.0 |
| sonner | ^1.7.1 |
| tailwind-merge | ^2.6.0 |
Development Dependencies
| ID | Version |
|---|---|
| @testing-library/jest-dom | ^7.0.0 |
| @testing-library/react | ^16.3.2 |
| @types/react | ^18.3.18 |
| @types/react-dom | ^18.3.5 |
| @vitejs/plugin-react | ^6.0.4 |
| autoprefixer | ^10.5.4 |
| axe-core | ^4.12.1 |
| impeccable | ^3.2.1 |
| jsdom | ^29.1.1 |
| react | ^18.3.1 |
| react-dom | ^18.3.1 |
| tailwindcss | ^3.4.17 |
| tsup | ^8.3.5 |
| typescript | ^5.7.2 |
| vite | ^8.1.5 |
| vitest | ^4.1.10 |
Peer Dependencies
| ID | Version |
|---|---|
| react | >=18 <20 |
| react-dom | >=18 <20 |
| tailwindcss | >=3.4 <4 |