Kosmesis

Welcome! Kosmesis (κόσμησις, Greek: adornment, ornamentation) is a collection of copy-paste UI components for PraxisJS, in the same spirit as shadcn/ui. If you've used shadcn/ui before, you'll feel right at home — same idea, rebuilt for PraxisJS and built on top of Morphos instead of Radix UI / Base UI.

You don't install a dependency. You own the code.

Running kosmesis add button copies button.tsx straight into src/components/ui/button.tsx in your own repository — no package to add, no version to track, no props API to negotiate with. Every component ships fully styled and accessible, in whichever of two independent style systems you chose during kosmesis init: Tailwind CSS or @praxisjs/css.

New here? Start with the guide below — it walks through installing the CLI, understanding how Kosmesis relates to Morphos, and adding your first component.

Introduction

What Kosmesis is, and the philosophy behind it.

Getting Started

Install the CLI and add your first component in minutes.

Theming

How design tokens work in both style systems, and switching themes at runtime.

Components

Browse every available component.

Browse components

Components · 65

Everything from Button and Dialog to Data Table and Chart, in both style systems.

Design philosophy

Copy-paste, not installed — kosmesis add writes source files into your project. There's no @kosmesis/* runtime package, so there's nothing to keep in sync with a future release.
Two style systems, chosen once — Tailwind CSS + class-variance-authority, or @praxisjs/css (typed CSS-in-TS via the PraxisJS decorator model). Picked once in kosmesis init, never mixed within a project.
Presentation over Morphos's behavior — every interactive component wraps the matching Morphos primitive, reusing its keyboard navigation, ARIA roles, and data-* state exposure rather than reimplementing any of it.
You can change anything — variants, tokens, and markup all live in the file that was copied into your project. Editing it is the intended workflow, not an escape hatch.

Not sure where to start? Getting Started has a full working example, including the compound-component pattern (dialog={this.dialog}-style props) every overlay and grouped-input component inherits directly from Morphos.

Full component list

Inputs — wrapping `@morphos/inputs`

Component	Description
`Button`	Polymorphic button with shadcn-style variants
`Input`	Single-line text input
`NumberField`	Decrement/input/increment stepper
`Checkbox`	Checkbox with indeterminate support
`Switch`	Toggle switch
`RadioGroup`	Radio group with keyboard navigation
`Select`	Custom listbox select with keyboard support
`Toggle`	Two-state toggle button
`ToggleGroup`	Single- or multiple-selection toggle group
`Slider`	Range slider
`Field`	Form field wrapper with label, description, and error message
`InputOTP`	One-time password input
`Combobox`	Searchable select with text filtering

Overlays — wrapping `@morphos/overlays`

Component	Description
`Tooltip`	Hover/focus-activated tooltip
`Popover`	Click-toggled floating panel
`Dialog`	Modal dialog with focus trap and scroll lock
`AlertDialog`	Confirmation dialog for destructive/important actions
`DropdownMenu`	Menu with full keyboard navigation
`ContextMenu`	Right-click context menu
`HoverCard`	Hover-activated preview card
`Drawer`	Side panel sliding in from any edge
`DatePicker`	Popover + Calendar composition for picking a single date
`Command`	cmdk-style, always-filtered command list

Layout — wrapping `@morphos/layout`

Component	Description
`Separator`	Horizontal or vertical divider
`Tabs`	Tab panel with keyboard navigation
`Accordion`	Collapsible item list, single or multiple open at once
`Collapsible`	Single expand/collapse toggle
`NavigationMenu`	Site navigation with submenus
`Menubar`	Horizontal menu bar with dropdown menus
`ScrollArea`	Custom-styled scroll container with a proportional thumb
`Sidebar`	Collapsible application sidebar, composing a mobile sheet and a desktop rail

Feedback — wrapping `@morphos/feedback`

Component	Description
`Avatar`	Image with automatic fallback on load failure
`Alert`	Static inline notification
`Progress`	Progress bar with an indeterminate mode
`Spinner`	Loading indicator
`Sonner`	Auto-dismissing notification queue with a global `toast()` helper

Presentational — no Morphos primitive

Radix UI / Base UI don't cover these either — shadcn/ui builds them from scratch, and so does Kosmesis:

Component	Description
`Badge`	Small status/label pill
`Skeleton`	Pulsing placeholder for loading content
`Card`	Bordered content container with Header/Title/Description/Content/Footer parts
`AspectRatio`	Constrains content to a fixed width/height ratio
`Label`	Accessible label, typically paired with `Field`
`Textarea`	Multi-line text input
`Table`	Responsive table with Header/Body/Footer/Row/Head/Cell/Caption parts
`Typography`	Prose text primitives (headings, lead, muted, inline code, blockquote)
`Kbd`	Represents a keyboard key or shortcut
`NativeSelect`	Plain, styled native `<select>`
`ButtonGroup`	Visually groups adjacent buttons into one control
`InputGroup`	Pairs an Input with leading/trailing addons
`Item`	Generic list-row layout with media/content/actions slots
`Empty`	Blank/empty-state layout with header, media, title, description slots
`Marker`	Small positional dot/pin
`Direction`	Sets ambient text direction (ltr/rtl) via the native `dir` attribute
`Sheet`	Side panel sliding in from any edge — a thin re-export of `Drawer`
`Toast`	Classic toast API — a thin re-export of `Sonner`
`Calendar`	Month-grid date picker with real date math
`DataTable`	Sortable, paginated table composing `Table`, no external table library
`Carousel`	Scroll-snap-based slideshow, no Embla dependency
`Chart`	Lightweight SVG bar/line chart, no Recharts dependency
`Pagination`	Page navigation links, composing `Button`'s variants
`Resizable`	Drag-resizable panel group using native pointer events
`Breadcrumb`	Breadcrumb trail with separators and an ellipsis
`Attachment`	File/media attachment chip, typically used inside `Message`
`Bubble`	Single chat message bubble
`Message`	Composes `Bubble` with an optional avatar and role-based layout
`MessageScroller`	Scrollable chat viewport with an imperative `scrollToBottom()`

Getting help

Every component page states which Morphos primitive backs it (or whether it's built from scratch), and the source itself is a single file — open it and read it.
See a bug or want a feature? Open an issue on GitHub.
Check the changelog for what's new in each release.