Section

Title/description/action/content composition for screen sections.

Distribution status

BeeUI 0.86.2-rc.3 is public on npm under the opt-in next dist-tag (observed 2026-09-25T06:25:18.371Z). latest currently resolves to 0.86.2-rc.3 and lags next until the owner moves it for all four packages. See Start for the full install commands. The import shape below works against the published package; the repository-local Registry command remains available as a no-registry-required alternative from a BeeUI checkout. Pin @0.86.2-rc.3 instead of @next for an immutable version in CI.

Identity

• Category: Layout & surfaces
• Status: stable public Registry/export-map component family
• Targets: iOS · Android · Web, subject to the compatibility contract
• Prerequisites: @beemvp/beeui-ui installed (or this component’s source copied via the Registry CLI below) and, on Web, the BeeUI Tailwind/Uniwind theme CSS loaded — see Start for full platform setup.
• Source: packages/ui/src/components/section.tsx

Import

import { Section } from '@beemvp/beeui-ui';

There is no documented deep/private source import. For source ownership from a BeeUI checkout:

pnpm beeui add section

Registry (used throughout this page) is BeeUI’s source-ownership manifest — registry/registry.json — that the pnpm beeui/@beemvp/beeui-cli CLI reads to copy a component’s real source into your app and rewrite its internal imports; it is not an npm package index. This component’s own Registry entry: registry/registry.json.

Composition and public API

• Primary export: Section
  • Also routed here, outside the Registry family:
    • section
  • Package export subpath: @beemvp/beeui-ui/section

Exported types: SectionProps

The generated API inventory is mechanically joined to packages/ui/src/index.ts, Registry metadata, and the component reference contract. Each type’s field table below is parsed directly from that source, not a second hand-maintained copy; for the fuller behavior narrative see the canonical component behavior catalog.

State and behavior contract

Stateless title/description/action/content composition for screen sections; no controlled state or callbacks.

Props

SectionProps

Prop	Type	Default	Description
action	React.ReactNode	—	Rendered end-aligned opposite the title/description (e.g. a “See all” link). Only shown, along with the header row, when at least one of title, description, or action is set.
className	string	—	Extra utility classes, merged after the component’s own via cn(...), so they win on conflict. An escape hatch for source-owned and application work, not a cross-engine portability guarantee.
description	React.ReactNode	—	Secondary supporting text rendered beneath the primary label or title.
descriptionClassName	string	—	Applied to the description Text when description is a plain string or number; ignored if description is a custom element.
title	React.ReactNode	—	The primary heading text for this surface.
titleClassName	string	—	Applied to the title Text when title is a plain string or number; ignored if title is a custom element.

Also carries every prop of ViewProps — that upstream contract is not reproduced here.

The executable fixtures below are the source-grounded usage examples; consumers should not infer state ownership from DOM structure or another UI library.

Provider and dependencies

• No additional provider is required by this family. BeeUIProvider remains the recommended application root.
• Peer/native dependencies visible to this Registry item: react, react-native
• Registry dependency closure: box, core-cn, text, theme
• Safe-area ownership remains explicit: shell surfaces touching system edges opt into SafeArea; components do not silently invent app-shell insets.
• Web consumers load the BeeUI semantic theme CSS as documented in Web onboarding.

Platform behavior

This family ships no platform-specific file, and its own source takes no Platform branch.

The same public family is exposed across the supported target matrix; meaningful platform differences remain governed by the compatibility contract.

Evidence classes are not equal and this page does not blur them: Web behavior is exercised in a real browser, while iOS and Android carry package/export and native-compile evidence, which is not device-runtime proof. The compatibility contract records which class each claim rests on.

Accessibility

• Roles this family assigns: header — set in section.tsx by the components themselves, not by the caller.
• Accessibility states and properties it sets: none set in section.tsx.

Keyboard/focus behavior, announcements, Dynamic Type/Web zoom, RTL and reduced-motion expectations are not derived here — see Accessibility overview, Keyboard & focus, RTL/localization and Large text & zoom. BeeUI does not claim universal accessibility certification from automated tests.

