Code snippets — DrumKit

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

modern

maxHeight 160

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

View in a page

Family

family

npm run dev

CodeSnippet

npm

yarn

npm i @untitledui/icons

CodeSnippet.Tabs, CodeSnippet.TabPanel

npm

yarn

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

yarn

bun

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

yarn

bun

npm i @untitledui/icons

tab selected, hover and focus, live: arrow keys move

Loading...

neither code nor children: Loading…