All components
Code Block
Framed code panels with a title header, controls, and scrollable monospace content.
install.sh
npx stylexblocks add table
npm install
npm run dev123456789101112131415161718192021222324252627import { CodeBlock } from "#components/ui/ark-ui/code-block.tsx";
export function Example() { return ( // size resolves once on Root; every part inherits it via context. // Code renders a <pre> and CodeText a <code>; content scrolls // horizontally and caps at --code-block-max-height. <CodeBlock.Root size="md"> <CodeBlock.Header> <CodeBlock.Title>install.sh</CodeBlock.Title> <CodeBlock.Control> <CopyButton /> </CodeBlock.Control> </CodeBlock.Header> <CodeBlock.Content> <CodeBlock.Code> <CodeBlock.CodeText> {"npx stylexblocks add table\nnpm install\nnpm run dev"} </CodeBlock.CodeText> </CodeBlock.Code> </CodeBlock.Content> </CodeBlock.Root> );}
// long snippets can end with an Overlay + Footer ("show more") pairing:// <CodeBlock.Overlay>…</CodeBlock.Overlay> above <CodeBlock.Footer>Sizes
install.sh
npx stylexblocks add table
npm install
npm run devinstall.sh
npx stylexblocks add table
npm install
npm run devinstall.sh
npx stylexblocks add table
npm install
npm run devInstall
1npx stylexblocks add code-blockSource
components/ui/ark-ui/code-block.tsx
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221import * as stylex from "@stylexjs/stylex";import { createSlotRecipeContext } from "#lib/ark-ui/create-slot-recipe-context.tsx";import { defineSlotRecipe } from "#lib/recipe-props.ts";import { colors } from '@stylexblocks/ui/tokens/colors.stylex.ts'import { fontSizes } from '@stylexblocks/ui/tokens/font-sizes.stylex.ts'import { fontWeights } from '@stylexblocks/ui/tokens/font-weights.stylex.ts'import { fonts } from '@stylexblocks/ui/tokens/fonts.stylex.ts'import { lineHeights } from '@stylexblocks/ui/tokens/line-heights.stylex.ts'import { semanticColors } from '@stylexblocks/ui/semantic-tokens/colors.stylex.ts'import { semanticRadii } from '@stylexblocks/ui/semantic-tokens/radii.stylex.ts'import { sizes } from '@stylexblocks/ui/tokens/sizes.stylex.ts'import { spacing } from '@stylexblocks/ui/tokens/spacing.stylex.ts'
const codeBlockRoot = stylex.create({ base: { borderRadius: 'var(--code-block-radius)', overflow: 'hidden', backgroundColor: semanticColors.bg, color: semanticColors.fg, borderWidth: '1px', '--code-block-max-height': '320px', '--code-block-bg': semanticColors.bg, '--code-block-fg': semanticColors.fg, '--code-block-obscured-opacity': '0.5', '--code-block-obscured-blur': '1px', '--code-block-line-number-width': sizes._3, '--code-block-line-number-margin': spacing._4, '--code-block-highlight-bg': `color-mix(in oklch, ${semanticColors.infoFocusRing} 20%, transparent)`, '--code-block-highlight-border': semanticColors.infoFocusRing, '--code-block-highlight-added-bg': `color-mix(in oklch, ${semanticColors.successFocusRing} 20%, transparent)`, '--code-block-highlight-added-border': semanticColors.successFocusRing, '--code-block-highlight-removed-bg': `color-mix(in oklch, ${semanticColors.destructiveFocusRing} 20%, transparent)`, '--code-block-highlight-removed-border': semanticColors.destructiveFocusRing, },})
const codeBlockRootSizes = stylex.create({ sm: { '--code-block-padding': spacing._4, '--code-block-radius': semanticRadii.panelSm, '--code-block-header-height': sizes._8, }, md: { '--code-block-padding': spacing._4, '--code-block-radius': semanticRadii.panelMd, '--code-block-header-height': sizes._10, }, lg: { '--code-block-padding': spacing._5, '--code-block-radius': semanticRadii.panelLg, '--code-block-header-height': sizes._12, },})
const codeBlockHeader = stylex.create({ base: { display: 'flex', alignItems: 'center', gap: spacing._2, position: 'relative', paddingInline: 'var(--code-block-padding)', minHeight: 'var(--code-block-header-height)', marginBottom: 'calc(var(--code-block-padding) / 2 * -1)', },})
const codeBlockTitle = stylex.create({ base: { display: 'inline-flex', alignItems: 'center', gap: spacing._1_5, flex: 1, color: semanticColors.fgMuted, },})
const codeBlockTitleSizes = stylex.create({ sm: { fontSize: fontSizes.xs, lineHeight: lineHeights.xs, }, md: { fontSize: fontSizes.xs, lineHeight: lineHeights.xs, }, lg: { fontSize: fontSizes.sm, lineHeight: lineHeights.sm, },})
const codeBlockControl = stylex.create({ base: { gap: spacing._1_5, display: 'inline-flex', alignItems: 'center', },})
const codeBlockFooter = stylex.create({ base: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: spacing._2, paddingInline: 'var(--code-block-padding)', minHeight: 'var(--code-block-header-height)', },})
const codeBlockContent = stylex.create({ base: { position: 'relative', colorScheme: 'dark', borderBottomRadius: 'var(--code-block-radius)', maxHeight: 'var(--code-block-max-height)', },})
const codeBlockOverlay = stylex.create({ base: { '--bg': `color-mix(in oklch, ${colors.black} 50%, transparent)`, display: 'flex', alignItems: 'flex-end', justifyContent: 'center', padding: spacing._4, bgImage: 'linear-gradient(0deg,var(--bg) 25%,transparent 100%)', color: colors.white, minHeight: '5rem', position: 'absolute', bottom: 0, insetInline: 0, zIndex: 1, fontWeight: fontWeights.medium, },})
const codeBlockCode = stylex.create({ base: { fontFamily: fonts.mono, lineHeight: 1.625, whiteSpace: 'pre', counterReset: 'line 0', overflowX: 'auto', overflowY: 'hidden', },})
const codeBlockCodeSizes = stylex.create({ sm: { fontSize: fontSizes.xs, }, md: { fontSize: fontSizes.sm, }, lg: { fontSize: fontSizes.sm, },})
const codeBlockCodeText = stylex.create({ base: { paddingInline: 'var(--code-block-padding)', paddingBlock: 'var(--code-block-padding)', position: 'relative', display: 'block', width: '100%', },})
export type CodeBlockSize = keyof typeof codeBlockRootSizes
// The code panel renders semantic <pre>/<code>; the preflight does not zero// the UA's <pre> margins, so the component carries its own reset.const codeBlockLocal = stylex.create({ pre: { marginBlock: 0 },});
// defineSlotRecipe validates the shape at compile time: default values must// exist in the axis maps, and slot keys must be `styles` or a declared axisconst codeBlockSlotRecipe = defineSlotRecipe({ slots: { root: { styles: codeBlockRoot, sizes: codeBlockRootSizes }, header: { styles: codeBlockHeader }, title: { styles: codeBlockTitle, sizes: codeBlockTitleSizes }, control: { styles: codeBlockControl }, content: { styles: codeBlockContent }, overlay: { styles: codeBlockOverlay }, code: { styles: codeBlockCode, sizes: codeBlockCodeSizes }, codeText: { styles: codeBlockCodeText }, footer: { styles: codeBlockFooter }, }, defaultVariants: { size: "md" },});
/** * CodeBlock — recipe and component colocated in one file. `<CodeBlock.Root * size>` resolves the recipe once and every part inherits it through * context; each part composes via `asChild`. Header holds the title plus * controls (copy button etc.); Content > Code (<pre>) > CodeText (<code>) * scrolls horizontally, and Overlay dims obscured content above the footer. */const { withProvider, withContext } = createSlotRecipeContext(codeBlockSlotRecipe);
export const CodeBlock = { Root: withProvider("div", "root", "CodeBlockRoot"), Header: withContext("div", "header", "CodeBlockHeader"), Title: withContext("div", "title", "CodeBlockTitle"), Control: withContext("div", "control", "CodeBlockControl"), Content: withContext("div", "content", "CodeBlockContent"), Overlay: withContext("div", "overlay", "CodeBlockOverlay"), Code: withContext( "pre", (v) => [codeBlockCode.base, codeBlockCodeSizes[v.size], codeBlockLocal.pre], "CodeBlockCode", ), CodeText: withContext("code", "codeText", "CodeBlockCodeText"), Footer: withContext("div", "footer", "CodeBlockFooter"),};