@nipsys/lsd - Substance over Spectacle

Minimalist, accessible UI components following the Logos Design System. Built for React 19+ on top of Radix UI using shadcn/ui.

This component library follows the guidelines defined by the original Logos Design System, prioritising accessibility and content readability over aesthetics.

Documentation

Visit lsd.nipsys.dev to view the complete documentation and live examples.

Get Started with LSD

Install the latest version of nipsys/lsd

npm add @nipsys/lsd

Import the LSD styles, either in CSS or JS/TS:

@import "@nipsys/lsd/css";

import '@nipsys/lsd/css'

Components are now ready to be used:

import { Button, Card, CardContent, CardHeader, CardTitle } from '@nipsys/lsd'

function App() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card with a button</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Click me</Button>
      </CardContent>
    </Card>
  )
}

What's Inside

• 39 components covering forms, navigation, data display, overlays, and more
• Radix UI primitives for accessibility-first behavior
• 5 accent themes + light/dark modes
• Documentation with 185+ live examples

Skills

Installation

Install the skills appropriate to your needs:

# For users developing WITH LSD
npx skills add nipsys-lsd

# For contributors TO LSD monorepo
npx skills add nipsys-lsd-contribute

# Install both skills for full LSD development experience
npx skills add nipsys-lsd nipsys-lsd-contribute

Available Skills

Skill	Description	When to Use
nipsys-lsd	Component usage patterns for LSD design system with 38+ components, spacing variables, theming, and composition	Building UI components with LSD in any React project
nipsys-lsd-contribute	Monorepo maintenance workflows for LSD including docs generator, E2E testing, TSDoc annotations, and theme sync	Contributing to the LSD monorepo (packages/lsd and packages/lsd-docs)

Skill Details

• nipsys-lsd - skills/nipsys-lsd/SKILL.md: Get guidance on component APIs, design tokens, spacing variables, theming, and composition patterns when building with LSD components.
• nipsys-lsd-contribute - skills/nipsys-lsd-contribute/SKILL.md: Learn workflows for contributing to the LSD monorepo, including running the docs generator, E2E testing, adding TSDoc annotations, and understanding the theme sync system.

Monorepo Structure

This is a pnpm workspace monorepo containing two packages:

• @nipsys/lsd - The component library
• @nipsys/lsd-docs - Next.js documentation site

Project Structure

packages/
├── lsd/                      # Component library
│   ├── src/
│   │   ├── components/ui/    # LSD Components
│   │   ├── hooks/            # Custom hooks
│   │   ├── lib/              # Utilities (cn(), types)
│   │   └── styles/           # Design tokens (core.css, themes.css)
│   └── package.json
└── lsd-docs/                 # Documentation site
    ├── app/
    │   ├── components/       # Docs layout components
    │   ├── examples/         # 185+ live examples
    │   ├── design-tokens/    # Design system docs
    │   └── getting-started/  # Installation, theming
    ├── e2e/                  # Components behavior & accessibility end-to-end testing
    └── scripts/
        └── docs-generator/   # Automated TSDoc-based generator

Development

Setup

pnpm install

Build

# Build both packages
pnpm build

# Build component library only
pnpm lsd:build

# Build documentation site only
pnpm docs:build

Testing

Note: E2E tests live inside the lsd-docs packages as they are run against the documentation examples pages.

# Run all tests
pnpm test

# LSD-only Unit tests with watch mode
pnpm lsd:test:watch

# E2E tests (Playwright)
pnpm docs:test:e2e

# Test with UI mode
pnpm docs:test:e2e:ui

Documentation Site

# Start dev server
pnpm docs:dev

# Build for production (static build)
pnpm docs:build

# Preview production build
pnpm docs:preview

Linting & Formatting (powered by Biome)

# Check code
pnpm lint

# Auto-fix issues
pnpm lint:fix

# Format code
pnpm format

Documentation pages

The documentation site uses an automated generator that extracts metadata from TSDoc annotations in component source files, so manual modifications to documentation pages should be avoided.

Using the nipsys-lsd-contribute skill

For detailed guidance on regenerating documentation pages, use the nipsys-lsd-contribute skill:

npx skills add nipsys-lsd-contribute

The skill provides comprehensive instructions for:

• Understanding the docs generator architecture
• Adding TSDoc annotations to components
• Creating example pages with proper CODE/SIZE exports
• Testing documentation changes

CLI commands

Regenerate documentation pages from TSDoc annotations:

# Regenerate a specific component's documentation page
pnpm docs:generate button

# Regenerate all documentation pages
pnpm docs:generate --all

The generator parses:

• Component props and their types
• Variant and size configurations from CVA
• Accessibility patterns (keyboard, ARIA, focus)
• TSDoc custom tags for documentation sections

Contributing

See CONTRIBUTING.md for contribution guidelines and code of conduct.

License

MIT