Components / Interfaces / MilestoneMarker
Milestone
FreeComponentA vertical milestone list with circular markers and connecting rules.
Demo dataResponsive
- FoundationComplete
- RegistryIn progress
- LaunchNext
Installation
pnpm dlx shadcn@latest add https://elements.micropreneur.dev/r/milestone-marker.jsonThe shadcn CLI writes the source into your project. Files added:
- components/elements/milestone-marker.tsxcomponent
- lib/utils.tslib
Dependenciesclsxtailwind-merge
API
MilestoneMarker
| Prop | Type | Default | Description |
|---|---|---|---|
| title (required) | ReactNode | — | Primary label for the milestone. |
| meta | ReactNode | — | Small muted metadata line, e.g. a date. |
| status | MilestoneStatus | 'upcoming' |
Also accepts Omit<ComponentProps<'li'>, 'title'>.
Milestones
No props of its own.
Also accepts ComponentProps<'ol'>.
Accessibility
- Milestones renders an ordered list, so position in the sequence is announced.
- The circular marker is decorative; pass status words in meta when the state matters.