Select

'use client';

import * as Select from '@components/caprice-ui/select';

export default function SelectDemo() {
  return (
    <Select.Root>
      <Select.Value />
    </Select.Root>
  );
}

Installation

npx shadcn@latest add @caprice/select

npx shadcn@latest add @caprice/select

npm install @caprice-ui/react

npm install @caprice-ui/react

Install the following dependencies:

npm install @base-ui/react lucide-react

npm install @base-ui/react lucide-react

Add a cn helper

import { defineConfig, type VariantProps } from 'cva';
import { twMerge } from 'tailwind-merge';

export const {
  compose,
  cva,
  cx: cn,
} = defineConfig({
  hooks: {
    onComplete: (className: string) => twMerge(className),
  },
});

export type { VariantProps };

import { defineConfig, type VariantProps } from 'cva';import { twMerge } from 'tailwind-merge';export const {  compose,  cva,  cx: cn,} = defineConfig({  hooks: {    onComplete: (className: string) => twMerge(className),  },});export type { VariantProps };

Copy and paste the following code into your project.

import { Select as SelectPrimitive } from '@base-ui/react/select';
import { ChevronsUpDownIcon } from 'lucide-react';
import { cn } from '@/lib/utils';

/**
 * Groups all parts of the select.
 * Doesn’t render its own HTML element.
 *
 * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select)
 *
 * API Reference: [Base UI Select](https://base-ui.com/react/components/select#root)
 */
export namespace Root {
  export type Props = React.ComponentProps<typeof SelectPrimitive.Root>;
  export type State = SelectPrimitive.Root.State;
  export type Actions = SelectPrimitive.Root.Actions;
  export type ChangeEventDetails = SelectPrimitive.Root.ChangeEventDetails;
  export type ChangeEventReason = SelectPrimitive.Root.ChangeEventReason;
}

export function Root({ ...props }: Root.Props) {
  return <SelectPrimitive.Root data-slot="select" {...props} />;
}

/**
 * A button that opens the select popup.
 * Renders a `<button>` element.
 *
 * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select)
 *
 * API Reference: [Base UI Select](https://base-ui.com/react/components/select#trigger)
 */
export namespace Trigger {
  export type State = SelectPrimitive.Trigger.State;
  export type Props = React.ComponentProps<typeof SelectPrimitive.Trigger> & {
    /**
     * The size of the select trigger.
     * @default 'md'
     */
    size?: 'sm' | 'md' | 'lg';
  };
}

export function Trigger({ className, size = 'md', children, ...props }: Trigger.Props) {
  return (
    <SelectPrimitive.Trigger
      className={cn(
        "flex h-9 w-fit items-center justify-between gap-2 whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:hover:bg-input/50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
        size === 'sm' && 'h-8',
        size === 'lg' && 'h-10',
        className
      )}
      data-size={size}
      data-slot="select-trigger"
      {...props}
    >
      {children}
      <SelectPrimitive.Icon data-slot="select-icon">
        <ChevronsUpDownIcon className="opacity-50" />
      </SelectPrimitive.Icon>
    </SelectPrimitive.Trigger>
  );
}

/**
 * A text label of the currently selected item.
 * Renders a `<span>` element.
 *
 * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select)
 *
 * API Reference: [Base UI Select](https://base-ui.com/react/components/select#value)
 */
export namespace Value {
  export type State = SelectPrimitive.Value.State;
  export type Props = React.ComponentProps<typeof SelectPrimitive.Value>;
}

export function Value({ ...props }: Value.Props) {
  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
}

/**
 * An icon that indicates that the trigger button opens a select popup.
 * Renders a `<span>` element.
 *
 * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select)
 *
 * API Reference: [Base UI Select](https://base-ui.com/react/components/select#icon)
 */
export namespace Icon {
  export type State = SelectPrimitive.Icon.State;
  export type Props = React.ComponentProps<typeof SelectPrimitive.Icon>;
}

export function Icon({ ...props }: Icon.Props) {
  return <SelectPrimitive.Icon data-slot="select-icon" {...props} />;
}

/**
 * An overlay displayed beneath the menu popup.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select)
 *
 * API Reference: [Base UI Select](https://base-ui.com/react/components/select#backdrop)
 */
