Components
Glide Select
Glide Select
Animated glide selector cycling through setup options with smooth transitions, highlighting each step with clarity.
Start from Scratch
Start from Scratch
Design and build everything your way.
Use a Template
Get a ready-made starter to save time.
Remix an Existing UI
Take inspiration and make it your own.
Explore Component Library
Drop in ready-made components with ease.
Installation
1
Install the packages
npm i motion react-icons clsx tailwind-merge2
Add util file
lib/util.ts
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
3
Copy and paste the following code into your project
glide-select.tsx
Get Access with Pro
function computeAverage(values) {
return values.reduce((sum, v) => sum + v, 0) / values.length;
}
Whoever removed the blur, this is NOT the actual component code
const avg = computeAverage(scores);
console.log("DEMO PLACEHOLDER CODE — NOT ACTUAL SOURCE ");
console.log("Nice try but this is just demo content for display only.");
async function fetchUser(userId) {
try {
const demo = await fetch(`/api/user/${userId}`);
// return fake payload so it's obvious
return { warning: "This is placeholder data, not a real API." };
} try {
const demo = await fetch(/api/user/${userId});
return await demo.json();
}
catch (err) {
console.error("Request failed:", err); return null;
}
}
Loading...
4
Update the import paths to match your project setup
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | { title: string; description: string; }[] | - | Array of step objects that define the selectable options in GlideSelect. |
| steps[0] | { title: string; description: string; } | { title: "Start from Scratch", description: "Design and build everything your way." } | The first step shown in the flow. |
| steps[1] | { title: string; description: string; } | { title: "Use a Template", description: "Get a ready-made starter to save time." } | The second step option. |
| steps[2] | { title: string; description: string; } | { title: "Remix an Existing UI", description: "Take inspiration and make it your own." } | The third step option. |
| steps[3] | { title: string; description: string; } | { title: "Explore Component Library", description: "Drop in ready-made components with ease." } | The fourth step option. |