npm package: @livingsecurity/ui
Description: <p align="center">   <img src="https://assets.livingsecurity.com/image/upload/v1712764621/platform-logo-light_mvwpuv.webp" alt="Living Security Logo" /> </p>
Latest version: 0.0.7

<p align="center">
  <img src="https://assets.livingsecurity.com/image/upload/v1712764621/platform-logo-light_mvwpuv.webp" alt="Living Security Logo" />
</p>

<p align="center">
  <strong>Predict · Guide · Act</strong>
</p>

---

# @livingsecurity/ui

Shared UI component library built on React 19, Shadcn, Radix UI, and Tailwind 4.

The foundation of Living Security's AI-first product development approach—designed to work seamlessly with AI coding agents and rapid prototyping tools.

## Documentation

- [Developer Documentation](https://docs.livingsecurity.ai)
- [UI Registry](https://ui.livingsecurity.ai) - Browse all components with live examples

## AI-First Development

This component library is architected for AI-assisted development:

- **MCP Server Integration** - All components are available via Model Context Protocol, enabling AI coding agents like Cursor and Windsurf to scaffold features with production-ready UI
- **v0.app Compatible** - Every component works with [v0.app](https://v0.app) for rapid prototyping by anyone in the company, not just engineers
- **Consistent Patterns** - Standardized component APIs and design tokens ensure AI-generated code follows best practices
- **Fast Iteration** - Prototypes built in v0 become immediate input for product development, accelerating the feedback loop from idea to implementation

This approach lets us move from concept to code faster while maintaining quality and consistency across all Living Security applications.

## Installation

```bash
npm install @livingsecurity/ui
# or
pnpm add @livingsecurity/ui
```

## Usage

```tsx
import { Button, Card, Dialog } from '@livingsecurity/ui';
import '@livingsecurity/ui/styles/globals.css';

function App() {
  return (
    <Card>
      <Button variant="default">Predict</Button>
      <Button variant="ai">Guide</Button>
      <Button variant="primary">Act</Button>
    </Card>
  );
}
```

## What's Included

### UI Components (50+)
Accessible primitives built on Radix UI:
- **Forms**: Input, Textarea, Select, Checkbox, Radio, Switch, Calendar, DatePicker
- **Overlays**: Dialog, Sheet, Drawer, Popover, Tooltip, HoverCard, ContextMenu
- **Navigation**: Sidebar, NavigationMenu, Menubar, Breadcrumb, Tabs
- **Data**: Table, Card, Badge, Avatar, Skeleton, Progress
- **Feedback**: Alert, AlertDialog, Toast (Sonner)
- **Utilities**: Button, Separator, ScrollArea, Resizable, Carousel

### Layouts
Pre-built page layouts:
- `AdminLayout` - Full app with sidebar/nav
- `MinimalLayout` - Clean, centered content

### Blocks
Composite components:
- `AppSidebar`, `NavMain`, `NavSecondary`, `NavUser`
- `LSIcon`, `LSLogo` - Brand components

### Hooks
- `useDarkMode()` - Theme toggling
- `useMobile()` - Responsive breakpoint detection

### Utilities
- `cn()` - Tailwind class merging via `tailwind-merge`

## Styling

Import the global stylesheet in your app entry point:

```tsx
import '@livingsecurity/ui/styles/globals.css';
```

Components use Tailwind 4 and support dark mode via the `.dark` class strategy.

## Development

```bash
pnpm build       # Compile TypeScript + copy styles
pnpm lint        # ESLint check
pnpm typecheck   # TypeScript validation
```

## Publishing

```bash
pnpm publish:patch  # Bump version & publish
pnpm publish:minor
pnpm publish:major
```

## Licenses

* Source code is licensed under [BSD 3-Clause]

---

[© 2025 Living Security](https://www.livingsecurity.ai)