LiquiKit
GitHub

Select

A select whose list grows out of its button.

Base UISource

Installation#

pnpmnpmyarnbun
$ pnpm dlx shadcn@latest add @liquikit/select

Needs the @liquikit registry in your components.json. Set it up once.

Usage#

import { Select } from "@/components/liquikit/select"
<Select.Root items={sizes} defaultValue="medium">
  <Select.Trigger aria-label="Text size" />
  <Select.Popup>
    {sizes.map((size) => (
      <Select.Item key={size.value} value={size.value}>
        {size.label}
      </Select.Item>
    ))}
  </Select.Popup>
</Select.Root>

Pass items to Select.Root so the trigger can show the label of the chosen value.

Examples#

Groups#

API Reference#

Select.Root

PropTypeDefault
openboolean

Whether the popup is open. Pair it with onOpenChange to control it.

—

Also takes every prop of Base UI's select, plus className and style.

Select.Trigger

PropTypeDefault
theme"light" | "dark"

Light or dark glass. Falls back to the nearest GlassThemeProvider, then light.

—
lensPartial<LensProfile>

Overrides for the lens profile, such as thickness, bevel, ior and magnification.

—
liquidnumber

How far the glass squashes and stretches as it moves. 0 keeps it rigid.

—
variant"glass" | "prominent" | "clear"—
size"small" | "regular" | "large"—
iconboolean—
blockboolean—
tintstring

Colour of the glass body. Accepts any CSS colour.

—
refraction"interactive" | "always"

When the glass bends the page. interactive bends it while the component is pressed, dragged or focused, always bends it all the time.

"interactive"
placeholderReactNode

Shown until something is chosen.

—

Select.Popup

PropTypeDefault
sideBaseSelect.Positioner.Props["side"]

Which side of the trigger the popup opens on.

"bottom"
alignBaseSelect.Positioner.Props["align"]

How the popup lines up with its trigger along that side.

"start"
sideOffsetBaseSelect.Positioner.Props["sideOffset"]

Gap between the trigger and the popup, in pixels.

overTrigger
theme"light" | "dark"

Light or dark glass. Falls back to the nearest GlassThemeProvider, then light.

—
refraction"interactive" | "always"

When the glass bends the page. interactive bends it while the component is pressed, dragged or focused, always bends it all the time.

"interactive"
childrenReactNode

The content.

—

Also takes every prop of Base UI's select, plus className and style.

Segmented ControlSheet