# V select 5

> Basic select

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/v-select-5).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-select-5
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-select-5-light-917c94b0622c3a92.png
- Registry item: https://ui.cnippet.dev/r/v-select-5.json
- Categories: select
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-select-5.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/select`

## Files

### `registry/default/variants/v-select-5.tsx`

```tsx
"use client";

import type { LucideIcon } from "lucide-react";
import {
  BellIcon,
  GlobeIcon,
  LockIcon,
  ShieldIcon,
  UserIcon,
  ZapIcon,
} from "lucide-react";
import {
  Select,
  SelectItem,
  SelectPopup,
  SelectTrigger,
  SelectValue,
} from "@/registry/default/ui/select";

type NavItem = { Icon: LucideIcon; label: string; value: string };

const navItems: NavItem[] = [
  { Icon: UserIcon, label: "Profile", value: "profile" },
  { Icon: BellIcon, label: "Notifications", value: "notifications" },
  { Icon: LockIcon, label: "Privacy", value: "privacy" },
  { Icon: ShieldIcon, label: "Security", value: "security" },
  { Icon: GlobeIcon, label: "Language & Region", value: "language" },
  { Icon: ZapIcon, label: "Integrations", value: "integrations" },
];

const placeholder = { label: "Go to settings", value: null };
const allItems = [placeholder, ...navItems];

export default function Component() {
  return (
    <Select items={allItems}>
      <SelectTrigger className="w-52">
        <SelectValue />
      </SelectTrigger>
      <SelectPopup>
        {navItems.map((item) => {
          const { Icon, label, value } = item;
          return (
            <SelectItem key={value} value={item}>
              <span className="flex items-center gap-2">
                <Icon aria-hidden="true" className="size-4" />
                {label}
              </span>
            </SelectItem>
          );
        })}
      </SelectPopup>
    </Select>
  );
}
```