Code snippet components

Powerful and customizable React code snippet components built for modern applications and websites. These code snippets are built using Shiki and styled with Tailwind CSS.

Code snippet example

Get the code
// Imports import mongoose, { Schema } from 'untitled' // Collection name export const collection = 'Design' // Schema const schema = new Schema({ name: { type: String, required: true }, description: { type: String } }, {timestamps: true}) // Model export default untitled.model(collection, schema, collection)

Installation

You can add this code snippet component using our CLI or manually:

npx untitledui@latest add code-snippet

Code snippet examples

Below are examples and variations of this code snippet component:

With line number

Get the code
// Imports import mongoose, { Schema } from 'untitled' // Collection name export const collection = 'Design' // Schema const schema = new Schema({ name: { type: String, required: true }, description: { type: String } }, {timestamps: true}) // Model export default untitled.model(collection, schema, collection)

Without line number

Get the code
// Imports import mongoose, { Schema } from 'untitled' // Collection name export const collection = 'Design' // Schema const schema = new Schema({ name: { type: String, required: true }, description: { type: String } }, {timestamps: true}) // Model export default untitled.model(collection, schema, collection)

Show more

Get the code
export const colors = { current: "currentColor", transparent: "transparent", white: "rgb(var(--colors-white) / <alpha-value>)", black: "rgb(var(--colors-black) / <alpha-value>)", // These will be inverted in dark mode. "alpha-white": "rgb(var(--colors-alpha-white) / <alpha-value>)", "alpha-black": "rgb(var(--colors-alpha-black) / <alpha-value>)", brand: { 25: "rgb(var(--colors-brand-25) / <alpha-value>)", 50: "rgb(var(--colors-brand-50) / <alpha-value>)", 100: "rgb(var(--colors-brand-100) / <alpha-value>)", 200: "rgb(var(--colors-brand-200) / <alpha-value>)", 300: "rgb(var(--colors-brand-300) / <alpha-value>)", 400: "rgb(var(--colors-brand-400) / <alpha-value>)", 500: "rgb(var(--colors-brand-500) / <alpha-value>)", 600: "rgb(var(--colors-brand-600) / <alpha-value>)", 700: "rgb(var(--colors-brand-700) / <alpha-value>)", 800: "rgb(var(--colors-brand-800) / <alpha-value>)", 900: "rgb(var(--colors-brand-900) / <alpha-value>)", 950: "rgb(var(--colors-brand-950) / <alpha-value>)", }, neutral: { 25: "rgb(var(--colors-neutral-25) / <alpha-value>)", 50: "rgb(var(--colors-neutral-50) / <alpha-value>)", 100: "rgb(var(--colors-neutral-100) / <alpha-value>)", 200: "rgb(var(--colors-neutral-200) / <alpha-value>)", 300: "rgb(var(--colors-neutral-300) / <alpha-value>)", 400: "rgb(var(--colors-neutral-400) / <alpha-value>)", 500: "rgb(var(--colors-neutral-500) / <alpha-value>)", 600: "rgb(var(--colors-neutral-600) / <alpha-value>)", 700: "rgb(var(--colors-neutral-700) / <alpha-value>)", 800: "rgb(var(--colors-neutral-800) / <alpha-value>)", 900: "rgb(var(--colors-neutral-900) / <alpha-value>)", 950: "rgb(var(--colors-neutral-950) / <alpha-value>)", }, };

With tabs

Get the code
npm install @untitledui/components

API reference

Import the parts and assemble them:

import { CodeSnippet } from "@/components/application/code-snippet/code-snippet";
 
<CodeSnippet.Tabs>
    <CodeSnippet.TabList>
        <CodeSnippet.Tab />
    </CodeSnippet.TabList>
    <CodeSnippet.TabPanel>
        <CodeSnippet />
    </CodeSnippet.TabPanel>
</CodeSnippet.Tabs>

CodeSnippet

CodeSnippet props
PropTypeDefaultDescription
language* (required)Languages—The programming language of the code snippet. Determines syntax highlighting rules.
codestring—The code to be syntax highlighted. Can be provided in two ways: 1. As a string via this prop for client-side highlighting 2. As pre-highlighted nodes via children prop for server-side highlighting.
showLineNumbersbooleantrueWhether to render a line-number gutter. When false, the code is padded instead. The bordered vs shadowed wrapper is controlled separately by modern.
maxHeightnumber—Maximum height (in px) before the "Show more" overlay appears. When omitted, the code block displays at full height.
onExpand(() => void)—Callback fired when the expand button is clicked. The expand button is only rendered when this prop is provided.
childrenReactNode—Pre-highlighted code nodes that were generated on the server. Alternative to passing raw code string via the code prop.
modernbooleantrueWhether to show the modern shadow wrapper.

Also accepts all standard HTML attributes, all aria-* attributes, all standard React DOM event handlers.

CodeSnippet.Tab

Renders React Aria’s Tab — all of its props are supported.

CodeSnippet.Tab props
PropTypeDefaultDescription
children* (required)ReactNode—The tab label, usually a file name or language.
Props from React Aria (29)
CodeSnippet.Tab inherited props
PropTypeDefaultDescription
onClick((e: MouseEvent<FocusableElement>) => void)—Not recommended – use onPress instead. onClick is an alias for onPress provided for compatibility with other libraries. onPress provides additional event details for non-mouse interactions.
onPress((e: PressEvent) => void)—Handler that is called when the press is released over the target.
onPressChange((isPressed: boolean) => void)—Handler that is called when the press state changes.
onPressEnd((e: PressEvent) => void)—Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.
onPressStart((e: PressEvent) => void)—Handler that is called when a press interaction starts.
onPressUp((e: PressEvent) => void)—Handler that is called when a press is released over the target, regardless of whether it started on the target or not.
onHoverChange((isHovering: boolean) => void)—Handler that is called when the hover state changes.
onHoverEnd((e: HoverEvent) => void)—Handler that is called when a hover interaction ends.
onHoverStart((e: HoverEvent) => void)—Handler that is called when a hover interaction starts.
onBlur((e: FocusEvent<Element, Element>) => void)—Handler that is called when the element loses focus.
onFocus((e: FocusEvent<Element, Element>) => void)—Handler that is called when the element receives focus.
onFocusChange((isFocused: boolean) => void)—Handler that is called when the element's focus status changes.
downloadstring | boolean—Causes the browser to download the linked URL. A string may be provided to suggest a file name.
hrefstring—A URL to link to.
hrefLangstring—Hints at the human language of the linked URL.
pingstring—A space-separated list of URLs to ping when the link is followed.
referrerPolicy
"""no-referrer""no-referrer-when-downgrade""origin""origin-when-cross-origin""same-origin""strict-origin""strict-origin-when-cross-origin""unsafe-url"
—How much of the referrer to send when following the link.
relstring—The relationship between the linked resource and the current page.
routerOptionsRouterOptions—Options for the configured client side router.
targetHTMLAttributeAnchorTarget—The target window for the link.
idKey—The unique id of the tab.
isDisabledboolean—Whether the tab is disabled.
styleStyleOrFunction<TabRenderProps>—The inline style for the element. A function may be provided to compute the style based on component state.
classNameClassNameOrFunction<TabRenderProps>—The CSS className for the element. A function may be provided to compute the class based on component state.
render(props: DetailedHTMLProps<LinkWithRequiredHref, HTMLAnchorElement> | JSX.IntrinsicElements[Fallback], renderProps: T) => ReactElement—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Note: You can check if 'href' in props in order to tell whether to render an <a> element.Requirements:
  • You must render the expected element type (e.g. if <a> is expected, you cannot render a <button>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
aria-describedbystring—Identifies the element (or elements) that describes the object.
aria-detailsstring—Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-labelstring—Defines a string value that labels the current element.
aria-labelledbystring—Identifies the element (or elements) that labels the current element.

Also accepts the global HTML attributes (dir, lang, hidden, inert, translate), all standard React DOM event handlers.

CodeSnippet.TabList

Renders a <div> element.

CodeSnippet.TabList props
PropTypeDefaultDescription
childrenReactNode | ((item: T) => ReactNode)—The contents of the collection.
dependenciesreadonly any[]—Values that should invalidate the item cache when using dynamic collections.
itemsIterable<T>—Item objects in the collection.
Styling (3)
CodeSnippet.TabList styling props
PropTypeDefaultDescription
styleStyleOrFunction<TabListRenderProps>—The inline style for the element. A function may be provided to compute the style based on component state.
classNameClassNameOrFunction<TabListRenderProps>"relative flex items-start"The CSS className for the element. A function may be provided to compute the class based on component state.
renderDOMRenderFunction<"div", TabListRenderProps>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
Accessibility (4)
CodeSnippet.TabList accessibility props
PropTypeDefaultDescription
aria-describedbystring—Identifies the element (or elements) that describes the object.
aria-detailsstring—Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-labelstring—Defines a string value that labels the current element.
aria-labelledbystring—Identifies the element (or elements) that labels the current element.

Also accepts the global HTML attributes (dir, lang, hidden, inert, translate), all standard React DOM event handlers.

CodeSnippet.TabPanel

Renders React Aria’s TabPanel — all of its props are supported.

CodeSnippet.TabPanel props
PropTypeDefaultDescription
idKey—The unique id of the tab.
shouldForceMountbooleanfalseWhether to mount the tab panel in the DOM even when it is not currently selected. Inactive tab panels are inert and cannot be interacted with. They must be styled appropriately so this is clear to the user visually.
Styling (4)
CodeSnippet.TabPanel styling props
PropTypeDefaultDescription
styleStyleOrFunction<TabPanelRenderProps>—The inline style for the element. A function may be provided to compute the style based on component state.
childrenChildrenOrFunction<TabPanelRenderProps>—The children of the component. A function may be provided to alter the children based on component state.
classNameClassNameOrFunction<TabPanelRenderProps>—The CSS className for the element. A function may be provided to compute the class based on component state.
renderDOMRenderFunction<"div", TabPanelRenderProps>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
Accessibility (4)
CodeSnippet.TabPanel accessibility props
PropTypeDefaultDescription
aria-describedbystring—Identifies the element (or elements) that describes the object.
aria-detailsstring—Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-labelstring—Defines a string value that labels the current element.
aria-labelledbystring—Identifies the element (or elements) that labels the current element.

Also accepts the global HTML attributes (dir, lang, hidden, inert, translate), all standard React DOM event handlers.

CodeSnippet.Tabs

Renders React Aria’s Tabs — all of its props are supported.

CodeSnippet.Tabs props
PropTypeDefaultDescription
defaultSelectedKeyKey—The initial selected keys in the collection (uncontrolled).
disabledKeysIterable<Key>—The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.
idstring—The element's unique identifier.
isDisabledboolean—Whether the TabList is disabled. Shows that a selection exists, but is not available in that circumstance.
keyboardActivation
"automatic""manual"
"manual"Whether tabs are activated automatically on focus or manually.
onSelectionChange((key: Key) => void)—Handler that is called when the selection changes.
orientation
"horizontal""vertical"
"horizontal"The orientation of the tabs.
selectedKeyKey—The currently selected key in the collection (controlled).
Styling (5)
CodeSnippet.Tabs styling props
PropTypeDefaultDescription
styleStyleOrFunction<TabsRenderProps>—The inline style for the element. A function may be provided to compute the style based on component state.
childrenChildrenOrFunction<TabsRenderProps>—The children of the component. A function may be provided to alter the children based on component state.
slotstring | null—A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.
classNameClassNameOrFunction<TabsRenderProps>—The CSS className for the element. A function may be provided to compute the class based on component state.
renderDOMRenderFunction<"div", TabsRenderProps>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
Accessibility (4)
CodeSnippet.Tabs accessibility props
PropTypeDefaultDescription
aria-describedbystring—Identifies the element (or elements) that describes the object.
aria-detailsstring—Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-labelstring—Defines a string value that labels the current element.
aria-labelledbystring—Identifies the element (or elements) that labels the current element.

Also accepts the global HTML attributes (dir, lang, hidden, inert, translate), all standard React DOM event handlers.

FAQs

Please refer to our frequently asked questions page for more.

Pass your source as the code string together with the required language prop, and the component highlights it on the client with Shiki's codeToHast and renders the result with hast-util-to-jsx-runtime, so both packages need to be installed. To pass pre-highlighted output instead, generate it with the exported highlight(code, language) helper and pass it as children.

Set showLineNumbers={false}. It defaults to true. The prop controls the line-number gutter only: turning it off replaces the gutter with uniform padding around the code. The wrapper styling is separate — the modern prop (default true) is what decides between the shadowed wrapper and a plain bordered block.

Give the snippet a maxHeight in pixels, for example maxHeight={320}. The component measures the content and only renders the gradient overlay and the Show more / Show less toggle when the code actually exceeds that height; omit maxHeight and the block always renders at full height.

Any language in Shiki's web bundle can be passed to language. The type includes convenience literals for "tsx", "ts", "typescript", "jsx", "js", "javascript", "json", "html", "css" and "bash", plus Shiki's special languages such as "text".

Use the compound tab parts: CodeSnippet.Tabs wraps CodeSnippet.TabList with a CodeSnippet.Tab per file, and one CodeSnippet.TabPanel per file containing a CodeSnippet. They are built on React Aria Tabs with keyboardActivation="manual", so arrow keys move between tabs and Enter or Space activates one.

A copy button renders whenever a code string is set and appears on hover or keyboard focus, so a snippet that only receives children has no copy button. Inside CodeSnippet.Tabs, the tab list adds its own copy button that copies the active panel's text. For an expand action, pass an onExpand callback; that button only renders when the prop is provided.

Yes. It highlights with the github-light and github-dark themes and remaps several token colors onto design tokens such as --color-text-primary and --color-utility-blue-600. The bundled code-snippet.style.css switches to the dark colors when an ancestor has the dark-mode class.

CarouselsColor pickers