All components
Code
Inline code marks with palette-aware solid, subtle, surface, and outline styles.
stylex.create()12345678910111213141516import { Code } from "#components/ui/base-ui/code.tsx";
export function Example() { return ( <> {/* variant + size props resolve through the StyleX recipe and are exposed as data-variant / data-size attributes */} <Code variant="surface" size="md">npx stylexblocks add hero-01</Code>
{/* composition: the render prop replaces the underlying element */} <Code variant="outline" render={<a href="/docs/cli" />}> stylexblocks --help </Code> </> );}Variants
stylex.create()solidstylex.create()subtlestylex.create()surfacestylex.create()outlinestylex.create()plainSizes
stylex.create()xsstylex.create()smstylex.create()mdstylex.create()lgInstall
1npx stylexblocks add codeSource
components/ui/base-ui/code.tsx
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192import * as stylex from "@stylexjs/stylex";import { createComponent } from "#lib/base-ui/create-component.tsx";import { defineRecipe } from "#lib/recipe-props.ts";import { colorPalette } from '@stylexblocks/ui/color-palette.stylex.ts'import { fonts } from '@stylexblocks/ui/tokens/fonts.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'import { textStyles } from '@stylexblocks/ui/text-styles.ts'
const codeStyles = stylex.create({ base: { fontFamily: fonts.mono, alignItems: 'center', display: 'inline-flex', borderRadius: semanticRadii.indicatorMd, },})
const codeVariants = stylex.create({ solid: { backgroundColor: colorPalette.solid, color: colorPalette.contrast, }, subtle: { backgroundColor: colorPalette.subtle, color: colorPalette.fg, boxShadow: 'inset 0 0 0px 1px var(--shadow-color)', '--shadow-color': colorPalette.border, }, outline: { color: colorPalette.fg, boxShadow: 'inset 0 0 0px 1px var(--shadow-color)', '--shadow-color': colorPalette.border, }, surface: { backgroundColor: colorPalette.muted, color: colorPalette.fg, boxShadow: 'inset 0 0 0px 1px var(--shadow-color)', '--shadow-color': colorPalette.border, }, plain: { color: colorPalette.fg, },})
const codeSizes = stylex.create({ xs: { paddingInline: spacing._1, minHeight: sizes._4, }, sm: { paddingInline: spacing._1_5, minHeight: sizes._5, }, md: { paddingInline: spacing._2, minHeight: sizes._6, }, lg: { paddingInline: spacing._2_5, minHeight: sizes._7, },})
const codeTextStyles = { xs: textStyles._2xs, sm: textStyles.xs, md: textStyles.sm, lg: textStyles.sm,} as const
export type CodeVariant = keyof typeof codeVariants
export type CodeSize = keyof typeof codeSizes
/** * Code — recipe and component colocated in one file. Variant/size props * resolve mechanically from the axis maps; `extend` carries the per-size * text styles. Composition via `render`. */const codeRecipe = defineRecipe({ styles: codeStyles, axes: { variant: codeVariants, size: codeSizes }, defaultVariants: { variant: "subtle", size: "sm" }, extend: (v) => [codeTextStyles[v.size]],});
export const Code = createComponent("code", codeRecipe, "Code");
export type CodeProps = React.ComponentProps<typeof Code>;