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';

/**
 * 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>;
}

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

/**
 * 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({ ...props }: Backdrop.Props) {
  return <SelectPrimitive.Backdrop 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>;
}

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

/**
 * 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({ ...props }: Popup.Props) {
  return <SelectPrimitive.Popup data-slot="select-popup" {...props} />;
}

/**
 * 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';/** * 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>;}export function Trigger({ ...props }: Trigger.Props) {  return <SelectPrimitive.Trigger data-slot="select-trigger" {...props} />;}/** * 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({ ...props }: Backdrop.Props) {  return <SelectPrimitive.Backdrop 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>;}export function Positioner({ ...props }: Positioner.Props) {  return <SelectPrimitive.Positioner data-slot="select-positioner" {...props} />;}/** * 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({ ...props }: Popup.Props) {  return <SelectPrimitive.Popup data-slot="select-popup" {...props} />;}/** * 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'; /** * 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>; } export function Trigger({ ...props }: Trigger.Props) { return <SelectPrimitive.Trigger data-slot="select-trigger" {...props} />; } /** * 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({ ...props }: Backdrop.Props) { return <SelectPrimitive.Backdrop 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>; } export function Positioner({ ...props }: Positioner.Props) { return <SelectPrimitive.Positioner data-slot="select-positioner" {...props} />; } /** * 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({ ...props }: Popup.Props) { return <SelectPrimitive.Popup data-slot="select-popup" {...props} />; } /** * 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

API Reference

On this page

Contribute