A React component library implementing the Logos Design System (LSD). Built with Radix UI primitives and Tailwind CSS, following the shadcn/ui patterns.
pnpm add @nipsys/shadcn-lsdimport { Dialog, DialogTrigger, DialogContent, Button } from "@nipsys/shadcn-lsd";import '@nipsys/shadcn-lsd/css';Or in a CSS stylesheet:
@import "@nipsys/shadcn-lsd/css";import { Dialog, DialogTrigger, DialogContent, Button } from "@nipsys/shadcn-lsd";
function App() {
return (
<Dialog>
<DialogTrigger asChild>
<Button>Open</Button>
</DialogTrigger>
<DialogContent>
<p>Dialog content here</p>
</DialogContent>
</Dialog>
);
}
export default App;The library supports light and dark themes out of the box. Add the dark class to your root element to enable dark mode:
<html class="dark">
<!-- your app -->
</html>A teal theme variant is also available:
<html class="theme-teal">
<!-- light teal theme -->
</html>
<html class="dark theme-teal">
<!-- dark teal theme -->
</html>The design system uses CSS custom properties that you can override:
:root {
/* Core colors */
--lsd-primary: #000000;
--lsd-primary-foreground: #ffffff;
--lsd-text-primary: #000000;
--lsd-text-secondary: #808080;
--lsd-border: #000000;
--lsd-surface: #ffffff;
/* Icon colors */
--lsd-icon-primary: #000000;
--lsd-icon-secondary: #ffffff;
/* Semantic colors */
--lsd-destructive: #b91c1c;
--lsd-destructive-text: #cb3939;
--lsd-success: #15803d;
--lsd-success-text: #168440;
--lsd-warning: #f59e0b;
--lsd-warning-text: #d68b09;
--lsd-info: #2563eb;
--lsd-info-text: #2563eb;
}| Component | Description | Playground |
|---|---|---|
| Accordion | Vertically stacked collapsible sections | View → |
| AlertDialog | Modal dialog for critical confirmations | View → |
| Autocomplete | Input with async suggestion fetching | View → |
| Badge | Small label for status or categorization | View → |
| Button | Interactive button with multiple variants | View → |
| ButtonGroup | Grouped buttons with optional separators | View → |
| Card | Container for related content | View → |
| Checkbox | Boolean input control | View → |
| Command | Command palette for keyboard navigation | View → |
| Dialog | Modal overlay for focused content | View → |
| Input | Text input field | View → |
| Label | Form field label | View → |
| Menubar | Horizontal menu bar with dropdown menus | View → |
| Popover | Floating content anchored to trigger | View → |
| Progress | Visual indicator of completion | View → |
| ScrollArea | Custom scrollbar container | View → |
| Select | Dropdown selection input | View → |
| Separator | Visual divider between sections | View → |
| Sheet | Slide-out panel overlay | View → |
| Sidebar | Navigation sidebar component | View → |
| Sonner | Toast notifications | View → |
| Switch | Toggle switch input | View → |
| Tabs | Tabbed content navigation | View → |
| Toggle | Two-state button | View → |
| ToggleGroup | Group of toggle buttons | View → |
| Typography | Text styling components | View → |
M
- Node.js >= 24.0.0
- pnpm >= 10
# Clone the repository
git clone https://github.com/nipsysdev/shadcn-lsd.git
cd shadcn-lsd
# Install dependencies
pnpm install# Start component playground
pnpm cosmos
# Build the library
pnpm build
# Run tests
pnpm test
# Run tests in watch mode
pnpm test:watch
# Run tests with coverage
pnpm test:coverage
# Lint code
pnpm lint
# Format code
pnpm formatThe project uses React Cosmos for component development. Run pnpm cosmos to start the playground at http://localhost:5000.
To export a static build for deployment:
pnpm cosmos-export- React 19 - UI library
- TypeScript - Type safety
- Tailwind CSS 4 - Utility-first styling
- Radix UI - Accessible primitives
- Vite - Build tooling
- Vitest - Testing framework
- React Cosmos - Component playground
Make sure your project has these installed:
{
"react": "^19.2.4",
"react-dom": "^19.2.4"
}