export namespace Backdrop {
  export type State = SelectPrimitive.Backdrop.State;
  export type Props = React.ComponentProps<typeof SelectPrimitive.Backdrop>;
}

export function Backdrop({ className, ...props }: Backdrop.Props) {
  return (
    <SelectPrimitive.Backdrop
      className={cn(
        'fixed inset-0 z-50 bg-black/40 backdrop-blur-[10px] transition-all duration-200 ease-in-out [[data-starting-style],[data-ending-style]]:opacity-0',
        className
      )}
      data-slot="select-backdrop"
      {...props}
    />
  );
}

/**
 * A portal element that moves the popup to a different part of the DOM.
 * By default, the portal element is appended to `<body>`.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select)
 *
 * API Reference: [Base UI Select](https://base-ui.com/react/components/select#portal)
 */
export namespace Portal {
  export interface State extends SelectPrimitive.Portal.State {}
  export type Props = React.ComponentProps<typeof SelectPrimitive.Portal>;
}

export function Portal({ ...props }: Portal.Props) {
  return <SelectPrimitive.Portal data-slot="select-portal" {...props} />;
}

/**
 * Positions the select popup.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select)
 *
 * API Reference: [Base UI Select](https://base-ui.com/react/components/select#positioner)
 */
export namespace Positioner {
  export type State = SelectPrimitive.Positioner.State;
  export type Props = React.ComponentProps<typeof SelectPrimitive.Positioner> & {
    /**
     * Whether to render a backdrop behind the positioner.
     * @default false
     */
    backdrop?: boolean;
  };
}

export function Positioner({ backdrop = false, className, ...props }: Positioner.Props) {
  return (
    <Portal>
      {backdrop && <Backdrop />}
      <SelectPrimitive.Positioner
        className={cn('z-50', className)}
        data-slot="select-positioner"
        {...props}
      />
    </Portal>
  );
}

/**
 * A popup that renders the select.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select)
 *
 * API Reference: [Base UI Select](https://base-ui.com/react/components/select#popup)
 */
export namespace Popup {
  export type State = SelectPrimitive.Popup.State;
  export type Props = React.ComponentProps<typeof SelectPrimitive.Popup>;
}

export function Popup({ children, ...props }: Popup.Props) {
  return (
    <SelectPrimitive.Popup data-slot="select-popup" {...props}>
      <ScrollUpArrow />
      <SelectPrimitive.List
        className="max-h-(--available-height) min-w-(--anchor-width) bg-popover"
        data-slot="select-list"
      >
        {children}
      </SelectPrimitive.List>
      <ScrollDownArrow />
    </SelectPrimitive.Popup>
  );
}

/**
 * A container for the select list.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select)
 *
 * API Reference: [Base UI Select](https://base-ui.com/react/components/select#list)
 */
export namespace List {
  export type State = SelectPrimitive.List.State;
  export type Props = React.ComponentProps<typeof SelectPrimitive.List>;
}

export function List({ ...props }: List.Props) {
  return <SelectPrimitive.List data-slot="select-list" {...props} />;
}

/**
 * Displays an element positioned against the select popup anchor.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select)
 *
 * API Reference: [Base UI Select](https://base-ui.com/react/components/select#arrow)
 */
export namespace Arrow {
  export type State = SelectPrimitive.Arrow.State;
  export type Props = React.ComponentProps<typeof SelectPrimitive.Arrow>;
}

export function Arrow({ ...props }: Arrow.Props) {
  return <SelectPrimitive.Arrow data-slot="select-arrow" {...props} />;
}

/**
 * An individual option in the select popup.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select)
 *
 * API Reference: [Base UI Select](https://base-ui.com/react/components/select#item)
 */
export namespace Item {
  export type State = SelectPrimitive.Item.State;
  export type Props = React.ComponentProps<typeof SelectPrimitive.Item>;
}

export function Item({ ...props }: Item.Props) {
  return <SelectPrimitive.Item data-slot="select-item" {...props} />;
}

/**
 * A text label of the select item.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select)
 *
 * API Reference: [Base UI Select](https://base-ui.com/react/components/select#item-text)
 */
