@lucrii/app-components

Svelte component library + design tokens for Lucrii app UIs. Importing the tokens stylesheet matches the Lucrii host's palette, typography, and dark mode automatically — your app looks native without bespoke styling.

Install

npm install @lucrii/app-components

Peer deps (also need to be installed in your app):

npm install svelte @lucide/svelte

Setup

1. Import components from the package root.
2. Import the tokens CSS once (in your entry stylesheet) so dark mode and the colour palette are wired up:

/* app.css */
@import '@lucrii/app-components/tokens.css';
@import 'tailwindcss';

The tokens stylesheet defines CSS custom properties consumed by every component. Tailwind classes (bg-card, text-muted-foreground, etc.) resolve against those tokens — so the same component library renders correctly in both light and dark mode without per-component overrides.

<script lang="ts">
	import { Button, Card, CardContent, CardHeader, CardTitle, Input } from '@lucrii/app-components';
</script>

<Card>
	<CardHeader>
		<CardTitle>Settings</CardTitle>
	</CardHeader>
	<CardContent>
		<Input placeholder="Enter a value..." />
		<Button>Save</Button>
	</CardContent>
</Card>

Components

Layout

| Export | Notes | | ----------------------------------------------------------------------------------------------- | ------------------------------------- | | Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction | Composable card with structured slots | | Separator | Visual divider | | Tabs, TabsList, TabsTrigger, TabsContent | Tabbed sections |

Forms

| Export | Notes | | ------------------------------------------------------------------------------ | -------------------------------------------------------------------------- | | Button (+ buttonVariants, ButtonProps, ButtonVariant, ButtonSize) | Primary action; supports variants + sizes; pass href to render as a link | | Input | Text input | | Textarea | Multi-line input | | Label | Form label | | Checkbox | Checkbox control | | Switch | Toggle switch | | RadioGroup, RadioGroupItem | Radio button group | | Toggle (+ toggleVariants, ToggleVariant, ToggleSize, ToggleVariants) | Toggle button (single, not a switch) |

Feedback

| Export | Notes | | ----------------------------------------------------------------------------- | ------------------------------- | | Alert, AlertTitle, AlertDescription (+ alertVariants, AlertVariant) | Alert banner with variants | | Badge (+ badgeVariants, BadgeVariant) | Status pill | | Progress | Linear progress bar | | Spinner | Indeterminate loading indicator | | Skeleton | Placeholder block while loading |

Utilities

| Export | Notes | | ---------------- | ---------------------------------------------------------------------------------------------- | | cn(...classes) | clsx + tailwind-merge — the standard className combiner used internally by every component |

Variant examples

<Button variant="default">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Outlined</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

<Button size="sm">Small</Button>
<Button size="lg">Large</Button>
<Button size="icon"><MyIcon /></Button>

<Button href="/settings">
	Renders as <a></a>
</Button>

Alert, Badge, Toggle follow the same variant + (where relevant) size prop pattern. Variant prop unions are exported as types so consumers can constrain their own props (e.g. let kind: ButtonVariant).

Dark mode

Driven entirely by the dark class on document.documentElement. The Lucrii host toggles it; @lucrii/app-bridge keeps the iframe in sync. No per-component setup needed — the tokens CSS handles the colour swap.

Scripts

npm run build    # svelte-package → dist/
npm run check    # svelte-check + tsc
npm test         # vitest
npm run lint     # prettier --check + eslint
npm run format   # prettier --write

License

See the repository root.