@nipsysdev/lsd-react is a UI component library based on the Logos Design System
npm install @nipsysdev/lsd-reactA React component library implementing the Logos Design System (LSD) using shadcn / Radix UI and Tailwind CSS.
@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.
``bash`
npm install @nipsysdev/lsd-reactor
pnpm add @nipsysdev/lsd-react
`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 buttonsDevelopment
$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 checkingLicensed under GNU GPL v3+