Select New · experimental

<GoopSelect v-model="fruit">
  <GoopSelectTrigger class="w-44">
    <GoopSelectValue placeholder="Pick a fruit" />
  </GoopSelectTrigger>
  <GoopSelectContent>
    <GoopSelectItem v-for="f in fruits" :key="f" :value="f">{{ f }}</GoopSelectItem>
  </GoopSelectContent>
</GoopSelect>

GoopSelect wraps the same reka-ui Select primitive as shadcn-vue's Select, with the same API. Keyboard navigation, typeahead, focus handling, form submission, and positioning work the same. Swap the imports and you're done.

Installation#

Nuxt#

pnpm add @goopui/nuxt

export default defineNuxtConfig({
  modules: ['@goopui/nuxt'],
})

The module auto-imports every GoopSelect* part, adds goop.css, and points Tailwind at the component classes. It needs Tailwind CSS v4 and the shadcn tokens (--popover, --popover-foreground, --accent, --input, --ring, --radius).

Vue#

pnpm add @goopui/vue

@import "tailwindcss";
@import "@goopui/vue/goop.css";

Usage#

<script setup lang="ts">
// Nuxt auto-imports these. In plain Vue, import them:
import { ref } from 'vue'
import {
  GoopSelect,
  GoopSelectContent,
  GoopSelectGroup,
  GoopSelectItem,
  GoopSelectLabel,
  GoopSelectTrigger,
  GoopSelectValue,
} from '@goopui/vue'

const fruit = ref('Blueberry')
</script>

<template>
  <GoopSelect v-model="fruit">
    <GoopSelectTrigger class="w-44">
      <GoopSelectValue placeholder="Pick a fruit" />
    </GoopSelectTrigger>
    <GoopSelectContent>
      <GoopSelectGroup>
        <GoopSelectLabel>Fruits</GoopSelectLabel>
        <GoopSelectItem value="Apple">Apple</GoopSelectItem>
        <GoopSelectItem value="Banana">Banana</GoopSelectItem>
        <GoopSelectItem value="Blueberry">Blueberry</GoopSelectItem>
      </GoopSelectGroup>
    </GoopSelectContent>
  </GoopSelect>
</template>

The parts are GoopSelect, Trigger, Value, Content, Group, Label, Item, ItemText, Separator, ScrollUpButton, and ScrollDownButton, each prefixed with GoopSelect. All the goo lives on GoopSelectContent.

Behavior#

• Bloom. The list pools from a single droplet (or a few that fuse, bloomStart="merge"), spreads out with a lobed edge, overshoots, and wobbles to rest. Then it splashes drops all around, kept off the trigger (openSlosh, openDrips).
• Highlight. The highlighted item's background is a goo blob. It slides between items with a stretch and a neck, overshoots when it lands, and follows the keyboard as well as the pointer (highlight, momentum, wobble).
• Follow the pointer. As the pointer moves along an item, the blob's swell leans toward it with a little lag (followPointer).
• Choose. Picking an item squishes the blob (pop), sets the value at once, and closes the list once the pop has played. The new item's check mark plops in: it falls in small, squashes flat as it lands, and jiggles back to round (plop).
• Close. The list pulls in, wobbles, and shrinks back to where it bloomed from (closeSlosh).
• Content stays sharp. The list's background, ring, and shadow are drawn on an aria-hidden surface behind the items, so the text is never filtered.

Position and bloom origin#

position is reka-ui's. With item-aligned (the default, like shadcn), the list is laid over the trigger with the selected item on top of it, and it blooms out of that item, so the list grows from the value you clicked. With popper, the list sits below the trigger like a menu and blooms from its own center:

<GoopSelectContent>...</GoopSelectContent>                    <!-- item-aligned: blooms from the selected item -->
<GoopSelectContent position="popper">...</GoopSelectContent>  <!-- blooms from its center -->

bloomFrom overrides where the bloom starts: 'auto' (the default, as above), 'selected', or 'center'. Close shrinks back to the same spot.

<GoopSelectContent bloom-from="center">...</GoopSelectContent>

Surface color#

A select trigger is an outlined field, so its color isn't the list's. Unlike Popover and Dropdown Menu, the list defaults to surface="popover": shadcn's popover tokens. 'trigger' takes the trigger's background and text color, and any CSS color works too:

<GoopSelectContent>...</GoopSelectContent>                                <!-- 'popover' (default) -->
<GoopSelectContent surface="trigger">...</GoopSelectContent>
<GoopSelectContent surface="oklch(0.62 0.19 150)">...</GoopSelectContent>

Turning parts off#

Every effect is its own boolean, and they all default to on:

<GoopSelectContent :plop="false">...</GoopSelectContent>              <!-- the check mark just appears -->
<GoopSelectContent :follow-pointer="false">...</GoopSelectContent>    <!-- the blob stays centred -->
<GoopSelectContent :highlight="false">...</GoopSelectContent>         <!-- shadcn's flat highlight -->
<GoopSelectContent :open-drips="false">...</GoopSelectContent>        <!-- no splash -->

Plain shadcn#

:goo="false" renders exactly shadcn's SelectContent, with its own enter and exit animation:

<GoopSelectContent :goo="false">...</GoopSelectContent>

Driving it from code#

GoopSelectContent exposes its engine handle as handle (null before it mounts, or when goo is off). The list only exists while open.

Props#

The root, trigger, value, group, label, item, separator, and scroll buttons take shadcn-vue's props. GoopSelectTrigger also takes size: 'default' | 'sm', like shadcn. GoopSelectContent takes reka-ui's SelectContent props (position, side, align, sideOffset, and the rest), class, and these goo props. Defaults are position="item-aligned" and align="center".

Accessibility#

Keyboard navigation, typeahead, focus handling, form submission, and ARIA attributes come from reka-ui. The goo surface and the highlight blob are aria-hidden and can't be clicked, and the items are never filtered. Under reduced motion the list opens and closes plainly: it keeps its goo shape and color, but the bloom, slosh, and splash are off, the highlight snaps between items, and there's no pop and no plop. See Accessibility & reduced motion.