The Interactive Visual Grid Select is a premium, highly configurable template and asset picker designed for modern web applications. Unlike traditional dropdowns, it presents options in a responsive grid with live visual previews, allowing users to make informed selections at a glance. The component features a searchable input within the dropdown, enabling instant filtering of templates, while keyboard navigation (arrow keys and Enter) allows fast, accessible interaction. Users can hover over options to see a larger preview on the side, and the selected template is highlighted for clarity. Additionally, a plus icon lets users quickly add custom images directly into the selection workflow. This component is ideal for use cases like theme pickers, dashboard layouts, or CMS template selection, offering a smooth, intuitive, and visually rich experience while remaining fully compliant with shadcn UI design principles.
"use client";
import VisualGridSelect from "@/components/ui/visual-grid-select";
const images = [
"https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/ruixen_moon.png",
"https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/ruixen_moon_2.png",
"https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/ruixen_hero_gradient.jpg",
];
const options = images.map((url, i) => ({
value: `template-${i + 1}`,
label: `Template ${i + 1}`,
previewUrl: url,
}));
export default function Page() {
const handleAddImage = (file: File) => {
alert(`Added new image: ${file.name}`);
};
return (
<div className="flex items-center justify-center p-4">
<div className="w-full max-w-3xl bg-white p-6 rounded-xl shadow border">
<h1 className="text-lg font-semibold mb-4">Interactive Visual Grid Select</h1>
<VisualGridSelect options={options} columns={3} onAddImage={handleAddImage} />
</div>
</div>
);
}
Part of Ruixen UI — browse the full library on 21st.dev.