LittleHorse UI Library

Shared React component library for LittleHorse frontend projects, built on shadcn/ui and Radix UI primitives.

Installation

pnpm add @littlehorse-enterprises/ui-library

Usage

Import the stylesheet in your app's entry point — it provides the required CSS variables and base styles:

import '@littlehorse-enterprises/ui-library/index.css'

Then import components via deep imports:

import { Button } from '@littlehorse-enterprises/ui-library/button'

export default function App() {
  return <Button variant="default">Click me</Button>
}

Every component is exported as a separate entry point (e.g. /button, /dialog, /form)

Development

pnpm install

# Install pre-commit (if not already installed)
macOS:  brew install pre-commit
Linux:  pip install pre-commit
Windows: pip install pre-commit

# Set up Git hooks
pre-commit install --config .pre-commit-config-front.yaml

# Start Storybook + Vite dev server
pnpm dev

Scripts

Command	Description
pnpm dev	Start Storybook and Vite dev server concurrently
pnpm build	Build library and regenerate package.json exports
pnpm lint	Run ESLint and Prettier checks
pnpm lint:fix	Auto-fix lint and formatting issues
pnpm test	Run unit tests
pnpm test:coverage	Run tests with coverage report
pnpm test:ui	Run tests with Vitest UI dashboard

The pre-commit hook runs lint:fix, test, and build. Commit messages must follow the Conventional Commits format.

Project Structure

src/
  [component-name]/
    index.tsx           # Component implementation
    index.stories.tsx   # Storybook stories
    index.test.tsx      # Vitest unit tests
  lib/
    utils.ts            # cn() utility (clsx + tailwind-merge)
  index.css             # Theme tokens (OKLch CSS variables, light/dark)
scripts/
  generate-exports.js   # Auto-generates package.json exports after build

Adding a Component

1. Create src/[component-name]/index.tsx
2. Add colocated .stories.tsx and .test.tsx files
3. Run pnpm build to register the new export in package.json