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 · Checkbox · Switch · Toggle · Toggle Group · Radio Group · Select · Native Select · Slider · Input · Input Group · Number Field · Input OTP · Textarea · Label · Combobox · Date Picker · Calendar · Field
Dialog · Alert Dialog · Drawer · Sheet · Popover · Tooltip · Hover Card · Dropdown Menu · Context Menu · Command
Accordion · Tabs · Collapsible · Separator · Scroll Area · Navigation Menu · Menubar · Sidebar · Breadcrumb · Aspect Ratio · Resizable · Direction
Alert · Toast · Sonner · Progress · Spinner · Skeleton · Avatar · Badge · Card · Table · Data Table · Typography · Kbd · Empty · Item · Marker · Chart · Carousel · Pagination · Message · Message Scroller · Bubble · Attachment