Trust Level Slider React component
Choose how much an AI bot can do alone: drag along the curve and see what it will handle, what it still asks about, and how many approvals that means a day.
About the Trust Level Slider component
Trust Level Slider turns the vague question of how much to trust a bot into a clear choice. Each step says exactly what the bot will do alone and what it will still bring to you.
The curve shows the cost of caution. Move right and the approvals you'd handle each day fall, so people can pick a level with the trade-off in front of them.
When to use it
Use it in agent settings, onboarding, and anywhere people set how independent automation should be.
Describe real behaviour at each level. Vague levels make the choice meaningless.
Installation
Add the Trust Level Slider component to your project with the shadcn CLI. It lands in components/trust-level-slider.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/trust-level-sliderProps
<TrustLevelSlider /> accepts 6 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "How much can Sift do alone?" |
| subtitle | string | "Support bot, across all customer tickets." |
| levels Lowest trust first. | { id: string; label: string; summary: string; approvals: number; alone: string[]; asks: string[] }[] | DEFAULT_LEVELS |
| defaultLevel | number | 1 |
| onChange | (level: TrustLevel) => void | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "How much can Sift do alone?"
- subtitlestringDefault: "Support bot, across all customer tickets."
- levels
Lowest trust first.
{ id: string; label: string; summary: string; approvals: number; alone: string[]; asks: string[] }[]Default: DEFAULT_LEVELS - defaultLevelnumberDefault: 1
- onChange(level: TrustLevel) => void
Trust Level Slider FAQ
- Does it enforce the level?
- No. onChange tells you the choice, and your backend applies it.
- Where do the approval numbers come from?
- From your data. Pass your own estimate for each level.
- Can I use the keyboard?
- Yes. Focus the chart and use the arrow keys.
- Does the height change between levels?
- No. Every level shares one grid cell.
