@nipsysdev/lsd-react

A React component library implementing the Logos Design System (LSD) using shadcn / Radix UI and Tailwind CSS.

Overview

@nipsysdev/lsd-react follows a minimalist design system. The library offers a comprehensive set of UI components with built-in light and dark theme support.

Installation

``bash
npm install @nipsysdev/lsd-react


or


pnpm add @nipsysdev/lsd-react
`

Quick Start

`tsx
import { Button, Input, Card } from '@nipsysdev/lsd-react';
import '@nipsysdev/lsd-react/css';

function App() {
return (



);
}
`

Theming

LSD React uses CSS custom properties for theming. The theme can be switched by adding/removing the .dark class on the root element (or any container).

$3

`css
:root {
--lsd-text: 0 0 0; / Black /
--lsd-border: 0 0 0; / Black /
--lsd-surface-primary: 255 255 255; / White /
--lsd-surface-secondary: 255 255 255; / White /
}
`

$3

`css
.dark {
--lsd-text: 255 255 255; / White /
--lsd-border: 255 255 255; / White /
--lsd-surface-primary: 0 0 0; / Black /
--lsd-surface-secondary: 0 0 0; / Black /
}
`

Components

LSD React provides a comprehensive set of UI components:

$3

- Input: Text input with size variants
- Autocomplete: Searchable dropdown with async support
- Select: Native select with custom styling
- Checkbox: Accessible checkbox component
- Switch: Toggle switch component
- Label: Form label with variants

$3

- Tabs: Tabbed interface with size variants
- Sidebar: Collapsible sidebar with submenus
- Breadcrumb: Navigation breadcrumb (coming soon)

$3

- Card: Container with header, content, and footer
- Sheet: Slide-out panel component
- Separator: Visual divider
- ScrollArea: Custom scrollable area

$3

- Badge: Status and label badges
- Typography: Text components with variants
- Skeleton: Loading placeholder
- Progress: Progress bar with indeterminate state

$3

- Dialog: Modal dialog component
- AlertDialog: Confirmation dialog
- Popover: Popup content component
- Tooltip: Hover tooltip
- Sonner: Toast notifications

$3

- Button: Versatile button with variants and sizes
- ButtonGroup: Grouped buttons
- Toggle: Toggle button component
- ToggleGroup: Grouped toggle buttons

Development

$3

- Node.js >= 24.0.0
- pnpm >= 10

$3

`bash
git clone https://github.com/nipsysdev/lsd-react.git
cd lsd-react
pnpm install
`

$3

- pnpm dev - Start development server
- pnpm build - Build the library
- pnpm cosmos - Start React Cosmos dev server
- pnpm cosmos:export - Export Cosmos site
- pnpm lint - Run linting
- pnpm type-check` - Run TypeScript type checking

License

Licensed under GNU GPL v3+