Styling and theming

• Style axes: none of its own — its appearance comes from tokens and your own classes; it also carries ViewProps.
• Class-name surfaces: className, descriptionClassName, titleClassName.

Colors, spacing and typography come from semantic tokens rather than from values written here — see Theming and Density. A className is an escape hatch for source-owned and application work, not a cross-engine portability guarantee.

Executable examples

• Primary executable fixture: apps/showcase/__tests__/component-contracts.test.tsx
• Additional fixture: apps/showcase/component-gallery/component-gallery.tsx
• Additional fixture: apps/showcase/component-gallery/date-picker-showcase.tsx
• Additional fixture: apps/showcase/component-gallery/date-time-picker-showcase.tsx

Addressable examples

Each link below opens the Showcase at that exact example, not at the top of the gallery:

• basic — smallest meaningful complete usage

The Showcase links demonstrate Web behavior; use the native-preview guide for real simulator/emulator/device paths.

Live Web preview

This frame loads the real BeeUI Web Showcase on demand; it is not a second docs-only implementation. It proves browser behavior only. Use native preview for iOS/Android simulator, emulator or device paths.

Composition anatomy

• Family root / primary export: Section
  • Exported type surface:
    • SectionProps

The tree above is ordinary document structure so it remains readable with keyboard and assistive technology; it is derived from the real public export family rather than a canvas-only diagram.

Verified example source

These are the parts of the typechecked runtime Showcase fixture behind this live preview — apps/showcase/component-gallery/component-gallery.tsx, 1103 lines — where Section is actually used: 38 lines in 4 places, of 14 in total — open the fixture for the remaining 10. Each block is copied verbatim from the line range named above it, so it is the same executable source, not a retelling of it. Other uses of this family, and the parts of the file exercising other families, are not reproduced here.

Imports the examples below need (a filtered subset of the fixture’s own top-level imports):

import { BeeThemeScope, Box, Button, Dialog, DialogClose, DialogContent, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger, Field, HStack, IconButton, Input, Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, Section, Text, Tooltip, TooltipContent, TooltipTrigger, VStack } from '@beemvp/beeui-ui';
import * as React from 'react';
import { Uniwind, useUniwind } from 'uniwind';

lines 530–544:

              <Section
                action={<IconButton accessibilityLabel="Add item" variant="outline">＋</IconButton>}
                description="Variants, disabled state, and loading behavior."
                title="Actions"
              >
                <Box className="gap-3">
                  <Button>Primary action</Button>
                  <Button variant="secondary">Secondary action</Button>
                  <Button variant="outline">Outline action</Button>
                  <Button variant="ghost">Ghost action</Button>
                  <Button variant="destructive">Destructive action</Button>
                  <Button disabled>Disabled action</Button>
                  <Button loading>Loading action</Button>
                </Box>
              </Section>

Fixture state this block reads (same file, line 148-170):

function PlacementPopover({ placement }: { placement: 'top' | 'right' | 'bottom' | 'left' }) {
  return (
    <Popover>
      <PopoverTrigger size="sm" variant="outline">
        {placement}
      </PopoverTrigger>
      <PopoverContent placement={placement} testID={`popover-${placement}-content`}>
        <PopoverTitle>{`${placement[0].toUpperCase()}${placement.slice(1)} placement`}</PopoverTitle>
        <PopoverDescription>
          This surface is positioned by the shared anchored-overlay geometry kernel.
        </PopoverDescription>
        {placement === 'bottom' ? (
          <Field label="Note">
            <Input accessibilityLabel="Popover note" testID="popover-demo-input" />
          </Field>
        ) : null}
        <PopoverClose size="sm" variant="ghost">
          Close
        </PopoverClose>
      </PopoverContent>
    </Popover>
  );
}

lines 773–783:

              <Section
                description="Popover uses the shared non-Modal host, window-coordinate measurement, collision handling, and topmost dismissal stack."
                title="Popover placements"
              >
                <HStack gap="sm" wrap>
                  <PlacementPopover placement="top" />
                  <PlacementPopover placement="right" />
                  <PlacementPopover placement="bottom" />
                  <PlacementPopover placement="left" />
                </HStack>
              </Section>

