Design system

Code

One line to copy, or a block to read. Both monospace, neither decorated.

Snippet

For a single line someone will copy.

Why

The 48px right well is reserved space, not padding — the text sits clear of the button permanently, so nothing reflows when the glyph swaps to a tick. The tick is the only feedback a copy has; the clipboard gives nothing back.

npm install
npx drizzle-kit generate

Code block

For longer code, with the filename in the header.

Why

A 48px bar carries the filename so the pre stays clean, which is what keeps long lines readable.

lib/workspace.ts
export const requireWorkspace = cache(async (slug: string) => {
  if (isReservedSlug(slug)) notFound();
  const session = await auth.api.getSession({ headers });
  if (!session) redirect(`/login?next=${encodeURIComponent(`/${slug}`)}`);
  return { session, organization };
});