@caratlogic/design-system
Carat Logic shared React component library (Tailwind CSS v4 + shadcn/ui).
Install
npm install @caratlogic/design-system
Peer dependencies: react, react-dom, react-router-dom.
Tailwind CSS setup (required for production builds)
Components use Tailwind utility classes. Dev may look fine without this, but production builds will drop most DS styles unless you register the package as a Tailwind content source.
In your app's main CSS file (e.g. src/index.css), after @import "tailwindcss":
@import "tailwindcss";
@import "@caratlogic/design-system/source.css";
source.css tells Tailwind to scan the published JS bundles for class names. Without it, buttons, sidebar, tables, and other DS components render unstyled in production.
Your app must also define the theme tokens (:root / @theme variables). Copy from src/styles/index.css in this repo or keep your existing app theme if already aligned.
Do not rely on runtime CSS injection
Older builds injected a partial Tailwind stylesheet into the JS bundle via styleInject. That is removed as of v0.0.2 — the host app is the single source of compiled utilities.
Usage
import { Button, Sidebar, SidebarProvider } from '@caratlogic/design-system';
import { Input } from '@caratlogic/design-system/ui';
Package exports
| Import | Description |
|---|---|
@caratlogic/design-system | Atoms, molecules, organisms, layouts |
@caratlogic/design-system/ui | Raw shadcn/ui primitives |
@caratlogic/design-system/source.css | Tailwind @source directives for host apps |
Development
yarn install
yarn build
yarn test