Getting Started

Prerequisites

Kosmesis expects a create-praxisjs-scaffolded project (the minimal, full, or router template all work) using Vite. If you don't have one yet:

npm create praxisjs@latest my-app
cd my-app

Setup

Run `init`

From the root of your PraxisJS project:

npx kosmesis init

This will:

Write a components.json config file.
Add @import "tailwindcss"; plus Kosmesis's theme tokens (--background, --foreground, --primary, ...) to your global stylesheet.
Wire the @tailwindcss/vite plugin into your vite.config.ts.
Create src/lib/utils.ts exporting a cn() helper (clsx + tailwind-merge).

Add a component

npx kosmesis add button

pnpm dlx kosmesis add button

yarn dlx kosmesis add button

bunx kosmesis add button

This copies button.tsx into src/components/ui/button.tsx. If the component wraps a Morphos primitive, its package (e.g. @morphos/inputs) is added to your package.json automatically — run your package manager's install afterwards to fetch it.

Use it

import { Button } from "@/components/ui/button";

@Component()
class MyPage extends StatefulComponent {
  render() {
    return <Button variant="outline">Click me</Button>;
  }
}

@/components/ui/... assumes a @/* → ./src/* path alias in tsconfig.json. Add one if your create-praxisjs template doesn't already have it, or adjust the aliases in components.json to use relative imports instead.

Updating a component

There's no update command — because there's no dependency to update. If a newer version of a component ships better defaults, re-run kosmesis add <component> and diff the result before overwriting your local copy (or just apply the change by hand).