@lerianstudio/sindarian-x

Lerian's enterprise UI design system — a shadcn/ui-based component library on React 19 + Tailwind v4. A few degrees less "rounded/modern" than the original @lerianstudio/sindarian-ui: tighter radius, no pill shapes, crisper hairline borders, denser controls, and a grounded Lerian gold. The two libraries coexist — sindarian-x is the enterprise line.

Install

npm install @lerianstudio/sindarian-x
# peers (you provide these):
npm install react react-dom lucide-react react-day-picker react-hook-form tailwindcss

Usage

// 1. Import the theme once, in your app root:
import '@lerianstudio/sindarian-x/styles.css'

// 2. Use components:
import { Button, Card, Badge, useToast } from '@lerianstudio/sindarian-x'

The theme defines design tokens with the shadcn/ui naming convention (--primary, --border, --radius, …) so any component lifted from the shadcn registry inherits the enterprise look with no re-theming. Toggle dark mode by adding the .dark class to a root element.

Display serif (optional)

The title components (CardTitle, DialogTitle, SheetTitle, PageHeader, AlertTitle, DrawerTitle, AlertDialogTitle) carry a font-display slot that defaults to Fraunces serif. This is purely a theming token — no behavioural change for titles.

• Sans opt-out: set --font-display: var(--font-sans) in your app's :root to fold titles back onto the body sans face.

• Self-host Fraunces: the lib does not bundle the font face. Install it and import it before the lib stylesheet so the face is resolved:

  npm install @fontsource-variable/fraunces

  import '@fontsource-variable/fraunces'
  import '@lerianstudio/sindarian-x/styles.css'

Until a Fraunces face is present, the slot falls back to the platform serif (Iowan Old Style / Georgia / serif).

Components (46)

Accordion · Alert · AlertDialog · AspectRatio · Avatar · Badge · Breadcrumb · Button · Calendar · Card · Carousel · Checkbox · Collapsible · Command · ContextMenu · Dialog · Drawer · DropdownMenu · Form · HoverCard · Input · InputOTP · Label · Menubar · NavigationMenu · Pagination · Popover · Progress · RadioGroup · Resizable · ScrollArea · Select · Separator · Sheet · Sidebar · Skeleton · Slider · Switch · Table · Tabs · Textarea · Toast · Toaster · Toggle · ToggleGroup · Tooltip + the useToast / useIsMobile hooks and the cn helper.

The 22 primitives carried over from the matcher app use individual @radix-ui/* packages; the ~24 expansion components added from the shadcn registry use the unified radix-ui package. Both resolve through the same enterprise tokens.

Not yet included: the composed/productive layer (form-fields like InputField, DataTable, EntityBox, Stepper) and chart (needs recharts).

Build

npm run build       # tsc → dist/ (ESM + .d.ts) + tsc-alias + copy styles.css
npm run check-types # tsc --noEmit
npm run check-rsc   # asserts interactive components carry "use client"
npm run test:unit   # node-env vitest for pure logic (money/format/parse paths)

Versioning

This library deliberately stays in the 0.x range until an intentional, explicit 1.0.0. Per the SemVer 0.x clause, anything may change while major is 0, so the release rules map breaking changes to a minor bump (0.3 → 0.4), not a major one — see .releaserc.json. Breaking changes are still labelled as such in the auto-generated CHANGELOG.md (and summarised in MIGRATION.md). Going to 1.0.0 is a deliberate decision, not an automatic consequence of a breaking commit.