Fixture state this block reads (same file, lines 174, 176-178, 188-232, 234-313):

const OverlayConsumerContext = React.createContext('overlay-context-default');
function OverlayContextValue({ testID }: { testID: string }) {
  return <Text testID={testID}>{`context: ${React.useContext(OverlayConsumerContext)}`}</Text>;
}
function CaseCScopeOrdering() {
  const [dialogOpen, setDialogOpen] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [rootOpen, setRootOpen] = React.useState(false);
  return (
    <>
      <Button
        onPress={() => {
          setDialogOpen(true);
          setMenuOpen(true);
          setRootOpen(true);
        }}
        testID="overlay-context-casec-open"
        variant="outline"
      >
        Open CASE C
      </Button>

      <Popover onOpenChange={setRootOpen} open={rootOpen}>
        <PopoverTrigger testID="overlay-context-casec-root-trigger" variant="outline">
          CASE C root
        </PopoverTrigger>
        <PopoverContent placement="bottom">
          <OverlayContextValue testID="overlay-context-casec-root-value" />
        </PopoverContent>
      </Popover>

      <Dialog onOpenChange={setDialogOpen} open={dialogOpen}>
        <DialogTrigger testID="overlay-context-casec-dialog-trigger">CASE C dialog</DialogTrigger>
        <DialogContent>
          <DialogTitle>CASE C dialog</DialogTitle>
          <DropdownMenu onOpenChange={setMenuOpen} open={menuOpen}>
            <DropdownMenuTrigger testID="overlay-context-casec-menu-trigger" variant="outline">
              CASE C menu
            </DropdownMenuTrigger>
            <DropdownMenuContent>
              <DropdownMenuLabel>CASE C menu</DropdownMenuLabel>
              <OverlayContextValue testID="overlay-context-casec-menu-value" />
            </DropdownMenuContent>
          </DropdownMenu>
        </DialogContent>
      </Dialog>
    </>
  );
}
function ConsumerContextOverlays() {
  const [dialogMenuAction, setDialogMenuAction] = React.useState('none');
  return (
    <OverlayConsumerContext.Provider value="preserved">
      <VStack gap="sm">
        <Popover>
          <PopoverTrigger testID="overlay-context-popover-trigger" variant="outline">
            Popover context
          </PopoverTrigger>
          <PopoverContent placement="bottom">
            <PopoverTitle>Popover consumer context</PopoverTitle>
            <OverlayContextValue testID="overlay-context-popover-value" />
          </PopoverContent>
        </Popover>

        <DropdownMenu>
          <DropdownMenuTrigger testID="overlay-context-menu-trigger" variant="outline">
            Menu context
          </DropdownMenuTrigger>
          <DropdownMenuContent>
            <DropdownMenuLabel>Menu consumer context</DropdownMenuLabel>
            <OverlayContextValue testID="overlay-context-menu-value" />
          </DropdownMenuContent>
        </DropdownMenu>

        <Tooltip>
          <TooltipTrigger testID="overlay-context-tooltip-trigger" variant="outline">
            Tooltip context
          </TooltipTrigger>
          <TooltipContent>
            <OverlayContextValue testID="overlay-context-tooltip-value" />
          </TooltipContent>
        </Tooltip>

        <Dialog>
          <DialogTrigger testID="overlay-context-dialog-trigger">Dialog context</DialogTrigger>
          <DialogContent>
            <DialogTitle>Dialog with a nested overlay</DialogTitle>
            <Popover>
              <PopoverTrigger testID="overlay-context-dialog-popover-trigger" variant="outline">
                Popover in dialog
              </PopoverTrigger>
              <PopoverContent placement="bottom">
                <OverlayContextValue testID="overlay-context-dialog-popover-value" />
              </PopoverContent>
            </Popover>

            <Tooltip>
              <TooltipTrigger testID="overlay-context-dialog-tooltip-trigger" variant="outline">
                Tooltip in dialog
              </TooltipTrigger>
              <TooltipContent>
                <OverlayContextValue testID="overlay-context-dialog-tooltip-value" />
              </TooltipContent>
            </Tooltip>

            <DropdownMenu>
              <DropdownMenuTrigger testID="overlay-context-dialog-menu-trigger" variant="outline">
                Menu in dialog
              </DropdownMenuTrigger>
              <DropdownMenuContent>
                <DropdownMenuLabel>Menu in dialog</DropdownMenuLabel>
                <OverlayContextValue testID="overlay-context-dialog-menu-value" />
                <DropdownMenuItem
                  onSelect={() => setDialogMenuAction('selected')}
                  testID="overlay-context-dialog-menu-item"
                >
                  Select in dialog
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
            <Text testID="overlay-context-dialog-menu-action">{`menu action: ${dialogMenuAction}`}</Text>
          </DialogContent>
        </Dialog>

        <CaseCScopeOrdering />
      </VStack>
    </OverlayConsumerContext.Provider>
  );
}

