Components you
own, built on Morphos.
Kosmesis is the shadcn/ui equivalent for PraxisJS. Copy-paste component source, styled variants reacting to Morphos's data-* state.
Own your components
kosmesis add button copies real source into src/components/ui — not an npm dependency. You read it, own it, and change whatever you want.
Behavior from Morphos
Every interactive component wraps a headless Morphos primitive: keyboard navigation, ARIA, focus management, and data-* state — done for you.
Presentation is yours
Tailwind CSS v4 utility classes react to Morphos's data-* attributes directly, e.g. data-[state=open]:animate-in. No CSS-in-JS, no theme provider required.
One command to configure
Run kosmesis init inside a create-praxisjs project. It writes components.json, wires up Tailwind v4, and adds the cn() helper.
npx kosmesis initAdd components one at a time
Each component is a small set of files copied straight into your project, with its Morphos dependency declared for you.
npx kosmesis add button dialogEdit the source directly
The component now lives in your repo. Change variants, swap classes, or rip out parts you don't need.
src/components/ui/button.tsxButton · Button Group · Toggle · Toggle Group · Action Bar · Checkbox · Switch · Radio Group · Select · Native Select · Slider · Input · Input Group · Number Field · Input OTP · Textarea · Label · Combobox · Color Picker · Tags Input · Phone Input · Masked Input · Field
Dialog · Alert Dialog · Drawer · Morphing Dialog · Popover · Tooltip · Hover Card · Dropdown Menu · Context Menu · Accordion · Collapsible · Date Picker · Calendar
Aspect Ratio · Carousel · Reel · Video Player · Direction · Marker · Resizable · Scroll Area · Separator · Sidebar · Breadcrumb · Command · Menubar · Navigation Menu · Pagination · Tabs · Scrollspy
Alert · Sonner · Progress · Spinner · Skeleton · Avatar · Badge · Card · Table · Data Table · Typography · Kbd · Empty · Item · Chart · Gantt Chart · Code Block · Timeline · Steps · QR Code · Radio Card · Progress Circle · Rating · Grid · Bento Grid · Presence · Tree View · Message · Message Scroller · Bubble · Attachment · Scroll Button
Sortable · Drag Items · Kanban · Onboarding Tour · Dock
Motion · Text Animation · Marquee · Video Masking · Sticky Scroll · Mouse Trail · Pointer · Smooth Cursor · Progressive Blur · Beam · Shimmer · Animated List · Lens · Comparison
Chain of Thought · Reasoning · Source · AI Steps · Prompt Input · Prompt Suggestion · Task · Branch · Tool Call · Actions · Web Preview · AI Image · Inline Citation
Credit Card · Pricing Table · Payment Method Selector · Order Summary · Invoice Card · Plan Card · Payment Status · Receipt · Ticket · Product Card · Cart · Cart Item · Stock Badge · Promo Code Input · Review Summary · Product Gallery · Shipping Estimator