Installation.

Add the Layout Kit registry to the components.json of any project that already runs shadcn. The namespace lets the CLI resolve items and their dependencies from this site.

{
  "registries": {
    "@layout-kit": "https://layout.csikie.com/r/{name}.json"
  }
}

Install everything with the layout bundle, or pick individual items. The CLI copies the source into your ui and lib folders and rewrites imports to your aliases.

# Everything: Stack, Row, Col, Grid, GridItem, Page
npx shadcn@latest add @layout-kit/layout

# Or only what you need
npx shadcn@latest add @layout-kit/page @layout-kit/grid

Import from the files the CLI created and place shadcn components inside them. Tailwind picks the classes up from your own source tree, so there is nothing else to configure.

import { Row } from "@/components/ui/row";
import { Stack } from "@/components/ui/stack";
import { Button } from "@/components/ui/button";

export default function Page() {
  return (
    <Stack gap={6}>
      <h1 className="text-2xl font-semibold tracking-tight">Your next idea</h1>
      <Row gap={2} wrap>
        <Button>Get started</Button>
        <Button variant="outline">Learn more</Button>
      </Row>
    </Stack>
  );
}

Every item is published from this site. The raw JSON for each one lives at the URL pattern configured above.

• An existing shadcn setup with a components.json and a cn helper in your utils alias.
• Tailwind CSS 4. The primitives are plain utility classes and need no plugin or preset.
• React 19.3 or compatible. The primitives use the React 19 ref-as-prop model.