gridsmith-ui

77 React components with a CSS custom property theming engine.

Installation

npm install gridsmith-ui

Icon packs (optional)

The Icon component uses lucide-react by default. Other packs are loaded on demand — install only what you need:

# Default (recommended)
npm install lucide-react

# Alternative packs
npm install @phosphor-icons/react   # phosphor
npm install @heroicons/react        # heroicons
npm install @tabler/icons-react     # tabler
npm install react-icons             # feather (via react-icons)

Setup

Import the design tokens and Tailwind bindings in your CSS entry point:

@import "tailwindcss";
@import "gridsmith-ui/roots.css";
@import "gridsmith-ui/tokens.css";
@import "gridsmith-ui/tailwind.css";

• roots.css — the CSS custom property engine (L1 roots, L2 derived scales, L3 semantics)
• tokens.css — default Precision Minimal preset values (optional: use generate-tokens.ts to customise)
• tailwind.css — maps --ds-* tokens to Tailwind utilities (p-ds-4, text-2xs, opacity-disabled)

Usage

import { Button, Card, Input } from "gridsmith-ui";
import { Icon, IconProvider } from "gridsmith-ui/icons";
import { cn } from "gridsmith-ui/utils";

Theming

Override any --ds-* CSS custom property on :root or a wrapper element. All derived scales update reactively.

:root {
  --ds-hue-primary: 220;
  --ds-radius-base: 6px;
  --ds-space-unit: 4px;
}

Icon packs

Wrap your app in <IconProvider> to select a pack:

<IconProvider pack="phosphor" weight={1.5}>
  <App />
</IconProvider>

Peer dependencies

| Package | Required | |---------|----------| | react / react-dom | Yes (^18 or ^19) | | lucide-react | Optional (default icon pack) | | @phosphor-icons/react | Optional | | @heroicons/react | Optional | | @tabler/icons-react | Optional | | react-icons | Optional |

License

MIT