Skip to content

Chore/bump version and update docs #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nipsysdev merged 5 commits into from
Feb 25, 2026
Merged

Chore/bump version and update docs #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
23ae0f9
docs: update cosmos docs
nipsysdev Feb 25, 2026
8de77a5
chore: bump version to 0.2.3
nipsysdev Feb 25, 2026
f78d048
ci(publish): update workflow for npm trusted publishing
nipsysdev Feb 25, 2026
dba6c56
fix: add missing export for scroll area component
nipsysdev Feb 25, 2026
599dbae
docs: update readme
nipsysdev Feb 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion .github/workflows/publish.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ permissions:
jobs:
release:
runs-on: ubuntu-latest
permissions:
contents: read
id-token: write

steps:
- name: Checkout Code
Expand Down Expand Up @@ -72,4 +75,6 @@ jobs:

- name: Publish to npm
if: steps.check.outputs.changed == 'true'
run: pnpm publish --provenance --access public --no-git-checks
run: |
pnpm config set registry 'https://registry.npmjs.org'
pnpm publish --provenance --access public
79 changes: 45 additions & 34 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
# @nipsys/shadcn-lsd

[![license](https://img.shields.io/npm/l/@nipsys/shadcn-lsd.svg)](https://github.com/nipsysdev/shadcn-lsd/blob/main/LICENSE)
[![React](https://img.shields.io/npm/dependency-version/@nipsys/shadcn-lsd/peer/react.svg)](https://react.dev)

A React component library implementing the Logos Design System (LSD). Built with Radix UI primitives and Tailwind CSS, following the shadcn/ui patterns.

## Installation
Expand All @@ -16,15 +19,13 @@ pnpm add @nipsys/shadcn-lsd
import { Dialog, DialogTrigger, DialogContent, Button } from "@nipsys/shadcn-lsd";
```

### Optional: Manual CSS Import

The CSS is automatically injected when you import components, but if you prefer to import the stylesheet explicitly, you can use:
### CSS Import

```tsx
import '@nipsys/shadcn-lsd/css';
```

Or in CSS:
Or in a CSS stylesheet:

```css
@import "@nipsys/shadcn-lsd/css";
Expand Down Expand Up @@ -81,50 +82,60 @@ The design system uses CSS custom properties that you can override:

```css
: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;
}
```

## Components

| Component | Description |
|-----------|-------------|
| Accordion | Vertically stacked collapsible sections |
| AlertDialog | Modal dialog for critical confirmations |
| Autocomplete | Input with async suggestion fetching |
| Badge | Small label for status or categorization |
| Button | Interactive button with multiple variants |
| ButtonGroup | Grouped buttons with optional separators |
| Card | Container for related content |
| Checkbox | Boolean input control |
| Command | Command palette for keyboard navigation |
| Dialog | Modal overlay for focused content |
| Input | Text input field |
| Label | Form field label |
| Menubar | Horizontal menu bar with dropdown menus |
| Popover | Floating content anchored to trigger |
| Progress | Visual indicator of completion |
| ScrollArea | Custom scrollbar container |
| Select | Dropdown selection input |
| Separator | Visual divider between sections |
| Sheet | Slide-out panel overlay |
| Sidebar | Navigation sidebar component |
| Skeleton | Loading placeholder |
| Sonner | Toast notifications |
| Switch | Toggle switch input |
| Tabs | Tabbed content navigation |
| Toggle | Two-state button |
| ToggleGroup | Group of toggle buttons |
| Tooltip | Hover information popup |
| Typography | Text styling components |
| Component | Description | Playground |
|-----------|-------------|------------|
| [Accordion](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FAccordion.fixture.tsx%22%7D) | Vertically stacked collapsible sections | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FAccordion.fixture.tsx%22%7D) |
| [AlertDialog](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FAlertDialog.fixture.tsx%22%7D) | Modal dialog for critical confirmations | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FAlertDialog.fixture.tsx%22%7D) |
| [Autocomplete](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FAutocomplete.fixture.tsx%22%7D) | Input with async suggestion fetching | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FAutocomplete.fixture.tsx%22%7D) |
| [Badge](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FBadge.fixture.tsx%22%7D) | Small label for status or categorization | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FBadge.fixture.tsx%22%7D) |
| [Button](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FButton.fixture.tsx%22%7D) | Interactive button with multiple variants | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FButton.fixture.tsx%22%7D) |
| [ButtonGroup](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FButtonGroup.fixture.tsx%22%7D) | Grouped buttons with optional separators | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FButtonGroup.fixture.tsx%22%7D) |
| [Card](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FCard.fixture.tsx%22%7D) | Container for related content | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FCard.fixture.tsx%22%7D) |
| [Checkbox](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FCheckbox.fixture.tsx%22%7D) | Boolean input control | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FCheckbox.fixture.tsx%22%7D) |
| [Command](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FCommand.fixture.tsx%22%7D) | Command palette for keyboard navigation | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FCommand.fixture.tsx%22%7D) |
| [Dialog](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FDialog.fixture.tsx%22%7D) | Modal overlay for focused content | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FDialog.fixture.tsx%22%7D) |
| [Input](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FInput.fixture.tsx%22%7D) | Text input field | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FInput.fixture.tsx%22%7D) |
| [Label](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FLabel.fixture.tsx%22%7D) | Form field label | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FLabel.fixture.tsx%22%7D) |
| [Menubar](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FMenubar.fixture.tsx%22%7D) | Horizontal menu bar with dropdown menus | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FMenubar.fixture.tsx%22%7D) |
| [Popover](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FPopover.fixture.tsx%22%7D) | Floating content anchored to trigger | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FPopover.fixture.tsx%22%7D) |
| [Progress](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FProgress.fixture.tsx%22%7D) | Visual indicator of completion | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FProgress.fixture.tsx%22%7D) |
| [ScrollArea](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FScrollArea.fixture.tsx%22%7D) | Custom scrollbar container | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FScrollArea.fixture.tsx%22%7D) |
| [Select](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FSelect.fixture.tsx%22%7D) | Dropdown selection input | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FSelect.fixture.tsx%22%7D) |
| [Separator](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FSeparator.fixture.tsx%22%7D) | Visual divider between sections | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FSeparator.fixture.tsx%22%7D) |
| [Sheet](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FSheet.fixture.tsx%22%7D) | Slide-out panel overlay | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FSheet.fixture.tsx%22%7D) |
| [Sidebar](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FSidebar.fixture.tsx%22%7D) | Navigation sidebar component | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FSidebar.fixture.tsx%22%7D) |
| [Sonner](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FSonner.fixture.tsx%22%7D) | Toast notifications | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FSonner.fixture.tsx%22%7D) |
| [Switch](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FSwitch.fixture.tsx%22%7D) | Toggle switch input | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FSwitch.fixture.tsx%22%7D) |
| [Tabs](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FTabs.fixture.tsx%22%7D) | Tabbed content navigation | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FTabs.fixture.tsx%22%7D) |
| [Toggle](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FToggle.fixture.tsx%22%7D) | Two-state button | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FToggle.fixture.tsx%22%7D) |
| [ToggleGroup](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FToggleGroup.fixture.tsx%22%7D) | Group of toggle buttons | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FToggleGroup.fixture.tsx%22%7D) |
| [Typography](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FTypography.fixture.tsx%22%7D) | Text styling components | [View →](https://lsd.nipsys.dev/?fixtureId=%7B%22path%22%3A%22src%2F__cosmos__%2Ffixtures%2FTypography.fixture.tsx%22%7D) |

## Development
M
Expand Down
127 changes: 75 additions & 52 deletions ...sets/_virtual_cosmos-imports-D5kXteyF.css → ...sets/_virtual_cosmos-imports-CQwcAN1z.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -633,11 +633,6 @@
height: calc(var(--lsd-spacing) * 6);
}

