Components Overview

Bosia ships a component registry — a collection of Svelte 5 UI components you install directly into your project. Like shadcn/ui, components are copied into your codebase, not imported from a package. You own the code and can customize it freely.

Installing Components

bun x bosia@latest add <component...>

This downloads the component files into src/lib/components/ui/<component>/ and auto-creates src/lib/utils.ts (the cn() helper) if it doesn't exist.

Pass multiple names to install several components in one call:

bun x bosia@latest add button card input

Path-based Names

Use a path to install components outside the default ui/ directory:

bun x bosia@latest add button              # → src/lib/components/ui/button/
bun x bosia@latest add shop/cart           # → src/lib/components/shop/cart/

Components without a / default to the ui/ prefix. Components with a path are installed to the exact path under src/lib/components/.

Dependencies between components are resolved automatically. For example, bun x bosia@latest add data-table also installs button, input, and separator.

Non-interactive Mode

Pass -y (or --yes) to auto-confirm the "replace existing component?" prompt — useful for CI pipelines and shell scripts:

bun x bosia@latest add -y button card

Local Development

Use --local to install from the local registry (useful when developing Bosia itself):

bun x bosia@latest add button --local

Using Components

Import from the component's barrel export:

<script lang="ts">
	import { Button } from "$lib/components/ui/button";
</script>

<Button variant="outline" size="sm">Click me</Button>

Available Components

Component	Description

UI

Component	Description
Avatar	Image avatar with fallback
Badge	Small status label
Button	Accessible button with variants and sizes
Card	Composable card with header, content, footer
Chart	SVG line and bar charts with tooltips
Data Table	Table with sorting, filtering, pagination
Dropdown Menu	Context-managed dropdown
Icon	Inline SVG icons (Lucide-style)
Input	Styled text input with bindable value
Navbar	Responsive navbar with mobile menu and theme toggle
Separator	Horizontal or vertical divider
Sidebar	Composable sidebar with collapsible icon mode

Todo

Component	Description
Todo Form	Form for creating new todo items
Todo Item	Single todo with toggle, edit, and delete
Todo List	List of todos with completion stats

Customization

All components use cn() for class merging, so you can pass a class prop to override or extend styles:

<Button class="w-full rounded-full">Full Width Rounded</Button>

Components use Tailwind CSS design tokens (bg-primary, text-muted-foreground, etc.) defined in your app.css. Customize the look by editing your theme tokens.

The `cn()` Utility

Auto-created at src/lib/utils.ts on first bosia add. It merges Tailwind classes using built-in class merging + tailwind-merge:

import { cn } from "$lib/utils";

cn("px-4 py-2", condition && "bg-primary", className);
// → merges and deduplicates classes intelligently