NK

Search

Search pages, posts, and components

All components

Numbered List

Layout

An ordered list whose numbered badges pop in sequence.

  1. 1Install the package
  2. 2Add the provider
  3. 3Ship it

Installation

Add it with the shadcn CLI:

$pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/numbered-list.json
Or install manually
  1. 1. Install dependencies

    pnpm add motion clsx tailwind-merge
  2. 2. Copy the component source into components/library/numbered-list.tsx

Props

PropTypeDefaultDescription
itemsstring[] - List items, in order.

Accessibility

  • A real <ol>, so the numbering is semantic rather than painted on.
  • Badges are text, so they scale with the user's type size.
  • Stagger is entrance-only and never blocks reading.

Dependencies

motionclsxtailwind-merge