export namespace ItemText {
  export type State = SelectPrimitive.ItemText.State;
  export type Props = React.ComponentProps<typeof SelectPrimitive.ItemText>;
}

export function ItemText({ ...props }: ItemText.Props) {
  return <SelectPrimitive.ItemText data-slot="select-item-text" {...props} />;
}

/**
 * Indicates whether the select item is selected.
 * Renders a `<span>` element.
 *
 * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select)
 *
 * API Reference: [Base UI Select](https://base-ui.com/react/components/select#item-indicator)
 */
export namespace ItemIndicator {
  export type State = SelectPrimitive.ItemIndicator.State;
  export type Props = React.ComponentProps<typeof SelectPrimitive.ItemIndicator>;
}

export function ItemIndicator({ ...props }: ItemIndicator.Props) {
  return <SelectPrimitive.ItemIndicator data-slot="select-item-indicator" {...props} />;
}

/**
 * Groups related select items with the corresponding label.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select)
 *
 * API Reference: [Base UI Select](https://base-ui.com/react/components/select#group)
 */
export namespace Group {
  export type State = SelectPrimitive.Group.State;
  export type Props = React.ComponentProps<typeof SelectPrimitive.Group>;
}

export function Group({ ...props }: Group.Props) {
  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
}

/**
 * An accessible label that is automatically associated with its parent group.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select)
 *
 * API Reference: [Base UI Select](https://base-ui.com/react/components/select#group-label)
 */
export namespace GroupLabel {
  export type State = SelectPrimitive.GroupLabel.State;
  export type Props = React.ComponentProps<typeof SelectPrimitive.GroupLabel>;
}

export function GroupLabel({ ...props }: GroupLabel.Props) {
  return <SelectPrimitive.GroupLabel data-slot="select-group-label" {...props} />;
}

/**
 * An element that scrolls the select popup up when hovered. Does not render when using touch input.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select)
 *
 * API Reference: [Base UI Select](https://base-ui.com/react/components/select#scroll-up-arrow)
 */
export namespace ScrollUpArrow {
  export type State = SelectPrimitive.ScrollUpArrow.State;
  export type Props = React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>;
}

export function ScrollUpArrow({ ...props }: ScrollUpArrow.Props) {
  return <SelectPrimitive.ScrollUpArrow data-slot="select-scroll-up-arrow" {...props} />;
}

/**
 * An element that scrolls the select popup down when hovered. Does not render when using touch input.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select)
 *
 * API Reference: [Base UI Select](https://base-ui.com/react/components/select#scroll-down-arrow)
 */
export namespace ScrollDownArrow {
  export type State = SelectPrimitive.ScrollDownArrow.State;
  export type Props = React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>;
}

export function ScrollDownArrow({ ...props }: ScrollDownArrow.Props) {
  return <SelectPrimitive.ScrollDownArrow data-slot="select-scroll-down-arrow" {...props} />;
}

/**
 * A separator element accessible to screen readers.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select)
 *
 * API Reference: [Base UI Select](https://base-ui.com/react/components/select#separator)
 */
export namespace Separator {
  export type State = SelectPrimitive.Separator.State;
  export type Props = React.ComponentProps<typeof SelectPrimitive.Separator>;
}

export function Separator({ ...props }: Separator.Props) {
  return <SelectPrimitive.Separator data-slot="select-separator" {...props} />;
}

