Browse components
Glide Select
A segmented control whose highlight stretches like a drop of liquid as it glides to the new option, then snaps tight. Arrow keys move it.
Installation
npx shadcn@latest add @glint-ui/glide-selectFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/glide-select.json
Usage
import { GlideSelect } from "@/components/ui/glide-select";
const [range, setRange] = useState("Week");
<GlideSelect options={["Day", "Week", "Month", "Year"]} value={range} onValueChange={setRange} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| options | string[] | ["Day","Week","Month","Year"] | Option labels (also the values). |
| stretch | number | 0.6 | How much the highlight stretches while travelling. |
| label | string | "Time range" | Accessible name of the group. |
| color | ReactNode | — | Highlight color (defaults to the theme primary). |
| value | ReactNode | — | Controlled selected option. Pair with onValueChange. |
| defaultValue | ReactNode | — | Initial option when uncontrolled (defaults to the first). |
| onValueChange | ReactNode | — | Called with the newly selected option. |
| className | string | — | Extra classes for the root element. |