@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
• UI Registry - 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 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

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

Usage

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:

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

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

Development

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

Publishing

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

Licenses

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

© 2025 Living Security