# 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/dashboard12. 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. Cohort Retention

# Cohort Retention

Weekly cohort grid where each cell's opacity scales with the retention percentage in the tone color.

Retention

W0W1W2W3W4

W0

100

64

48

41

38

W1

100

71

55

46

W2

100

68

52

W3

100

74

CLICode

Base UI

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

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

Import & useCopy

```
import { Dashboard12 } from "@/components/beste/piece/dashboard12";

<Dashboard12
  heading="Retention"
  cohorts={[
    "W0",
    "W1",
    "W2",
    "W3"
  ]}
  weeks={[
    "W0",
    "W1",
    "W2",
    "W3",
    "W4"
  ]}
  retention={[
    [
      100,
      64,
      48,
      41,
      38
    ],
    [
      100,
      71,
      55,
      46,
      0
    ],
    [
      100,
      68,
      52,
      0,
      0
    ],
    [
      100,
      74,
      0,
      0,
      0
    ]
  ]}
  tone="violet"
/>
```

## More Dashboard pieces

[View all Dashboard](/pieces/dashboard)

[](/piece/dashboard3)

Revenue$48.2K

Orders1,284

Users9.4K

Events62.1K

### Widget Grid

Two-by-two KPI grid where each cell carries a tone-tinted icon tile, label, and monospaced value.

[](/piece/dashboard8)

Events this week2,840

Mon

Tue

Wed

Thu

Fri

Sat

Sun

### Weekly Bars

Seven vertical bars for a rolling week with muted fills for past days and a tone-saturated bar for today's total.

[](/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/dashboard21)

68%

Storage used34 GB of 50 GB

### Progress Circle

Radial progress gauge with a tone-colored arc, the percentage centered, and a caption line beside it.

[](/piece/dashboard16)

api.prod.example99.94%

60 days agoToday

### Uptime Status

Status-page timeline where every day is a thin vertical tile colored by up, degraded, outage, or no-data state.

[](/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.

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