All components
Section
Titled content sections with description and body slots for settings pages.
Members
Invite and manage your team.
1234567891011121314151617import { Section, sectionAnnotated } from "#components/ui/ark-ui/section.tsx";
export function Example() { return ( // composition per part via asChild; for the two-column annotated layout // compose the exported styles: // <Section.Root style={sectionAnnotated.root}> + // <Section.Header style={sectionAnnotated.header}> <Section.Root> <Section.Header> <Section.Title>Members</Section.Title> <Section.Description>Invite and manage your team.</Section.Description> </Section.Header> <Section.Body>…</Section.Body> </Section.Root> );}Install
1npx stylexblocks add sectionSource
components/ui/ark-ui/section.tsx
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293import * 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 { semanticColors } from '@stylexblocks/ui/semantic-tokens/colors.stylex.ts'import { spacing } from '@stylexblocks/ui/tokens/spacing.stylex.ts'
const sectionRoot = stylex.create({ base: { display: 'flex', flexDirection: 'column', },})
const sectionRootVariants = stylex.create({ annotated: { marginTop: spacing._4, },})
const sectionHeader = stylex.create({ base: { flexShrink: 0, marginBottom: spacing._4, },})
const sectionHeaderVariants = stylex.create({ annotated: {},})
const sectionTitle = stylex.create({ base: { fontWeight: fontWeights.medium, lineHeight: '110%', letterSpacing: '-1%', marginBottom: spacing._1, },})
const sectionDescription = stylex.create({ base: { color: semanticColors.fgMuted, fontSize: fontSizes.md, },})
const sectionBody = stylex.create({ base: { flex: 1, minWidth: 0, },})
export type SectionVariant = keyof typeof sectionRootVariants
// defineSlotRecipe validates the shape at compile time. The generated// `annotated` maps have no plain counterpart to default to, so the section// exposes no variant axis; the annotated layout styles are exported below.const sectionSlotRecipe = defineSlotRecipe({ slots: { root: { styles: sectionRoot }, header: { styles: sectionHeader }, title: { styles: sectionTitle }, description: { styles: sectionDescription }, body: { styles: sectionBody }, }, defaultVariants: {},});
/** * Section — recipe and component colocated in one file; each part composes * via `asChild`. For the two-column annotated layout, compose the exported * styles: `<Section.Root style={sectionAnnotated.root}>` + * `<Section.Header style={sectionAnnotated.header}>`. */const { withProvider, withContext } = createSlotRecipeContext(sectionSlotRecipe);
export const sectionAnnotated = { root: sectionRootVariants.annotated, header: sectionHeaderVariants.annotated,};
export const Section = { Root: withProvider("section", "root", "SectionRoot"), Header: withContext("header", "header", "SectionHeader"), Title: withContext("h2", "title", "SectionTitle"), Description: withContext("p", "description", "SectionDescription"), Body: withContext("div", "body", "SectionBody"),};