Select Morph · paneui

Deploy region

Installation

pnpm dlx shadcn@latest add @paneui/select-morph

Usage

import { MorphSelect, MorphSelectContent, MorphSelectItem, MorphSelectTrigger, MorphSelectValue } from "@/components/ui/select-morph"

<MorphSelect items={items} defaultValue="tpe">
  <MorphSelectTrigger>
    <MorphSelectValue />
  </MorphSelectTrigger>
  <MorphSelectContent>
    <MorphSelectItem value="tpe">Taipei</MorphSelectItem>
    <MorphSelectItem value="tyo">Tokyo</MorphSelectItem>
  </MorphSelectContent>
</MorphSelect>

Composition

MorphSelect
├── MorphSelectTrigger
│   └── MorphSelectValue
└── MorphSelectContent
    ├── MorphSelectItem
    ├── MorphSelectSeparator
    └── MorphSelectGroup
        ├── MorphSelectLabel
        └── MorphSelectItem

Examples

Placeholder

With Icons

Disabled

Controlled

Use when other UI sets the value or opens the popup.

Motion

The popup grows from the trigger's size to its content height over 450ms. With reduced motion it cross-fades at full size.

Keyboard

Space, Enter and the arrow keys open it, arrows move between options, typing jumps to a match, Enter selects and Escape closes.

API Reference

Built on the Select primitive. Only the props this library adds or changes are listed; everything else passes through.

MorphSelect

Select.Root, re-exported unchanged. Also accepts every prop of Select.Root.

MorphSelectTrigger

The raised 40px trigger the popup grows out of. Renders a chevron after its children. Also accepts every prop of Select.Trigger.

MorphSelectValue

The selected label, truncated; muted while showing the placeholder. Also accepts every prop of Select.Value.

MorphSelectContent

Portal, positioner and popup laid over the trigger, with a mirrored header row and a scrollable list (max 18rem). Also accepts every prop of Select.Popup.

header= the current value: ReactNode; What the mirrored first row shows. Match it to your trigger's content.

Prop	Type	Default	Description
header	ReactNode	the current value	What the mirrored first row shows. Match it to your trigger's content.

data-side: bottom or top (after a collision flip); on top the box grows upward.
data-starting-style / data-ending-style: Present while the morph opens or closes.

Data attribute	Description
data-side	`bottom` or `top` (after a collision flip); on `top` the box grows upward.
data-starting-style / data-ending-style	Present while the morph opens or closes.

MorphSelectItem

An option row with a check indicator on the right. Also accepts every prop of Select.Item.

data-highlighted: Present on the keyboard or pointer highlighted row.
data-selected: Present on the selected row.

Data attribute	Description
data-highlighted	Present on the keyboard or pointer highlighted row.
data-selected	Present on the selected row.

MorphSelectGroup

Also accepts every prop of Select.Group.

MorphSelectLabel

Small muted heading for a group. Also accepts every prop of Select.GroupLabel.

MorphSelectSeparator

Also accepts every prop of Select.Separator.