.lsd\:size-7 {
width: calc(var(--lsd-spacing) * 7);
height: calc(var(--lsd-spacing) * 7);
}

.lsd\:size-8 {
width: calc(var(--lsd-spacing) * 8);
height: calc(var(--lsd-spacing) * 8);
Expand Down Expand Up @@ -988,6 +983,10 @@
flex: 1;
}

.lsd\:flex-auto {
flex: auto;
}

.lsd\:shrink-0 {
flex-shrink: 0;
}
Expand Down Expand Up @@ -1087,6 +1086,10 @@
grid-template-columns: repeat(1, minmax(0, 1fr));
}

.lsd\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lsd\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
Expand Down Expand Up @@ -1342,10 +1345,6 @@
border-style: none;
}

.lsd\:border-black {
border-color: var(--lsd-color-black);
}

.lsd\:border-lsd-border {
border-color: var(--lsd-border);
}
Expand All @@ -1366,10 +1365,6 @@
border-color: var(--lsd-text-secondary);
}

.lsd\:border-lsd-theme-teal {
border-color: var(--lsd-theme-teal);
}

.lsd\:border-lsd-warning {
border-color: var(--lsd-warning);
}
Expand Down Expand Up @@ -1402,7 +1397,7 @@
background-color: var(--background);
}

.lsd\:bg-black, .lsd\:bg-black\/50 {
.lsd\:bg-black\/50 {
background-color: var(--lsd-color-black);
}

Expand Down Expand Up @@ -1444,10 +1439,6 @@
background-color: var(--lsd-surface);
}

.lsd\:bg-lsd-theme-teal {
background-color: var(--lsd-theme-teal);
}

.lsd\:bg-lsd-warning {
background-color: var(--lsd-warning);
}
Expand Down Expand Up @@ -1484,10 +1475,6 @@
background-color: #0000;
}

.lsd\:bg-white {
background-color: var(--lsd-color-white);
}

.lsd\:bg-none {
background-image: none;
}
Expand Down Expand Up @@ -1936,10 +1923,22 @@
color: var(--lsd-destructive);
}

.lsd\:text-lsd-destructive-text {
color: var(--lsd-destructive-text);
}

.lsd\:text-lsd-icon-primary {
color: var(--lsd-icon-primary);
}

.lsd\:text-lsd-info-text {
color: var(--lsd-info-text);
}

