# 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/saas106. 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. [SaaS](/blocks/saas)
5. /
6. Product Tour Switcher
# Product Tour Switcher[PRO](/pricing)
Product tour driven by pill tabs: each step pairs an explanation and a pill CTA with a soft interface panel built from divs, listing labelled rows with their value and current status.
ViewCodeDocs
Base UI
`npx shadcn add https://ui.beste.co/r-base/saas106`
## Saas106: Product Tour Switcher
Product tour driven by pill tabs. Each step pairs an explanation and a pill CTA with a soft interface panel built entirely from divs, listing labelled rows with their value and current status, so the tour needs no screenshots to stay current.
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/saas106?email=YOUR_EMAIL&license_key=YOUR_KEY"
```
**Base UI flavor**
bashCopy
```
npx shadcn add "https://ui.beste.co/r-base/saas106?email=YOUR_EMAIL&license_key=YOUR_KEY"
```
This installs the block to `components/beste/block/saas106.tsx` plus the `badge7` eyebrow and `button12` pill button it uses.
### Quick start
The installed file exports `saas106Demo` alongside the block: the exact props behind the preview above. Spread it to get a working tour in one line.
tsxCopy
```
import { Saas106, saas106Demo } from "@/components/beste/block/saas106";
export default function Page() {
return ;
}
```
Then replace the demo with your own props. Written out, a trimmed setup looks like this:
tsxCopy
```
import { Saas106 } from "@/components/beste/block/saas106";
export default function Page() {
return (
);
}
```
### Props
| Prop | Type | Default | Description |
| ----------- | ----------------- | ------- | ----------------------------------------------------------- |
| badge | { label: string } | – | Eyebrow label rendered as a Badge7 |
| heading | string | – | Section heading in the left column |
| description | string | – | Supporting paragraph, right-aligned from md up |
| steps | TourStep\[\] | \[\] | Each step is one pill tab, one explanation and one panel |
| button | ActionButton | – | Pill CTA under the active explanation, rendered as Button12 |
| className | string | – | Extra classes for the outer |
tsCopy
```
type TourStep = {
label: string;
title: string;
description: string;
panelTitle: string;
panelCaption: string;
rows: PanelRow[];
};
type PanelRow = {
title: string;
value: string;
status: string;
};
type ActionButton = {
label: string;
href: string;
};
```
### Behavior notes
* The active step lives in `useState(0)`, so the first step renders on the server and the panel is populated before hydration.
* Tabs are `