import { Select as SelectPrimitive } from '@base-ui/react/select';import { ChevronsUpDownIcon } from 'lucide-react';import { cn } from '@/lib/utils';/** * Groups all parts of the select. * Doesn’t render its own HTML element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#root) */export namespace Root {  export type Props = React.ComponentProps<typeof SelectPrimitive.Root>;  export type State = SelectPrimitive.Root.State;  export type Actions = SelectPrimitive.Root.Actions;  export type ChangeEventDetails = SelectPrimitive.Root.ChangeEventDetails;  export type ChangeEventReason = SelectPrimitive.Root.ChangeEventReason;}export function Root({ ...props }: Root.Props) {  return <SelectPrimitive.Root data-slot="select" {...props} />;}/** * A button that opens the select popup. * Renders a `<button>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#trigger) */export namespace Trigger {  export type State = SelectPrimitive.Trigger.State;  export type Props = React.ComponentProps<typeof SelectPrimitive.Trigger> & {    /**     * The size of the select trigger.     * @default 'md'     */    size?: 'sm' | 'md' | 'lg';  };}export function Trigger({ className, size = 'md', children, ...props }: Trigger.Props) {  return (    <SelectPrimitive.Trigger      className={cn(        "flex h-9 w-fit items-center justify-between gap-2 whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:hover:bg-input/50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",        size === 'sm' && 'h-8',        size === 'lg' && 'h-10',        className      )}      data-size={size}      data-slot="select-trigger"      {...props}    >      {children}      <SelectPrimitive.Icon data-slot="select-icon">        <ChevronsUpDownIcon className="opacity-50" />      </SelectPrimitive.Icon>    </SelectPrimitive.Trigger>  );}/** * A text label of the currently selected item. * Renders a `<span>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#value) */export namespace Value {  export type State = SelectPrimitive.Value.State;  export type Props = React.ComponentProps<typeof SelectPrimitive.Value>;}export function Value({ ...props }: Value.Props) {  return <SelectPrimitive.Value data-slot="select-value" {...props} />;}/** * An icon that indicates that the trigger button opens a select popup. * Renders a `<span>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#icon) */export namespace Icon {  export type State = SelectPrimitive.Icon.State;  export type Props = React.ComponentProps<typeof SelectPrimitive.Icon>;}export function Icon({ ...props }: Icon.Props) {  return <SelectPrimitive.Icon data-slot="select-icon" {...props} />;}/** * An overlay displayed beneath the menu popup. * Renders a `<div>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#backdrop) */export namespace Backdrop {  export type State = SelectPrimitive.Backdrop.State;  export type Props = React.ComponentProps<typeof SelectPrimitive.Backdrop>;}export function Backdrop({ className, ...props }: Backdrop.Props) {  return (    <SelectPrimitive.Backdrop      className={cn(        'fixed inset-0 z-50 bg-black/40 backdrop-blur-[10px] transition-all duration-200 ease-in-out [[data-starting-style],[data-ending-style]]:opacity-0',        className      )}      data-slot="select-backdrop"      {...props}    />  );}/** * A portal element that moves the popup to a different part of the DOM. * By default, the portal element is appended to `<body>`. * Renders a `<div>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#portal) */export namespace Portal {  export interface State extends SelectPrimitive.Portal.State {}  export type Props = React.ComponentProps<typeof SelectPrimitive.Portal>;}export function Portal({ ...props }: Portal.Props) {  return <SelectPrimitive.Portal data-slot="select-portal" {...props} />;}/** * Positions the select popup. * Renders a `<div>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#positioner) */export namespace Positioner {  export type State = SelectPrimitive.Positioner.State;  export type Props = React.ComponentProps<typeof SelectPrimitive.Positioner> & {    /**     * Whether to render a backdrop behind the positioner.     * @default false     */    backdrop?: boolean;  };}export function Positioner({ backdrop = false, className, ...props }: Positioner.Props) {  return (    <Portal>      {backdrop && <Backdrop />}      <SelectPrimitive.Positioner        className={cn('z-50', className)}        data-slot="select-positioner"        {...props}      />    </Portal>  );}/** * A popup that renders the select. * Renders a `<div>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#popup) */export namespace Popup {  export type State = SelectPrimitive.Popup.State;  export type Props = React.ComponentProps<typeof SelectPrimitive.Popup>;}export function Popup({ children, ...props }: Popup.Props) {  return (    <SelectPrimitive.Popup data-slot="select-popup" {...props}>      <ScrollUpArrow />      <SelectPrimitive.List        className="max-h-(--available-height) min-w-(--anchor-width) bg-popover"        data-slot="select-list"      >        {children}      </SelectPrimitive.List>      <ScrollDownArrow />    </SelectPrimitive.Popup>  );}/** * A container for the select list. * Renders a `<div>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#list) */export namespace List {  export type State = SelectPrimitive.List.State;  export type Props = React.ComponentProps<typeof SelectPrimitive.List>;}export function List({ ...props }: List.Props) {  return <SelectPrimitive.List data-slot="select-list" {...props} />;}/** * Displays an element positioned against the select popup anchor. * Renders a `<div>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#arrow) */export namespace Arrow {  export type State = SelectPrimitive.Arrow.State;  export type Props = React.ComponentProps<typeof SelectPrimitive.Arrow>;}export function Arrow({ ...props }: Arrow.Props) {  return <SelectPrimitive.Arrow data-slot="select-arrow" {...props} />;}/** * An individual option in the select popup. * Renders a `<div>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#item) */export namespace Item {  export type State = SelectPrimitive.Item.State;  export type Props = React.ComponentProps<typeof SelectPrimitive.Item>;}export function Item({ ...props }: Item.Props) {  return <SelectPrimitive.Item data-slot="select-item" {...props} />;}/** * A text label of the select item. * Renders a `<div>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#item-text) */export namespace ItemText {  export type State = SelectPrimitive.ItemText.State;  export type Props = React.ComponentProps<typeof SelectPrimitive.ItemText>;}export function ItemText({ ...props }: ItemText.Props) {  return <SelectPrimitive.ItemText data-slot="select-item-text" {...props} />;}/** * Indicates whether the select item is selected. * Renders a `<span>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#item-indicator) */export namespace ItemIndicator {  export type State = SelectPrimitive.ItemIndicator.State;  export type Props = React.ComponentProps<typeof SelectPrimitive.ItemIndicator>;}export function ItemIndicator({ ...props }: ItemIndicator.Props) {  return <SelectPrimitive.ItemIndicator data-slot="select-item-indicator" {...props} />;}/** * Groups related select items with the corresponding label. * Renders a `<div>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#group) */export namespace Group {  export type State = SelectPrimitive.Group.State;  export type Props = React.ComponentProps<typeof SelectPrimitive.Group>;}export function Group({ ...props }: Group.Props) {  return <SelectPrimitive.Group data-slot="select-group" {...props} />;}/** * An accessible label that is automatically associated with its parent group. * Renders a `<div>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#group-label) */export namespace GroupLabel {  export type State = SelectPrimitive.GroupLabel.State;  export type Props = React.ComponentProps<typeof SelectPrimitive.GroupLabel>;}export function GroupLabel({ ...props }: GroupLabel.Props) {  return <SelectPrimitive.GroupLabel data-slot="select-group-label" {...props} />;}/** * An element that scrolls the select popup up when hovered. Does not render when using touch input. * Renders a `<div>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#scroll-up-arrow) */export namespace ScrollUpArrow {  export type State = SelectPrimitive.ScrollUpArrow.State;  export type Props = React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>;}export function ScrollUpArrow({ ...props }: ScrollUpArrow.Props) {  return <SelectPrimitive.ScrollUpArrow data-slot="select-scroll-up-arrow" {...props} />;}/** * An element that scrolls the select popup down when hovered. Does not render when using touch input. * Renders a `<div>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#scroll-down-arrow) */export namespace ScrollDownArrow {  export type State = SelectPrimitive.ScrollDownArrow.State;  export type Props = React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>;}export function ScrollDownArrow({ ...props }: ScrollDownArrow.Props) {  return <SelectPrimitive.ScrollDownArrow data-slot="select-scroll-down-arrow" {...props} />;}/** * A separator element accessible to screen readers. * Renders a `<div>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#separator) */export namespace Separator {  export type State = SelectPrimitive.Separator.State;  export type Props = React.ComponentProps<typeof SelectPrimitive.Separator>;}export function Separator({ ...props }: Separator.Props) {  return <SelectPrimitive.Separator data-slot="select-separator" {...props} />;}

