# 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/usecase50. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.
Last updated: 2026-07-29
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. [Use Case](/blocks/use-case)
5. /
6. A Day In The Tool
# A Day In The Tool[PRO](/pricing)
Showcase built as a ruled timetable: selecting an hour swaps a soft panel that floats the matching interface piece over a dotted field, then explains the moment and states one outcome on its own rule.
ViewCodeDocs
Base UI
`npx shadcn add https://ui.beste.co/r-base/usecase50`
## Usecase50: A Day In The Tool
A working day set as a ruled timetable. Pick an hour and the panel beside it shows the interface piece that was open at that moment, with the story and the outcome it produced.
Upgrade to Pro
Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.
[Upgrade NowUpgrade Now](/pricing)
### Installation
Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).
**Radix flavor**
bashCopy
```
npx shadcn add "https://ui.beste.co/r/usecase50?email=YOUR_EMAIL&license_key=YOUR_KEY"
```
**Base UI flavor**
bashCopy
```
npx shadcn add "https://ui.beste.co/r-base/usecase50?email=YOUR_EMAIL&license_key=YOUR_KEY"
```
This installs the block to `components/beste/block/usecase50.tsx`, the `editor10`, `calendar11`, `upload23` and `upload20` pieces the demo puts in the panel, and the `badge7` eyebrow it uses.
### Quick start
The installed file exports `usecase50Demo` alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.
tsxCopy
```
import { Usecase50, usecase50Demo } from "@/components/beste/block/usecase50";
export default function Page() {
return ;
}
```
Then replace the demo with your own props. Written out, a trimmed setup looks like this:
tsxCopy
```
import { Usecase50 } from "@/components/beste/block/usecase50";
import { Calendar11 } from "@/components/beste/piece/calendar11";
import { Editor10 } from "@/components/beste/piece/editor10";
export default function Page() {
return (
,
outcomeTitle: "Time to first call",
outcome: "Down to one day",
},
{
time: "10:15",
label: "The week books itself",
title: "Reviews land where the work already is",
description: "One ninety-minute session a week, at the same hour.",
media: ,
outcomeTitle: "Sessions per project",
outcome: "One a week, no more",
},
]}
/>
);
}
```
### Props
| Prop | Type | Default | Description |
| ----------- | ----------------- | ------- | --------------------------------------------------------- |
| badge | { label: string } | – | Eyebrow label rendered as a Badge7 |
| heading | string | – | Section heading in the left header column |
| description | string | – | Supporting paragraph in the right header column |
| moments | Moment\[\] | \[\] | Hours in the timetable, first one selected on mount |
| labels | Usecase50Labels | {} | Fixed strings that are not content: the timetable's title |
| className | string | – | Extra classes for the outer |
tsCopy
```
type Moment = {
time: string;
label: string;
title: string;
description: string;
/** Media object for this moment, usually a registry piece */
media: ReactNode;
outcomeTitle: string;
outcome: string;
};
type Usecase50Labels = {
scheduleTitle?: string;
};
```
### Behavior notes
* `media` is a `ReactNode` per moment, so each hour can show a different piece: the demo runs an editor, a calendar, a single upload and an upload grid without the block knowing anything about them.
* The piece floats over a dotted field drawn on the panel's own surface, a `radial-gradient` on `currentColor` at `text-foreground/20`, with no second fill and no border, so the panel keeps one surface and the pattern follows the theme.
* Timetable rows are a `grid-cols-[4.5rem_1fr]` with `tabular-nums` on the time, so the hours form a straight column whatever the labels do.
* Selection is expressed twice: the row's top rule darkens from `border-border` to `border-foreground` and the label gains weight, so it does not rely on colour alone.
* The media area is `flex-1` with `min-h-[260px]`, so switching between a tall calendar and a short upload card does not make the panel jump.
* The outcome line sits on a `border-current/10` rule with `items-baseline justify-between`, so the label and its value stay aligned and wrap cleanly when the panel is narrow.
* Below `md` the timetable stacks above the panel in source order, so a phone reads the day first and then the selected hour.
## More Use Case blocks
[View all Use Case](/blocks/use-case)
[](/block/usecase43)
PRO
usecase43
### A Day In Appointments
A use case with an eyebrow over a hairline rule, a two-column heading, and three image tiles that each float a live appointment card above a title and description.
[](/block/usecase1)
PRO
usecase1
### Interactive Tab Showcase
Tab-based use case section with images, descriptions, and feature checklists that collapse to accordion on mobile. Perfect for showcasing how different teams or departments use your product.
[](/block/usecase47)
PRO
usecase47
### Job Index With Image Panel
Ruled index of jobs on the left that swaps the panel beside it, where each selection brings its own photograph, explanation and two ruled outcome figures.
[](/block/usecase14)
PRO
usecase14
### Segmented Control Tabs
Segmented control style tabs with split layout showing image, description, and bullet point features. Perfect for comparing solution approaches or product capabilities.
[](/block/usecase12)
PRO
usecase12
### Workflow Stage Tabs
Tab navigation showing workflow stages with split image cards featuring stats overlays and descriptions. Perfect for demonstrating product workflow or development process stages.
[](/block/usecase5)
FREE
usecase5
### Feature Icon Grid
Centered icon grid with titles and descriptions, featuring hover animations on icon containers. Perfect for showcasing product features or capabilities in a clean layout.
## 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.