Select component
Installation
npx shadcn@latest add @caprice/selectnpm install @caprice-ui/reactInstall the following dependencies:
npm install @base-ui/react lucide-reactAdd 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 };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} />;}Update the import paths to match your project setup.
Usage
import * as Select from "@/components/caprice-ui/select"import * as Select from "@caprice-ui/react/select"