Update the import paths to match your project setup.

Usage

import * as Select from "@/components/caprice-ui/select"

import * as Select from "@/components/caprice-ui/select"

import * as Select from "@caprice-ui/react/select"

import * as Select from "@caprice-ui/react/select"

import { Select as SelectPrimitive } from '@base-ui/react/select'; import { ChevronsUpDownIcon } from 'lucide-react'; import { cn } from '@/lib/utils'; /** * Groups all parts of the select. * Doesn’t render its own HTML element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#root) */ export namespace Root { export type Props = React.ComponentProps<typeof SelectPrimitive.Root>; export type State = SelectPrimitive.Root.State; export type Actions = SelectPrimitive.Root.Actions; export type ChangeEventDetails = SelectPrimitive.Root.ChangeEventDetails; export type ChangeEventReason = SelectPrimitive.Root.ChangeEventReason; } export function Root({ ...props }: Root.Props) { return <SelectPrimitive.Root data-slot="select" {...props} />; } /** * A button that opens the select popup. * Renders a `<button>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#trigger) */ export namespace Trigger { export type State = SelectPrimitive.Trigger.State; export type Props = React.ComponentProps<typeof SelectPrimitive.Trigger> & { /** * The size of the select trigger. * @default 'md' */ size?: 'sm' | 'md' | 'lg'; }; } export function Trigger({ className, size = 'md', children, ...props }: Trigger.Props) { return ( <SelectPrimitive.Trigger className={cn( "flex h-9 w-fit items-center justify-between gap-2 whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:hover:bg-input/50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0", size === 'sm' && 'h-8', size === 'lg' && 'h-10', className )} data-size={size} data-slot="select-trigger" {...props} > {children} <SelectPrimitive.Icon data-slot="select-icon"> <ChevronsUpDownIcon className="opacity-50" /> </SelectPrimitive.Icon> </SelectPrimitive.Trigger> ); } /** * A text label of the currently selected item. * Renders a `<span>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#value) */ export namespace Value { export type State = SelectPrimitive.Value.State; export type Props = React.ComponentProps<typeof SelectPrimitive.Value>; } export function Value({ ...props }: Value.Props) { return <SelectPrimitive.Value data-slot="select-value" {...props} />; } /** * An icon that indicates that the trigger button opens a select popup. * Renders a `<span>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#icon) */ export namespace Icon { export type State = SelectPrimitive.Icon.State; export type Props = React.ComponentProps<typeof SelectPrimitive.Icon>; } export function Icon({ ...props }: Icon.Props) { return <SelectPrimitive.Icon data-slot="select-icon" {...props} />; } /** * An overlay displayed beneath the menu popup. * Renders a `<div>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#backdrop) */ export namespace Backdrop { export type State = SelectPrimitive.Backdrop.State; export type Props = React.ComponentProps<typeof SelectPrimitive.Backdrop>; } export function Backdrop({ className, ...props }: Backdrop.Props) { return ( <SelectPrimitive.Backdrop className={cn( 'fixed inset-0 z-50 bg-black/40 backdrop-blur-[10px] transition-all duration-200 ease-in-out [[data-starting-style],[data-ending-style]]:opacity-0', className )} data-slot="select-backdrop" {...props} /> ); } /** * A portal element that moves the popup to a different part of the DOM. * By default, the portal element is appended to `<body>`. * Renders a `<div>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#portal) */ export namespace Portal { export interface State extends SelectPrimitive.Portal.State {} export type Props = React.ComponentProps<typeof SelectPrimitive.Portal>; } export function Portal({ ...props }: Portal.Props) { return <SelectPrimitive.Portal data-slot="select-portal" {...props} />; } /** * Positions the select popup. * Renders a `<div>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#positioner) */ export namespace Positioner { export type State = SelectPrimitive.Positioner.State; export type Props = React.ComponentProps<typeof SelectPrimitive.Positioner> & { /** * Whether to render a backdrop behind the positioner. * @default false */ backdrop?: boolean; }; } export function Positioner({ backdrop = false, className, ...props }: Positioner.Props) { return ( <Portal> {backdrop && <Backdrop />} <SelectPrimitive.Positioner className={cn('z-50', className)} data-slot="select-positioner" {...props} /> </Portal> ); } /** * A popup that renders the select. * Renders a `<div>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#popup) */ export namespace Popup { export type State = SelectPrimitive.Popup.State; export type Props = React.ComponentProps<typeof SelectPrimitive.Popup>; } export function Popup({ children, ...props }: Popup.Props) { return ( <SelectPrimitive.Popup data-slot="select-popup" {...props}> <ScrollUpArrow /> <SelectPrimitive.List className="max-h-(--available-height) min-w-(--anchor-width) bg-popover" data-slot="select-list" > {children} </SelectPrimitive.List> <ScrollDownArrow /> </SelectPrimitive.Popup> ); } /** * A container for the select list. * Renders a `<div>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#list) */ export namespace List { export type State = SelectPrimitive.List.State; export type Props = React.ComponentProps<typeof SelectPrimitive.List>; } export function List({ ...props }: List.Props) { return <SelectPrimitive.List data-slot="select-list" {...props} />; } /** * Displays an element positioned against the select popup anchor. * Renders a `<div>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#arrow) */ export namespace Arrow { export type State = SelectPrimitive.Arrow.State; export type Props = React.ComponentProps<typeof SelectPrimitive.Arrow>; } export function Arrow({ ...props }: Arrow.Props) { return <SelectPrimitive.Arrow data-slot="select-arrow" {...props} />; } /** * An individual option in the select popup. * Renders a `<div>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#item) */ export namespace Item { export type State = SelectPrimitive.Item.State; export type Props = React.ComponentProps<typeof SelectPrimitive.Item>; } export function Item({ ...props }: Item.Props) { return <SelectPrimitive.Item data-slot="select-item" {...props} />; } /** * A text label of the select item. * Renders a `<div>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#item-text) */ export namespace ItemText { export type State = SelectPrimitive.ItemText.State; export type Props = React.ComponentProps<typeof SelectPrimitive.ItemText>; } export function ItemText({ ...props }: ItemText.Props) { return <SelectPrimitive.ItemText data-slot="select-item-text" {...props} />; } /** * Indicates whether the select item is selected. * Renders a `<span>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#item-indicator) */ export namespace ItemIndicator { export type State = SelectPrimitive.ItemIndicator.State; export type Props = React.ComponentProps<typeof SelectPrimitive.ItemIndicator>; } export function ItemIndicator({ ...props }: ItemIndicator.Props) { return <SelectPrimitive.ItemIndicator data-slot="select-item-indicator" {...props} />; } /** * Groups related select items with the corresponding label. * Renders a `<div>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#group) */ export namespace Group { export type State = SelectPrimitive.Group.State; export type Props = React.ComponentProps<typeof SelectPrimitive.Group>; } export function Group({ ...props }: Group.Props) { return <SelectPrimitive.Group data-slot="select-group" {...props} />; } /** * An accessible label that is automatically associated with its parent group. * Renders a `<div>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#group-label) */ export namespace GroupLabel { export type State = SelectPrimitive.GroupLabel.State; export type Props = React.ComponentProps<typeof SelectPrimitive.GroupLabel>; } export function GroupLabel({ ...props }: GroupLabel.Props) { return <SelectPrimitive.GroupLabel data-slot="select-group-label" {...props} />; } /** * An element that scrolls the select popup up when hovered. Does not render when using touch input. * Renders a `<div>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#scroll-up-arrow) */ export namespace ScrollUpArrow { export type State = SelectPrimitive.ScrollUpArrow.State; export type Props = React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>; } export function ScrollUpArrow({ ...props }: ScrollUpArrow.Props) { return <SelectPrimitive.ScrollUpArrow data-slot="select-scroll-up-arrow" {...props} />; } /** * An element that scrolls the select popup down when hovered. Does not render when using touch input. * Renders a `<div>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#scroll-down-arrow) */ export namespace ScrollDownArrow { export type State = SelectPrimitive.ScrollDownArrow.State; export type Props = React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>; } export function ScrollDownArrow({ ...props }: ScrollDownArrow.Props) { return <SelectPrimitive.ScrollDownArrow data-slot="select-scroll-down-arrow" {...props} />; } /** * A separator element accessible to screen readers. * Renders a `<div>` element. * * Documentation: [Caprice UI Select](https://caprice-ui.com/docs/components/select) * * API Reference: [Base UI Select](https://base-ui.com/react/components/select#separator) */ export namespace Separator { export type State = SelectPrimitive.Separator.State; export type Props = React.ComponentProps<typeof SelectPrimitive.Separator>; } export function Separator({ ...props }: Separator.Props) { return <SelectPrimitive.Separator data-slot="select-separator" {...props} />; }

Installation

Install the following dependencies:

Add a cn helper

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage

Examples

On this page

Contribute