All components
Separator
Horizontal and vertical rules in solid, dashed, and dotted weights.
123456789import { Separator } from "#components/ui/ark-ui/separator.tsx";
export function Example() { return ( {/* variant, orientation, and size resolve through the StyleX recipe and surface as data-* attributes */} <Separator role="separator" variant="solid" orientation="horizontal" size="sm" /> );}Variants
solid
dashed
dotted
Sizes
xs
sm
md
Install
1npx stylexblocks add separatorSource
components/ui/ark-ui/separator.tsx
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677import * as stylex from "@stylexjs/stylex";import { createComponent } from "#lib/ark-ui/create-component.tsx";import { defineRecipe } from "#lib/recipe-props.ts";import { semanticColors } from '@stylexblocks/ui/semantic-tokens/colors.stylex.ts'
const separatorStyles = stylex.create({ base: { display: 'block', borderColor: semanticColors.border, },})
const separatorVariants = stylex.create({ solid: { borderStyle: 'solid', }, dashed: { borderStyle: 'dashed', }, dotted: { borderStyle: 'dotted', },})
const separatorOrientations = stylex.create({ vertical: { height: '100%', borderInlineStartWidth: 'var(--separator-thickness)', }, horizontal: { width: '100%', borderTopWidth: 'var(--separator-thickness)', },})
const separatorSizes = stylex.create({ xs: { '--separator-thickness': '0.5px', }, sm: { '--separator-thickness': '1px', }, md: { '--separator-thickness': '2px', }, lg: { '--separator-thickness': '3px', },})
export type SeparatorVariant = keyof typeof separatorVariants
export type SeparatorOrientation = keyof typeof separatorOrientations
export type SeparatorSize = keyof typeof separatorSizes
/** * Separator — recipe and component colocated in one file. Variant, * orientation, and size props resolve mechanically from the axis maps and * surface as data-* attributes; add `role="separator"` (and * `aria-orientation` when vertical) at the call site. Composition via * `asChild`. */const separatorRecipe = defineRecipe({ styles: separatorStyles, axes: { variant: separatorVariants, orientation: separatorOrientations, size: separatorSizes, }, defaultVariants: { variant: "solid", orientation: "horizontal", size: "sm" },});
export const Separator = createComponent("div", separatorRecipe, "Separator");
export type SeparatorProps = React.ComponentProps<typeof Separator>;