Components
Loading preview...
The Behavioral History Select is a smart, user-adaptive dropdown component built with shadcn UI that enhances the standard select experience by remembering user behavior. It dynamically tracks recently and frequently selected items, displaying them at the top of the list with visual indicators like badges or counts, allowing users to quickly access their most used choices. The component persists selection history via localStorage, making it adaptive across sessions, and its configurable fixed width ensures a stable, professional layout. With distinct sections for recent selections and other options, optional frequency markers, and a clean, modern interface, it’s highly reusable in forms, dashboards, multi-step workflows, and design systems—turning a simple dropdown into an intelligent, interactive, and visually informative selection tool.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/behavioral-history-select"use client";
import * as React from "react";
import { BehavioralHistorySelect, HistoryOption } from "@/components/ui/behavioral-history-select";
const options: HistoryOption[] = [
{ value: "react", label: "React" },
{ value: "nextjs", label: "Next.js" },
{ value: "vue", label: "Vue.js" },
{ value: "angular", label: "Angular" },
{ value: "svelte", label: "Svelte" },
{ value: "solid", label: "SolidJS" },
];
export default function DemoBehavioralHistorySelect () {
const [selected, setSelected] = React.useState<string>("");
return (
<div className="p-8 flex flex-col gap-6 items-start">
<h1 className="text-xl font-bold">Behavioral History Select Demo</h1>
<BehavioralHistorySelect
options={options}
label="Select a framework"
placeholder="Choose framework..."
onChange={setSelected}
maxHistory={3}
storageKey="framework_select_demo"
selectWidth="300px"
/>
{selected && (
<p>
Selected: <strong>{selected}</strong>
</p>
)}
</div>
);
};