# 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/piece/dashboard5. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

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

---
1. /
2. [Pieces](/pieces)
3. /
4. [Dashboard](/pieces/dashboard)
5. /
6. Top List

# Top List

Ranked list where each row's background bar fills proportionally to its value, with index and count on either end.

Top sources

1Direct

4,820

1Direct

4,820

2Google

3,610

2Google

3,610

3Twitter

1,890

3Twitter

1,890

4Referral

980

4Referral

980

CLICode

Base UI

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

New here? Read the [installation guide](/docs/installation).

Import & useCopy

```
import { Dashboard5 } from "@/components/beste/piece/dashboard5";

<Dashboard5
  title="Top sources"
  items={[
    {
      "label": "Direct",
      "value": 4820
    },
    {
      "label": "Google",
      "value": 3610
    },
    {
      "label": "Twitter",
      "value": 1890
    },
    {
      "label": "Referral",
      "value": 980
    }
  ]}
  tone="violet"
/>
```

## More Dashboard pieces

[View all Dashboard](/pieces/dashboard)

[](/piece/dashboard11)

Top performers

1Ada L.12,840

2Marcus R.10,320

3Priya S.8,960

### Leaderboard

Top-three ranking card with gold, silver, and bronze medal circles next to names and monospaced scores.

[](/piece/dashboard6)

Visit

12,400

Sign-up

3,420−72%

Active

1,980−42%

Paid

620−69%

### Funnel

Conversion funnel stages where each row's bar narrows against the top stage and a rose drop-off percentage marks churn.

[](/piece/dashboard23)

Traffic by device9,420 sessions

* Mobile58%
* Desktop32%
* Tablet8%
* Other2%

### Stacked Bar

Horizontal 100 percent stacked bar splitting a total into colored segments with a wrapping legend of labels and percentages.

[](/piece/dashboard19)

4.6

1,284 reviews

5980

4208

362

224

110

### Rating Breakdown

Average rating with a star, total review count, and five rows showing per-star counts with an amber proportional bar.

[](/piece/dashboard22)

Weekly sessions

186/ 220

34 to targetmax 300

### Bullet Chart

Actual-vs-target bar with a tone-colored actual fill on a muted track and a thin foreground tick marking the target.

[](/piece/dashboard25)

Services
* APIOperational

99.99%
* IngestDegraded

99.82%
* BillingOperational

99.97%
* WorkersOperational

99.95%

### Service List

Service health rows with a pinging status dot, operational label, and a monospaced uptime percentage.

## 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.