Getting started

1. Prerequisites

A React project with Tailwind CSS v4 and coss UI installed. If you are starting fresh:

pnpm dlx shadcn@latest init @coss/style

2. Register the namespace

Add Cosskit to the registries field in your components.json:

{
  "registries": {
    "@cosskit": "https://cosskit.dev/r/{name}.json"
  }
}

3. Add a block

pnpm dlx shadcn@latest add @cosskit/app-shell-inset

The CLI copies the block source into your project and installs any coss primitives it depends on. The code is yours — edit it freely.

You can skip namespace registration by installing from the URL directly:

pnpm dlx shadcn@latest add https://cosskit.dev/r/app-shell-inset.json