lines 893–898:

              <Section
                description="Consumer React context declared below BeeUIProvider resolves inside overlay content on web, native, and inside a Dialog."
                title="Consumer context"
              >
                <ConsumerContextOverlays />
              </Section>

Fixture state this block reads (same file, lines 321-324, 326-373, 458):

function ThemeScopeValue({ testID }: { testID: string }) {
  const { theme } = useUniwind();
  return <Text testID={testID}>{`theme: ${theme}`}</Text>;
}
function ThemeScopeOverlays() {
  return (
    <VStack gap="sm">
      <BeeThemeScope appearance="dark" brand="violet">
        <VStack gap="sm">
          <ThemeScopeValue testID="theme-scope-root-value" />

          <Popover>
            <PopoverTrigger testID="theme-scope-popover-trigger" variant="outline">
              Popover in scope
            </PopoverTrigger>
            <PopoverContent placement="bottom">
              <PopoverTitle>Popover in a BeeThemeScope</PopoverTitle>
              <ThemeScopeValue testID="theme-scope-popover-value" />
            </PopoverContent>
          </Popover>

          <DropdownMenu>
            <DropdownMenuTrigger testID="theme-scope-menu-trigger" variant="outline">
              Menu in scope
            </DropdownMenuTrigger>
            <DropdownMenuContent>
              <DropdownMenuLabel>Menu in a BeeThemeScope</DropdownMenuLabel>
              <ThemeScopeValue testID="theme-scope-menu-value" />
            </DropdownMenuContent>
          </DropdownMenu>

          <Dialog>
            <DialogTrigger testID="theme-scope-dialog-trigger">Dialog in scope</DialogTrigger>
            <DialogContent>
              <DialogTitle>Dialog inside a BeeThemeScope</DialogTitle>
              <ThemeScopeValue testID="theme-scope-dialog-value" />
              <DialogClose size="sm" variant="ghost">
                Close
              </DialogClose>
            </DialogContent>
          </Dialog>

          <BeeThemeScope appearance="light" brand="bee">
            <ThemeScopeValue testID="theme-scope-nested-value" />
          </BeeThemeScope>
        </VStack>
      </BeeThemeScope>

      <ThemeScopeValue testID="theme-scope-sibling-value" />
    </VStack>
  );
}
  const { theme } = useUniwind();

lines 902–907:

              <Section
                description="BeeThemeScope (#68) is a thin typed wrapper over Uniwind's own ScopedTheme. The scoped brand/appearance below resolves for Popover, DropdownMenu, and Dialog content declared inside it, nests independently of an inner scope, and never leaks to the sibling value outside it."
                title="Scoped theme (BeeThemeScope)"
              >
                <ThemeScopeOverlays />
              </Section>

Open the fixture itself for the full surrounding component. For a smaller app-specific example, start from the imports and fixture-state blocks above and keep only the state your screen owns.

Limitations

titleClassName and descriptionClassName are dropped when the corresponding prop is an element rather than a plain string or number. The header row, including action, renders only when at least one of title, description or action is set.

Related

• All components
• Production patterns
• Showcase
• CLI & source ownership
• Source