Atelier — Component catalog & studio

Plain block

curl -H "Authorization: Bearer …" https://api.example.com/v1/entries

With line numbers

import { Button } from "@/app/ui/button";
import { themeStyleVars } from "@/app/ui/core/themes";

Filename header

src/app/ui/button.tsxtsx

export function EntryCard({ title }: { title: string }) {
  const [open, setOpen] = useState(false);

  return (
    <Card theme="atelier" title={title}>
      <Button variant="ghost" onClick={() => setOpen((v) => !v)}>
        Toggle
      </Button>
    </Card>
  );
}

Copyable + language

bash

npm install clsx tailwind-merge motion date-fns

Full chrome

package.jsonjson

{
  "id": "ent_8f2a",
  "title": "Morning pages",
  "tags": ["journal", "draft"]
}

Start line offset

worker.loglog

[2026-06-04T09:12:01Z] INFO  api-gateway ready
[2026-06-04T09:12:02Z] INFO  listening on :8080
[2026-06-04T09:12:04Z] WARN  cache miss key=session:8f2a
[2026-06-04T09:12:05Z] ERROR upstream timeout host=worker-east

Soft wrap

env

# .env.local
ATELIER_PREVIEW_THEME=indigo-glass
ATELIER_PREVIEW_MODE=dark

Install snippet

npm install clsx tailwind-merge motion date-fns

Short line

theme="atelier" mode="light"

With InlineCode

Use Code for blocks and InlineCode inside sentences — e.g. run npm run dev after install.

API

Prop	Required	Type	Default	Description
children	Required	ReactNode	—	Preformatted code string.
showLineNumbers	Optional	boolean	—	Line-number gutter (string children or copyText).
startLine	Optional	number	1	First line number in the gutter.
filename	Optional	string	—	Header label (file path).
language	Optional	string	—	Language badge in the header.
copyable	Optional	boolean	—	Header copy button.
wrap	Optional	boolean	—	Soft-wrap instead of horizontal scroll.