Each of these used to be a spreadsheet, a group chat, or somebody's memory. Choose one and see what replaced it.
Pick a day
MaySix slots open on Wednesday, from 08:00 to 16:30.
Availability, capacity, and the waiting list share one view, so filling a cancellation takes a click rather than a phone tree.
An interactive feature where a hairline list of four capabilities swaps the image tile beside it, each one floating a different live asset with its own supporting paragraph.
An interactive feature where a hairline list of four capabilities swaps the image tile beside it, each one floating a different live asset with its own supporting paragraph.
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.
Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.
Radix flavor
npx shadcn add "https://ui.beste.co/r/feature257?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/feature257?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/feature257.tsx, the calendar32, chart7, indicator14 and progress16 pieces it swaps between (installed to components/beste/piece/{name}.tsx), and the badge23 component it uses for the eyebrow.
The installed file exports feature257Demo alongside the block: the exact props behind the preview above. Spread it to get a working selector in one line.
import { Feature257, feature257Demo } from "@/components/beste/block/feature257";
export default function Page() {
return <Feature257 {...feature257Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Calendar32 } from "@/components/beste/piece/calendar32";
import { Chart7 } from "@/components/beste/piece/chart7";
import { Feature257 } from "@/components/beste/block/feature257";
const backdrop = { src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" };
export default function Page() {
return (
<Feature257
badge={{ label: "Pick a corner" }}
heading="Four jobs your team stops doing by hand"
description="Each of these used to be a spreadsheet or somebody's memory. Choose one and see what replaced it."
items={[
{
label: "Booking",
title: "A week you can read at a glance",
description: "Availability, capacity, and the waiting list share one view.",
media: (
<Calendar32
title="Pick a day"
month="May"
days={[{ weekday: "W", date: "14", slots: 6 }]}
selectedIndex={0}
caption="Six slots open on Wednesday."
/>
),
image: backdrop,
},
{
label: "Reporting",
title: "The month-end pack, already written",
description: "Hours and utilisation are counted as the work happens.",
media: (
<Chart7
title="Where the week went"
caption="Booked hours by appointment type"
items={[{ label: "Consultations", percent: 42 }]}
/>
),
image: backdrop,
},
]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string } | – | Eyebrow above the hairline rule, rendered through Badge23 |
heading | string | – | Section heading in the left column of the header |
description | string | – | Supporting paragraph, right-aligned from md up |
items | Capability[] | [] | Selectable capabilities, the first one starts active |
className | string | – | Extra classes for the outer section |
type Capability = {
label: string;
title: string;
description: string;
media: ReactNode;
image?: TileImage;
};
type TileImage = {
src: string;
alt: string;
};useState holding an index, starting at 0. There is no onChange prop and no controlled mode, so the block owns its own state.media and image, so switching swaps both the asset and the backdrop behind it. Reusing the same image object across items is how you keep the backdrop steady while only the asset changes.title is progressive disclosure: it renders only inside the active row, so the list stays a column of short labels until something is selected and then expands in place.button elements with aria-pressed, not links, and they carry cursor-pointer explicitly, since Tailwind v4 buttons default to cursor: default.bg-border to bg-primary. Text colour shifts at the same time, so the state reads without relying on the accent alone.border-t with last:border-b, which closes the list at the bottom rather than leaving it open.active.media is replaced outright, so any piece holding its own internal state resets when you switch away and back.