The Multi-Dimensional Select is an advanced, interactive dropdown component built entirely with shadcn UI, designed to handle options with multiple attributes such as color, size, category, and popularity. Unlike traditional select fields, it integrates search, filtering, and sorting directly within the dropdown, allowing users to dynamically refine options based on any attribute before making a selection. Users can filter by one or more dimensions simultaneously, sort by metrics like popularity, and instantly see relevant results as they type. This creates a mini “search + filter + select” experience, making it ideal for applications that deal with complex datasets, product catalogs, or multi-faceted choices. Its dynamic and intuitive interface ensures high usability while providing a unique, feature-rich selection experience not commonly available in standard UI libraries.
"use client";
import MultiDimensionalSelect from "@/components/ui/multi-dimensional-select";
const sampleOptions = [
{ value: "1", label: "Apple Shirt", color: "Red", size: "M", category: "Clothing", popularity: 90 },
{ value: "2", label: "Banana Pants", color: "Yellow", size: "L", category: "Clothing", popularity: 70 },
{ value: "3", label: "Cherry Shoes", color: "Red", size: "S", category: "Footwear", popularity: 50 },
{ value: "4", label: "Avocado Hat", color: "Green", size: "M", category: "Accessories", popularity: 80 },
{ value: "5", label: "Blueberry Jacket", color: "Blue", size: "L", category: "Clothing", popularity: 60 },
];
export default function Page() {
return (
<div className="flex items-center justify-center">
<div className="p-6 bg-white rounded-2xl shadow-lg w-full max-w-md border">
<h1 className="text-xl font-semibold mb-4">Multi-Dimensional Select</h1>
<MultiDimensionalSelect options={sampleOptions} />
</div>
</div>
);
}
Part of Ruixen UI — browse the full library on 21st.dev.