Components
Loading preview...
A combo box that is theme‑aware (shadcn variables), fully accessible (ARIA + keyboard), supports single and multi‑select, async search, creatable options, grouping, badges, and blazing‑fast rendering with lightweight list virtualization
@Scottclayton3d
npx shadcn@latest add https://21st.dev/r/lovesickfromthe6ix/smart-combo-box"use client";
import * as React from "react";
import { SmartCombobox } from "@/components/ui/smart-combo-box";
type DemoOption = {
id: string;
label: string;
group?: string;
meta?: string;
};
const frameworks: DemoOption[] = [
{ id: "react", label: "React", group: "Frontend", meta: "Library" },
{ id: "vue", label: "Vue", group: "Frontend", meta: "Framework" },
{ id: "svelte", label: "Svelte", group: "Frontend", meta: "Compiler" },
{ id: "solid", label: "Solid", group: "Frontend", meta: "Signals" },
{ id: "next", label: "Next.js", group: "Full‑stack", meta: "SSR" },
{ id: "nuxt", label: "Nuxt", group: "Full‑stack", meta: "SSR" },
{ id: "remix", label: "Remix", group: "Full‑stack", meta: "SPA/SSR" },
{ id: "astro", label: "Astro", group: "Full‑stack", meta: "Islands" },
];
export default function DemoDefault() {
const [value, setValue] = React.useState<string[]>(["react", "next"]);
return (
<div className="mx-auto max-w-md space-y-3">
<h3 className="text-sm font-medium text-[hsl(var(--foreground))]">Pick your tools</h3>
<SmartCombobox
label="Frameworks"
placeholder="Search frameworks…"
options={frameworks}
multiple
value={value}
onValueChange={(v) => setValue(Array.isArray(v) ? v : [])}
header={<span>Popular frameworks</span>}
footer={<span>Tip: Type to filter, Enter to select.</span>}
emptyState={<span>No matches. Try a different keyword.</span>}
/>
</div>
);
}