Sable Kit – React Admin UI Kit

Description

Sable Kit is a small React admin kit: buttons, fields, badges, cards, stats, tables, banners, tabs, a modal, an empty state, and a frame. The showcase is a local Pier Supply desk so the parts are visible together. It is not a live purchasing system.

Features

• Overview, orders, components, and themes pages in the showcase
• Kit parts: buttons, fields, badges, cards, stats, tables, banners, tabs, a modal, an empty state, and a frame
• Four bundled themes, including a dark Ink theme
• Theme tokens applied through CSS variables and applyTheme
• readableInk picks dark or light text for a brand hex
• Desk name and theme on the Themes page

Tech stack

• React and Vite
• TypeScript
• localStorage for the showcase

Requirements

• Node.js 22 or newer
• npm 10 or newer

How to install and run

1. Unzip the archive and open the folder
2. Run npm install, then npm run dev
3. Checks: npm test, npm run lint, npm run typecheck, npm run build, and npm run preview
4. To use the kit in another app, copy src/kit and the .sk- rules in src/index.css

How to rebrand

• Theme and desk name: Themes page in the showcase
• Add or edit a theme object in src/kit/theme.ts
• Showcase sample: src/seed.ts
• Storage key: STORAGE_KEY in src/storage.ts

What’s included

• Full React / Vite source, including the kit and the showcase
• Helper and filter tests, lint, and typecheck setup
• README with install, rebrand, and project layout
• LICENSE (one end product)

Limitations

• The showcase saves to localStorage. There is no API.
• Orders and suppliers are sample records. Nothing is purchased or shipped.
• The kit is CSS plus React. It does not include charts, auth, or a data grid with virtual scrolling.
• Dark theme Ink is one of the four themes. It does not follow the operating system automatically.

License

Commercial license: use the source in one end product (one app, site, or service) for yourself or one client, free or paid. Reselling or publishing the source as a template is not allowed. Full text is in the LICENSE file.