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

Sixty primitives, all installed the same way. Higher-level blocks and pages compose these.

Component	Description
Accordion	A vertically stacked set of interactive headings that each reveal a section of content.
Alert	Displays a callout for important messages with default and destructive variants.
Alert Dialog	A modal alert dialog that requires an explicit response.
Aspect Ratio	Displays content within a desired ratio.
Avatar	An avatar with image and fallback slots.
Badge	A small status badge with multiple variants.
Breadcrumb	Displays the path to the current resource as a hierarchy of links.
Button	An accessible button with multiple variants and sizes.
Button Group	Visually groups multiple buttons into a single connected unit.
Calendar	A date selection calendar with keyboard support and min/max constraints.
Card	A card with header, content, and footer slots.
Carousel	A carousel with slide navigation, keyboard support, and snap scrolling.
Chart	SVG line and bar charts with tooltips — zero dependencies.
Checkbox	A checkbox control for toggling options on and off.
Collapsible	An interactive component that expands/collapses a panel.
Combobox	A searchable select built on Popover + Command.
Command	A filterable command palette with keyboard navigation and groups.
Context Menu	A right-click menu with items, shortcuts, separators, and sub-menus.
Data Table	A data table with sorting, filtering, and pagination.
Date Picker	A date picker built on Popover + Calendar.
Dialog	A modal dialog with focus trap, scroll lock, and accessible markup.
Direction	Sets text direction (LTR/RTL) via context.
Drawer	A mobile-first bottom-sheet overlay with focus trap and slide-up animation.
Dropdown Menu	A context-managed dropdown with trigger, content, items, and separators.
Empty	An empty state with icon, title, description, and action slots.
Field	A form field wrapper that auto-wires accessibility attributes.
Form	A form wrapper that manages validation state and feeds errors into Fields.
Hover Card	A hover-triggered floating panel for rich previews.
Icons	Guide for using @lucide/svelte — tree-shakeable Lucide icons.
Input	A styled text input.
Input Group	Combine inputs with addons, buttons, and text.
Input OTP	Accessible one-time password input with copy-paste support.
Item	A flex container with media, title, description, and actions.
Kbd	Displays keyboard shortcut keys; optionally binds real shortcuts.
Label	An accessible label for form controls.
Menubar	A horizontal menu bar with multiple dropdown menus.
Mode Switcher	A button that cycles the theme through light, dark, and system.
Native Select	A styled native HTML select.
Navbar	A responsive navbar with mobile menu, theme toggle, and user avatar.
Navigation Menu	Top-level navigation with hover/focus popover panels.
Pagination	Pagination with page navigation and next/previous links.
Popover	A floating panel with configurable trigger, side, and alignment.
Progress	Shows the completion progress of a task.
Radio Group	A set of radio buttons for single-selection input.
Range Calendar	A date-range calendar with hover preview and keyboard navigation.
Resizable	Accessible resizable panel groups with drag support.
Scroll Area	A scrollable container with a custom styled scrollbar.
Select	A dropdown select for single-value selection.
Separator	A horizontal or vertical divider line.
Sidebar	A composable sidebar with groups, menus, and collapsible icon mode.
Skeleton	A placeholder for loading states.
Slider	A slider input supporting single and range modes.
Sonner	An opinionated toast notification component with zero dependencies.
Spinner	An animated loading indicator.
Switch	A toggle switch for on/off states.
Table	Styled table sub-components for building data displays.
Tabs	Layered sections of content displayed one at a time.
Textarea	A styled multi-line text input.
Toggle	A two-state button that can be toggled on or off.
Toggle Group	A group of toggle buttons where one or more can be active.
Tooltip	A popup shown on hover or focus.
Typography	Semantic typography components with pre-styled Tailwind classes.

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