.lsd\:text-lsd-success-text {
color: var(--lsd-success-text);
}

.lsd\:text-lsd-surface {
color: var(--lsd-surface);
}
Expand All @@ -1952,6 +1951,10 @@
color: var(--lsd-text-secondary);
}

.lsd\:text-lsd-warning-text {
color: var(--lsd-warning-text);
}

.lsd\:text-muted-foreground {
color: var(--muted-foreground);
}
Expand Down Expand Up @@ -2168,14 +2171,6 @@
padding-right: calc(var(--lsd-spacing) * 8);
}

.lsd\:group-aria-checked\:border-lsd-surface:is(:where(.lsd\:group)[aria-checked="true"] *) {
border-color: var(--lsd-surface);
}

.lsd\:group-aria-checked\:border-lsd-theme-teal-border:is(:where(.lsd\:group)[aria-checked="true"] *) {
border-color: var(--lsd-theme-teal-border);
}

.lsd\:group-data-\[collapsible\=icon\]\:-mt-8:is(:where(.lsd\:group)[data-collapsible="icon"] *) {
margin-top: calc(var(--lsd-spacing) * -8);
}
Expand Down Expand Up @@ -2321,6 +2316,10 @@
}

@media (hover: hover) {
.lsd\:hover\:bg-accent:hover {
background-color: var(--accent);
}

.lsd\:hover\:bg-black\/10:hover {
background-color: var(--lsd-color-black);
}
Expand Down Expand Up @@ -2355,6 +2354,10 @@
background-color: var(--sidebar-accent);
}

.lsd\:hover\:text-accent-foreground:hover {
color: var(--accent-foreground);
}

.lsd\:hover\:text-sidebar-accent-foreground:hover {
color: var(--sidebar-accent-foreground);
}
Expand Down Expand Up @@ -2561,8 +2564,8 @@
height: calc(var(--lsd-spacing) * 8);
}

.lsd\:data-\[state\=active\]\:border-lsd-text-primary[data-state="active"] {
border-color: var(--lsd-text-primary);
.lsd\:data-\[state\=active\]\:border-lsd-border[data-state="active"] {
border-color: var(--lsd-border);
}

.lsd\:data-\[state\=active\]\:bg-lsd-surface[data-state="active"] {
Expand Down Expand Up @@ -2764,6 +2767,12 @@
}
}

@media (min-width: 64rem) {
.lsd\:lg\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}

@media (hover: hover) {
.lsd\:dark\:hover\:bg-white\/10:is(.dark *):hover {
background-color: var(--lsd-color-white);
Expand Down Expand Up @@ -3164,8 +3173,6 @@
--sidebar-accent-foreground: var(--lsd-text-primary);
--sidebar-border: var(--lsd-border);
--sidebar-ring: var(--lsd-text-primary);
--lsd-theme-teal: #0d9488;
--lsd-theme-teal-border: #115e59;
}

.dark {
Expand Down Expand Up @@ -3216,24 +3223,6 @@
--sidebar-accent-foreground: var(--lsd-text-primary);
--sidebar-border: var(--lsd-border);
--sidebar-ring: var(--lsd-text-primary);
--lsd-theme-teal: #14b8a6;
--lsd-theme-teal-border: #09635c;
}

.theme-teal {
--lsd-primary: #0d9488;
--lsd-primary-foreground: #fff;
--lsd-text-primary: #091f1d;
--lsd-surface: #fff;
--lsd-border: #115e59;
}

.dark.theme-teal {
--lsd-primary: #0d9488;
--lsd-primary-foreground: #fff;
--lsd-text-primary: #f6fffd;
--lsd-surface: #091f1d;
--lsd-border: #09635c;
}

html {
Expand Down Expand Up @@ -3265,6 +3254,40 @@ html {
animation: 1s linear infinite spin;
}

.theme-teal {
--lsd-primary: #0d857c;
--lsd-primary-foreground: #fff;
--lsd-text-primary: #0a4b47;
--lsd-text-secondary: #536a69;
--lsd-surface: #f0fdfa;
--lsd-border: #8fc5c2;
--lsd-destructive: #e3454a;
--lsd-destructive-text: #ff2f2f;
--lsd-success: #2bba69;
--lsd-success-text: #2faa3f;
--lsd-warning: #fcb700;
--lsd-warning-text: #d6b136;
--lsd-info: #3f79ff;
--lsd-info-text: #3a66c5;
}

.dark.theme-teal {
--lsd-primary: #0d9488;
--lsd-primary-foreground: #fff;
--lsd-text-primary: #f6fffd;
--lsd-text-secondary: #8fc5c2;
--lsd-surface: #0a3a36;
--lsd-border: #09635c;
--lsd-destructive: #aa1d24;
--lsd-destructive-text: #ff2f2f;
--lsd-success: #3f981f;
--lsd-success-text: #4ac51d;
--lsd-warning: #bea620;
--lsd-warning-text: #d3c32b;
--lsd-info: #00688e;
--lsd-info-text: #0fa2d8;
}

@property --tw-translate-x {
syntax: "*";
inherits: false;
Expand Down
Loading