Code snippets

Text a reader copies exactly: one shiki-highlighted block with copy, expand, line numbers, and collapse, plus a tabbed form. Three sheet types, no size axis.

Demo

hero
import { Button } from "@/components/base/buttons/button"; export const SaveBar = ({ onSave }: { onSave: () => void }) => ( <div className="flex justify-end gap-3"> <Button color="secondary" size="sm"> Cancel </Button> <Button size="sm" onClick={onSave}> Save changes </Button> </div> );
type
language
import { CodeSnippet } from "@/components/application/code-snippet/code-snippet"; const code = `import { Button } from "@/components/base/buttons/button"; export const SaveBar = ({ onSave }: { onSave: () => void }) => ( <div className="flex justify-end gap-3"> <Button color="secondary" size="sm"> Cancel </Button> <Button size="sm" onClick={onSave}> Save changes </Button> </div> );`; <CodeSnippet code={code} language="tsx" />

In context

in-context

Family

family
npm run dev
CodeSnippet
npm i @untitledui/icons
CodeSnippet.Tabs, CodeSnippet.TabPanel
CodeSnippet.TabList, CodeSnippet.Tab
highlight

Types

cells

The sheet’s three

import { Button } from "@/components/base/buttons/button"; export const SaveBar = ({ onSave }: { onSave: () => void }) => ( <div className="flex justify-end gap-3"> <Button color="secondary" size="sm"> Cancel </Button> <Button size="sm" onClick={onSave}> Save changes </Button> </div> );
horizontal: showLineNumbers, the default
whsec_4f8a2c91e7b34d6f0a1c5e2d9b7f3a6e
vertical: showLineNumbers false, the modern tray
npm i @untitledui/icons
vertical with tabs: CodeSnippet.Tabs, one panel each

Off the sheet

npm i @untitledui/icons npx untitledui add code-snippet npm run dev
showLineNumbers with modern: the gutter in the tray
npm i @untitledui/icons npx untitledui add code-snippet npm run dev
neither: no gutter, the plain block

Content

cells

Languages

import { Button } from "@/components/base/buttons/button"; export const SaveBar = ({ onSave }: { onSave: () => void }) => ( <div className="flex justify-end gap-3"> <Button color="secondary" size="sm"> Cancel </Button> <Button size="sm" onClick={onSave}> Save changes </Button> </div> );
language tsx
npm i @untitledui/icons npx untitledui add code-snippet npm run dev
language bash
{ "name": "drumkit", "private": true, "scripts": { "dev": "next dev", "build": "next build", "test": "vitest run" } }
language json
.line-numbers .shiki code .line::before { content: counter(step); counter-increment: step; width: 49px; margin-inline-end: 20px; text-align: end; }
language css

Behaviour

cells
import { headers } from "next/headers"; import { NextResponse } from "next/server"; import { verifySignature } from "@/lib/webhooks"; export async function POST(request: Request) { const signature = (await headers()).get("x-signature") ?? ""; const body = await request.text(); if (!verifySignature(body, signature, process.env.WEBHOOK_SECRET)) { return NextResponse.json({ error: "Bad signature" }, { status: 401 }); } const event = JSON.parse(body) as { type: string; data: unknown }; switch (event.type) { case "invoice.paid": await markInvoicePaid(event.data); break; case "customer.deleted": await removeCustomer(event.data); break; } return NextResponse.json({ received: true }); }
maxHeight 160 over a 25-line handler: Show more
curl -X POST "https://api.example.com/v1/webhooks/subscriptions?workspace=marketing-site&environment=production&include=deliveries,failures" -H "Content-Type: application/json"
a long line scrolls sideways under the buttons
npm i @untitledui/icons npx untitledui add code-snippet npm run dev
maxHeight 160 over three lines: nothing collapses
{ "name": "drumkit", "private": true, "scripts": { "dev": "next dev", "build": "next build", "test": "vitest run" } }
onExpand given: Expand before Copy

States

cells
npm i @untitledui/icons npx untitledui add code-snippet npm run dev
copied, live: press Copy, the glyph turns Check
npm i @untitledui/icons
tab selected, hover and focus, live: arrow keys move

Loading...

neither code nor children: Loading…