# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/feature34. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2025-12-25

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [Feature](/blocks/feature)
5. /
6. Numbered Reasons List

# Numbered Reasons ListFREE

Two-column grid of numbered items (01, 02, etc.) with circular badges, titles, and descriptions. Perfect for why-choose-us sections, benefits lists, or key differentiators.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/feature34`

## Feature34: Numbered Reasons List

List of features tagged with zero-padded circular numbers ("01", "02", ...) instead of icons, laid out as either a single centered column or a two-column grid depending on the `columns` prop.

Free block

This block is free. No license or account is required: install it with the CLI and use it in unlimited projects.

### Installation

**Radix flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r/feature34"
```

**Base UI flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r-base/feature34"
```

This installs the block to `components/beste/block/feature34.tsx` and the shadcn/ui `badge` and `button` components it depends on.

### Quick start

The installed file exports `feature34Demo` alongside the block: the exact props behind the preview above. Spread it to get a working numbered list in one line.

tsxCopy

```
import { Feature34, feature34Demo } from "@/components/beste/block/feature34";

export default function Page() {
  return <Feature34 {...feature34Demo} />;
}
```

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

tsxCopy

```
import { Feature34 } from "@/components/beste/block/feature34";

export default function Page() {
  return (
    <Feature34
      badge={{ label: "Why us", variant: "default" }}
      heading="Four reasons teams choose us"
      description="We've spent years refining the details."
      columns={1}
      features={[
        {
          id: "feature-1",
          title: "No learning curve",
          description: "Familiar interface patterns mean your team can start immediately.",
        },
        {
          id: "feature-2",
          title: "Transparent pricing",
          description: "One plan, one price. No fees.",
        },
      ]}
      buttons={[{ id: "btn-1", label: "Start free trial", href: "/signup" }]}
    />
  );
}
```

### Props

| Prop        | Type                                                | Default     | Description                                                           |                         |
| ----------- | --------------------------------------------------- | ----------- | --------------------------------------------------------------------- | ----------------------- |
| badge       | { label: string; variant?: "default" \| "secondary" | "outline" } | –                                                                     | Badge above the heading |
| heading     | string                                              | –           | Section heading                                                       |                         |
| description | string                                              | –           | Section intro text                                                    |                         |
| features    | NumberedFeature\[\]                                 | \[\]        | Numbered rows; the section renders nothing when this is empty         |                         |
| buttons     | ButtonItem\[\]                                      | \[\]        | CTA buttons below the list                                            |                         |
| columns     | 1 \| 2                                              | 2           | 2 lays out a md:grid-cols-2 grid; 1 centers a single max-w-3xl column |                         |
| className   | string                                              | –           | Extra classes for the outer <section>                                 |                         |

tsCopy

```
type NumberedFeature = {
  id: string;
  title: string;
  description: string;
};

type ButtonItem = {
  id: string;
  label: string;
  href?: string;
  variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
};
```

### Behavior notes

* The component returns `null` when `features` is empty, so it never renders a header with no rows beneath it.
* The number badge is always the item's 1-based array index, zero-padded to two digits with `padStart(2, "0")` ("01", "02", ...); it is not a prop and cannot be overridden per item.
* `columns` is coerced with `Number(columns)` before the `=== 2` check, so it tolerates a stringified `"2"` being passed even though the type only declares `1 | 2`.
* There is no per-item icon slot: every row's marker is the same bordered circle with `border-primary text-primary`, unlike feature23/feature26/feature29/feature107 which accept a custom `icon` node per item.
* Rows have no hover or interaction state; the only dynamic layout behavior is the `columns` grid switch itself.

## More Feature blocks

[View all Feature](/blocks/feature)

[](/block/feature233)

PRO

feature233

### Compact two-column icon feature list

A header with a badge, heading, and description, followed by many compact items in a two-column grid — each a lucide icon in a rounded bg-muted tile beside a title and one-line description.

[](/block/feature199)

PRO

feature199

### Feature with Side Heading and Icon Grid

Two-column feature section with a large heading on the left and a 2x2 grid of feature cards on the right, each with a large badge icon, title, and description.

[](/block/feature162)

PRO

feature162

### Numbered Steps Grid

3-column grid of numbered steps with titles and descriptions. Ideal for onboarding flows, process overviews, and how-it-works sections.

[](/block/feature146)

FREE

feature146

### Benefits Checklist

Responsive grid of benefit items with checkmark icons and descriptions. Perfect for benefits list, value proposition, or key advantages.

[](/block/feature200)

PRO

feature200

### Feature with Two-Column Checklist and Image

Two-column feature section with badge, heading, description, a 2-column checklist of icon items (defaults to check icon), and CTA on one side, with a square image on the other. Image position is configurable.

[](/block/feature203)

PRO

feature203

### Feature with Stats Grid and Image

Two-column feature section with heading, description, and a 2x2 stats grid (icon card, value, label) on one side and a square image on the other. Image position is configurable.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.