Duck Section Marker
The label at the top of a section: index, name, and a rule that bleeds out to nothing.
DisplayServer safe
Preview
03Selected work
The rule dissolves instead of stopping, which is the difference between a divider between two things and an annotation on the one below it.
No index, still chrome
Installation
The CLI writes the source into your project and pulls in whatever it depends on.
$
pnpm dlx shadcn@latest add @duck/duck-section-markerPulls in @duck/theme, @duck/hud-label. Already installed items are skipped.
Usage
import { DuckSectionMarker } from "@/components/ui/duck-section-marker"The file lands in components/ui/duck-section-marker.tsx and belongs to you from that point on. Edit it in place rather than wrapping it.
Props
Everything not listed here is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| index | React.ReactNode | - | Section ordinal. A string, so "03" keeps its zero. |
| align | "left" | "center" | "left" | Which side the rule runs to. |
Rules
What keeps this component from turning into noise.
- A rule with an end is a divider between two things. A rule that dissolves is an annotation on the one below it — that is the whole detail.
- The dot answers to the section, not to itself: put group/section on the section for it to wake up on hover.