All components
Code
Inline code marks with palette-aware solid, subtle, surface, and outline styles.
stylex.create()Variants
stylex.create()solidstylex.create()subtlestylex.create()surfacestylex.create()outlinestylex.create()plainSizes
stylex.create()xsstylex.create()smstylex.create()mdstylex.create()lgInstall
zsh — code
1bunx stylexblocks add codeUsage — Base UI
code.tsx
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">bunx stylexblocks add hero-01</Code>
{/* composition: the render prop replaces the underlying element */} <Code variant="outline" render={<a href="/docs/cli" />}> stylexblocks --help </Code> </> );}