Krawma Design System

Registry

Every installable item. A “documented” badge means it ships a contract (variants, states, behavior, a11y).

Tokens (1)

Design tokens

Canonical design tokens — OKLCH color palette (light + dark), radius scale, chart and sidebar vars, and the @theme inline mappings. Lifted 1:1 from WEM-App; the source of all design VALUES.

@krawma/tokens

Libraries (2)

date helpers

Timezone-safe date-only (YYYY-MM-DD) <-> Date helpers used by the date-picker. Pure and unit-testable.

@krawma/date
cn

className composer (clsx + tailwind-merge). The sole composition primitive every UI component depends on.

@krawma/utils

Hooks (1)

Use Mobile

Use Mobile — shared hook (from shadcn/ui).

@krawma/use-mobile

Components (53)

Accordiondocumented

Accordion — from shadcn/ui (radix-nova style).

@krawma/accordion
Alertdocumented

Alert — extracted 1:1 from WEM-App.

@krawma/alert
Alert Dialogdocumented

Alert Dialog — extracted 1:1 from WEM-App.

@krawma/alert-dialog
Aspect Ratio

Aspect Ratio — from shadcn/ui (radix-nova style).

@krawma/aspect-ratio
Avatardocumented

Avatar — extracted 1:1 from WEM-App.

@krawma/avatar
Badgedocumented

Badge — extracted 1:1 from WEM-App.

@krawma/badge
Breadcrumbdocumented

Breadcrumb — from shadcn/ui (radix-nova style).

@krawma/breadcrumb
Buttondocumented

Button — extracted 1:1 from WEM-App.

@krawma/button
Button Group

Button Group — from shadcn/ui (radix-nova style).

@krawma/button-group
Calendardocumented

Calendar — extracted 1:1 from WEM-App.

@krawma/calendar
Carddocumented

Card — extracted 1:1 from WEM-App.

@krawma/card
Carousel

Carousel — from shadcn/ui (radix-nova style).

@krawma/carousel
Chartdocumented

Chart — extracted 1:1 from WEM-App.

@krawma/chart
Checkboxdocumented

Checkbox — extracted 1:1 from WEM-App.

@krawma/checkbox
Collapsibledocumented

Collapsible — extracted 1:1 from WEM-App.

@krawma/collapsible
Comboboxdocumented

Combobox — from shadcn/ui (radix-nova style).

@krawma/combobox
Command

Command — from shadcn/ui (radix-nova style).

@krawma/command
Context Menu

Context Menu — from shadcn/ui (radix-nova style).

@krawma/context-menu
Date Pickerdocumented

Date Picker — extracted 1:1 from WEM-App.

@krawma/date-picker
Dialogdocumented

Dialog — extracted 1:1 from WEM-App.

@krawma/dialog
Drawer

Drawer — from shadcn/ui (radix-nova style).

@krawma/drawer
Dropdown Menudocumented

Dropdown Menu — extracted 1:1 from WEM-App.

@krawma/dropdown-menu
Hover Carddocumented

Hover Card — from shadcn/ui (radix-nova style).

@krawma/hover-card
Inputdocumented

Input — extracted 1:1 from WEM-App.

@krawma/input
Input Group

Input Group — from shadcn/ui (radix-nova style).

@krawma/input-group
Input OTPdocumented

Input OTP — from shadcn/ui (radix-nova style).

@krawma/input-otp
Kbd

Kbd — from shadcn/ui (radix-nova style).

@krawma/kbd
Labeldocumented

Label — extracted 1:1 from WEM-App.

@krawma/label
Menubar

Menubar — from shadcn/ui (radix-nova style).

@krawma/menubar
Native Select

Native Select — from shadcn/ui (radix-nova style).

@krawma/native-select
Navigation Menudocumented

Navigation Menu — from shadcn/ui (radix-nova style).

@krawma/navigation-menu
Number Input

Number Input — extracted 1:1 from WEM-App.

@krawma/number-input
Paginationdocumented

Pagination — from shadcn/ui (radix-nova style).

@krawma/pagination
Popoverdocumented

Popover — extracted 1:1 from WEM-App.

@krawma/popover
Progress

Progress — from shadcn/ui (radix-nova style).

@krawma/progress
Radio Groupdocumented

Radio Group — extracted 1:1 from WEM-App.

@krawma/radio-group
Resizable

Resizable — from shadcn/ui (radix-nova style).

@krawma/resizable
Scroll Area

Scroll Area — from shadcn/ui (radix-nova style).

@krawma/scroll-area
Selectdocumented

Select — extracted 1:1 from WEM-App.

@krawma/select
Separatordocumented

Separator — extracted 1:1 from WEM-App.

@krawma/separator
Sheetdocumented

Sheet — extracted 1:1 from WEM-App.

@krawma/sheet
Sidebardocumented

Sidebar — from shadcn/ui (radix-nova style).

@krawma/sidebar
Skeletondocumented

Skeleton — extracted 1:1 from WEM-App.

@krawma/skeleton
Slider

Slider — from shadcn/ui (radix-nova style).

@krawma/slider
Sonnerdocumented

Sonner — extracted 1:1 from WEM-App.

@krawma/sonner
Spinnerdocumented

Spinner — from shadcn/ui (radix-nova style).

@krawma/spinner
Switchdocumented

Switch — extracted 1:1 from WEM-App.

@krawma/switch
Tabledocumented

Table — extracted 1:1 from WEM-App.

@krawma/table
Tabsdocumented

Tabs — extracted 1:1 from WEM-App.

@krawma/tabs
Textareadocumented

Textarea — extracted 1:1 from WEM-App.

@krawma/textarea
Toggledocumented

Toggle — from shadcn/ui (radix-nova style).

@krawma/toggle
Toggle Groupdocumented

Toggle Group — from shadcn/ui (radix-nova style).

@krawma/toggle-group
Tooltipdocumented

Tooltip — extracted 1:1 from WEM-App.

@krawma/tooltip