Documentation Copy-paste UI components for PraxisJS, built on top of Morphos.
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.
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.
Every component page states which Morphos primitive backs it (or whether it's purely presentational), grouped here the same way as the sidebar :
Component Description ButtonA button, wrapping Morphos's polymorphic Button primitive with variant/size styling. Button GroupVisually groups adjacent buttons into one control. ToggleA two-state toggle button, wrapping Morphos's Toggle primitive. Toggle GroupSingle- or multiple-selection toggle group, wrapping Morphos's ToggleGroup primitive. Action BarA floating contextual toolbar (bulk-selection actions, ...).
Component Description AttachmentA file/media attachment chip, typically used inside Message. BubbleA single chat message bubble. MessageComposes Bubble with an optional avatar, role-based layout, and an optional trailing actions row, for chat UIs. Message ScrollerA scrollable chat viewport with an imperative scrollToBottom() that auto-scrolls on mount and surfaces a ScrollButton when scrolled away from the bottom. Pairs with Message. Scroll ButtonA floating scroll-to-bottom button, meant to pair with MessageScroller.
Component Description AvatarAn image with automatic fallback, wrapping Morphos's Avatar/AvatarImage/AvatarFallback. BadgeA small status/label pill. CardA bordered content container with Header, Title, Description, Action, Content, and Footer parts. ChartA lightweight SVG bar/line chart with a ChartConfig CSS-variable convention for per-series colors. No Recharts dependency. Data TableA sortable, paginated data table composing Table with a lightweight table-model helper (no external table library). Gantt ChartA customizable, animated project timeline with draggable/resizable task bars, day/week/month views, dependency connectors, and milestones. EmptyA blank/empty-state layout with header, media, title, description, and content slots. ItemA generic list-row layout primitive with media/content/actions slots. KbdRepresents a keyboard key or shortcut. TableA responsive table with Header/Body/Footer/Row/Head/Cell/Caption parts. TypographyProse text primitives (headings, lead, muted, inline code, blockquote). Code BlockA plain code display with a copy button. TimelineA vertical list of dated events with a connecting rail. StepsA numbered step indicator with a connecting rail between steps. QR CodeRenders a QR code as a single SVG path, using the qrcode package's synchronous encoder. Radio CardA card-shaped radio option, wrapping Morphos's RadioGroup + Radio. Progress CircleA circular progress ring with an indeterminate mode. RatingAn interactive star-rating control. GridA responsive grid layout primitive with a colSpan/rowSpan item. Bento GridA card-styled grid for irregularly-sized tiles. PresenceAn overlapping avatar stack with a +N overflow badge and an online/away/offline status dot. Tree ViewA recursive expand/collapse/select tree.
Component Description CalendarA month-grid date picker with real date math. Date PickerA Popover + Calendar composition for picking a single date.
Component Description AlertA static inline notification with Title/Description parts, wrapping Morphos's Alert primitive. ProgressA progress bar with an indeterminate mode, wrapping Morphos's Progress primitive. SkeletonA pulsing placeholder for loading content. SonnerAn auto-dismissing notification queue with a global toast() helper, wrapping Morphos's ToastProvider. SpinnerA loading indicator, wrapping Morphos's Spinner primitive.
Component Description CheckboxA checkbox with indeterminate support, wrapping Morphos's Checkbox primitive. Color PickerA Popover + hue/alpha/saturation-value composition for picking a color. ComboboxA searchable select with text filtering, wrapping Morphos's Combobox primitive. FieldA form field wrapper with label, description, and error message, wrapping Morphos's Field/Fieldset. InputA single-line text input, wrapping Morphos's Input primitive. Input GroupPairs an Input with leading/trailing addons. Input OTPA one-time password input, wrapping Morphos's OtpField primitive. LabelAn accessible label, typically paired with Morphos's Field. Native SelectA plain, styled native <select>. Number FieldA decrement/input/increment stepper, wrapping Morphos's NumberField primitive. Radio GroupA radio group with keyboard navigation, wrapping Morphos's RadioGroup + Radio. SelectA custom listbox select with keyboard support, wrapping Morphos's Select primitive. SliderA range slider, wrapping Morphos's Slider primitive. SwitchA toggle switch, wrapping Morphos's Switch primitive. TextareaA multi-line text input. Tags InputA free-text chip input — type + Enter/comma to add, Backspace to remove the last. Phone InputA dial-code select paired with a plain tel input. Masked InputA pattern-formatted text input — phone numbers, dates, credit cards, and the like.
Component Description Aspect RatioConstrains content to a fixed width/height ratio. CarouselA scroll-snap-based slideshow. ReelA full-height, story-style video/image viewer with segmented progress bars. Video PlayerA native HTML5 video player with a custom control bar. DirectionSets the ambient text direction (ltr/rtl) via the native dir attribute. MarkerA small positional dot/pin, e.g. to annotate a chart point or status. ResizableDrag-resizable panel group using native pointer events. Scroll AreaA custom-styled scroll container, composing Morphos's ScrollArea + Viewport + Scrollbar + Thumb. SeparatorA horizontal or vertical divider, wrapping Morphos's Separator primitive. SidebarA collapsible application sidebar composing a mobile sheet and a desktop rail.
Component Description BreadcrumbA breadcrumb trail with separators and an ellipsis. CommandA cmdk-style, always-filtered command list, with a CommandDialog composition over Morphos's Dialog. MenubarA horizontal menu bar with dropdown menus, wrapping Morphos's Menubar primitive. Navigation MenuSite navigation with submenus, wrapping Morphos's NavigationMenu primitive. PaginationPage navigation links, composing Button's variants. TabsA tab panel with keyboard navigation, wrapping Morphos's Tabs primitive. ScrollspyHighlights the nav link for whichever section is in view, using IntersectionObserver.
Component Description AccordionA collapsible item list, single or multiple open at once, wrapping Morphos's Accordion primitive. Alert DialogA confirmation dialog for destructive/important actions, wrapping Morphos's AlertDialog primitive. CollapsibleA single expand/collapse toggle, wrapping Morphos's Disclosure primitive. Context MenuA right-click context menu, wrapping Morphos's ContextMenu primitive. DialogA modal dialog with focus trap and scroll lock, wrapping Morphos's Dialog primitive. DrawerA side panel sliding in from any edge, wrapping Morphos's Drawer primitive. Dropdown MenuA menu with full keyboard navigation, wrapping Morphos's Dropdown primitive. Hover CardA hover-activated preview card, wrapping Morphos's PreviewCard primitive. PopoverA click-toggled floating panel, wrapping Morphos's Popover primitive. TooltipA hover/focus-activated tooltip, wrapping Morphos's Tooltip primitive. Morphing DialogA dialog that animates from its trigger's exact position/size to a centered modal.
Component Description SortableA pointer-driven drag-to-reorder list. Drag ItemsFree-form draggable positioning within a bounded container. KanbanA drag-across-columns board. Onboarding TourA spotlight product tour anchored to CSS selectors. DockA macOS-style magnifying dock, driven by pointer-distance DOM queries.
Component Description MotionAn animate-on-mount / animate-on-scroll-into-view wrapper with 28 built-in effect presets (fade, slide, zoom, flip, rotate, skew, blur, bounce, elastic, ...). Text AnimationA per-word/per-character/per-line staggered text reveal with 29 built-in effect presets (fade, slide, zoom, flip, rotate, skew, blur, bounce, elastic, wave, ...). MarqueeA seamless infinite-scroll content ticker. Video MaskingA video revealed only inside a circle following the pointer. Sticky ScrollA two-column scroll-linked reveal with a sticky synced panel. Mouse TrailA canvas particle trail following the pointer within its bounding box. PointerA custom cursor that tracks 1:1 within a bounded PointerArea. Smooth CursorA viewport-global custom cursor that eases toward the pointer. Progressive BlurA stacked-layer approximation of an iOS-style progressive blur edge. BeamAn animated beam connecting two elements by ref. ShimmerA pure-CSS shimmer sweep for text, built on currentColor and background-clip: text. Animated ListA list whose items fade/slide in with a per-item stagger delay. LensA magnifying-glass image zoom that follows the pointer. ComparisonA slider-based component for comparing two items in an overlay.
Component Description Chain of ThoughtA collapsible list of an AI response's named reasoning steps. ReasoningA collapsible block for an AI response's raw reasoning/thinking text. SourceA collapsible list of citation links backing an AI response. AI StepsA plain status list for an agent's task execution. Prompt InputA chat composer — auto-resizing textarea + submit button + a toolbar slot. Prompt SuggestionA row of clickable suggestion chips for a PromptInput. TaskA single collapsible agent task card with a live status pill. BranchNavigable alternate responses (regenerations) for one AI turn. Tool CallA collapsible tool/function call an agent made, with its input/output as children. ActionsA row of small icon action buttons under an AI response. Web PreviewA link-preview card for a web page an AI response references. AI ImageAn image the AI generated or referenced, with a fade-in once loaded. Inline CitationA small superscript citation marker.
Component Description Credit CardA visual credit card face with multiple color variants and a flippable front/back. Pricing TableA responsive row of pricing plan cards with a features list. Payment Method SelectorA radio-driven list of payment method rows, wrapping Morphos's RadioGroup + Radio. Order SummaryA line-item + total breakdown card. Invoice CardA single invoice summary row. Plan CardA single subscription/account plan card. Payment StatusA payment-state badge with a colored dot.
Component Description ReceiptA purchase receipt, either a thermal-paper printout or a modern card. TicketAn event/boarding ticket, either a paper stub or a modern boarding-pass card.
Component Description Product CardA product tile with image, name, and price. CartA divided list of CartItems. Cart ItemA single cart row with a quantity stepper. Stock BadgeA product stock-level badge. Promo Code InputA coupon-code input + apply button. Review SummaryAn average-rating + star-count breakdown. Product GalleryA main-image + thumbnail-strip product gallery. Shipping EstimatorA postal-code form for a shipping estimate.
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.
