All components
Aside
Contextual side panels with a titled header and scrollable body in two densities.
1234567891011121314import { Aside } from "#components/ui/ark-ui/aside.tsx";
export function Example() { return ( // size resolves once on Root; every part inherits it via context — // composition per part via asChild <Aside.Root size="md"> <Aside.Header> <Aside.Title>Details</Aside.Title> </Aside.Header> <Aside.Body>…</Aside.Body> </Aside.Root> );}Sizes
md
lg
Install
1npx stylexblocks add asideSource
components/ui/ark-ui/aside.tsx
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697import * as stylex from "@stylexjs/stylex";import { createSlotRecipeContext } from "#lib/ark-ui/create-slot-recipe-context.tsx";import { defineSlotRecipe } from "#lib/recipe-props.ts";import { fontSizes } from '@stylexblocks/ui/tokens/font-sizes.stylex.ts'import { fontWeights } from '@stylexblocks/ui/tokens/font-weights.stylex.ts'import { sizes } from '@stylexblocks/ui/tokens/sizes.stylex.ts'import { spacing } from '@stylexblocks/ui/tokens/spacing.stylex.ts'
const asideRoot = stylex.create({ base: { display: 'flex', flexDirection: 'column', minHeight: 0, position: 'relative', transitionProperty: 'margin-right', },})
const asideHeader = stylex.create({ base: { display: 'flex', alignItems: 'center', justifyContent: 'stretch', minHeight: sizes._12, borderBottomWidth: '1px', },})
const asideHeaderSizes = stylex.create({ md: { padding: spacing._4, }, lg: { padding: spacing._6, },})
const asideTitle = stylex.create({ base: { fontWeight: fontWeights.medium, },})
const asideTitleSizes = stylex.create({ md: { fontSize: fontSizes.md, }, lg: { fontSize: fontSizes.lg, },})
const asideBody = stylex.create({ base: { flex: 1, overflow: 'auto', },})
const asideBodySizes = stylex.create({ md: { padding: spacing._4, }, lg: { padding: spacing._6, },})
export type AsideSize = keyof typeof asideHeaderSizes
// 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 asideSlotRecipe = defineSlotRecipe({ slots: { root: { styles: asideRoot }, header: { styles: asideHeader, sizes: asideHeaderSizes }, title: { styles: asideTitle, sizes: asideTitleSizes }, body: { styles: asideBody, sizes: asideBodySizes }, }, defaultVariants: { size: "md" },});
/** * Aside — recipe and component colocated in one file. `<Aside.Root size>` * resolves the recipe once and every part inherits it through context; each * part composes via `asChild`. */const { withProvider, withContext } = createSlotRecipeContext(asideSlotRecipe);
export const Aside = { // slot names resolve mechanically from the recipe maps above Root: withProvider("aside", "root", "AsideRoot"), Header: withContext("header", "header", "AsideHeader"), Title: withContext("h2", "title", "AsideTitle"), Body: withContext("div", "body", "AsideBody"),};