feat(ui): add shadcn-vue Select components #8205
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Amp-Thread-ID: https://ampcode.com/threads/T-019bcae2-7722-75dc-9f77-d7a044654c89 Co-authored-by: Amp <[email protected]>
Contributor
📝 WalkthroughWalkthroughAdds a new Select component suite (Vue wrappers around reka-ui primitives), accompanying Storybook stories demonstrating usage patterns, and a new AGENTS.md with UI component development guidelines. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant User as User
participant Trigger as SelectTrigger
participant Root as Select (wrapper)
participant Content as SelectContent/Portal
participant Viewport as SelectViewport
participant Parent as Parent Component
User->>Trigger: click
Trigger->>Root: emit open request
Root->>Content: mount/open
Content->>Viewport: render items
User->>Viewport: select item
Viewport->>Root: emit selection (model update)
Root->>Parent: update v-model / emit update:modelValue
Parent->>Root: react to value change
Possibly related PRs
Suggested reviewers
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 01/21/2026, 06:41:01 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Tests: ✅ PassedResults: 507 passed, 0 failed, 0 flaky, 8 skipped (Total: 515) 📊 Browser Reports
|
Contributor
Author
|
(Split out from the Model Info Panel PR) |
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 22.4 kB (baseline 22.4 kB) • ⚪ 0 BMain entry bundles and manifests
Status: 1 added / 1 removed Graph Workspace — 1.02 MB (baseline 1.02 MB) • ⚪ 0 BGraph editor runtime, canvas, workflow orchestration
Views & Navigation — 80.7 kB (baseline 80.7 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Panels & Settings — 430 kB (baseline 430 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
User & Accounts — 3.94 kB (baseline 3.94 kB) • ⚪ 0 BAuthentication, profile, and account management bundles
Editors & Dialogs — 2.8 kB (baseline 2.8 kB) • ⚪ 0 BModals, dialogs, drawers, and in-app editors
UI Components — 32.8 kB (baseline 32.8 kB) • ⚪ 0 BReusable component library chunks
Data & Services — 3.04 MB (baseline 3.04 MB) • ⚪ 0 BStores, services, APIs, and repositories
Utilities & Hooks — 18.8 kB (baseline 18.8 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Vendor & Third-Party — 10.4 MB (baseline 10.4 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 6.28 MB (baseline 6.28 MB) • ⚪ 0 BBundles that do not match a named category
|
dosubot
bot
added
the
size:XL
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Fix all issues with AI agents
In `@src/components/ui/select/Select.stories.ts`:
- Around line 33-67: The story's local v-model ref in Default setup is
initialized from args.modelValue but isn't synced with Storybook controls;
import and call useArgs inside the render/setup, get the args and updateArgs
(useArgs) and replace the static initialization of value with a reactive ref
that both watches storybook args to update itself and watches value to call
updateArgs({ modelValue: newValue }) so control changes reflect selection and
the onUpdate:modelValue action fires; update the Default story's setup (and the
other stories listed) to use useArgs, value, updateArgs and watch to
bi-directionally sync modelValue between Storybook args and the local ref.
In `@src/components/ui/select/Select.vue`:
- Around line 1-9: The file is suppressing vue/no-unused-properties for the
props variable; remove that lint suppression by passing defineProps directly
into useForwardPropsEmits so props is considered used. Replace the separate
const props = defineProps<SelectRootProps>() and const emits =
defineEmits<SelectRootEmits>() + const forwarded = useForwardPropsEmits(props,
emits) pattern with a direct call that forwards defineProps(...) and
defineEmits(...) into useForwardPropsEmits (i.e., call
useForwardPropsEmits(defineProps<SelectRootProps>(),
defineEmits<SelectRootEmits>())) so the props are used and the eslint disable
can be removed while keeping SelectRoot/useForwardPropsEmits intact.
In `@src/components/ui/select/SelectItem.vue`:
- Around line 33-35: The decorative check icon inside SelectItemIndicator should
be hidden from assistive tech; update the <i class="icon-[lucide--check]
text-base-foreground" /> element (inside SelectItemIndicator) to be decorative
by adding aria-hidden="true" (and optionally role="presentation") so screen
readers do not announce it.
In `@src/components/ui/select/SelectValue.vue`:
- Line 5: Replace the single const props = defineProps<SelectValueProps>() with
the reactive destructuring pattern used by sibling components, e.g. const {
...restProps } = defineProps<SelectValueProps>(), and then update the component
template to reference restProps instead of props so the prop handling matches
other Select wrappers (locate the defineProps call and usages of props in
SelectValue.vue and swap them to the restProps destructured variable).
AustinMroz
previously approved these changes
Jan 21, 2026
Collaborator
AustinMroz
left a comment
AustinMroz
left a comment
There was a problem hiding this comment.
I'm sad to see the Scroll Up/Down buttons over a scrollbar, but the code and functionality both look great
| v-bind="{ ...forwarded, ...$attrs }" | ||
| :class=" | ||
| cn( | ||
| 'relative z-3000 max-h-96 min-w-32 overflow-hidden', |
Collaborator
There was a problem hiding this comment.
Popover can run off screen under extreme resolution constraints. max-h-(--reka-select-content-available-height) is an option, but I think I prefer the current fixed height. It keeps the size reasonable under normal usage
Contributor
Author
There was a problem hiding this comment.
Discussed this elsewhere. I agree this is something that could be worth addressing later. I'll keep it in mind.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
DrJKL
added
needs-backport
github-actions bot
pushed a commit
that referenced
this pull request
Jan 22, 2026
## Summary Adds shadcn-vue Select components built on Reka UI primitives with design system styling. ## Changes **New Components** (`src/components/ui/select/`): - `Select.vue` - Root wrapper using `SelectRoot` from Reka UI - `SelectTrigger.vue` - Styled trigger with chevron icon - `SelectContent.vue` - Dropdown content with scroll buttons, z-index 3000 for PrimeVue dialog compatibility - `SelectItem.vue` - Individual option with check icon - `SelectGroup.vue`, `SelectLabel.vue`, `SelectSeparator.vue` - Grouping support - `SelectScrollUpButton.vue`, `SelectScrollDownButton.vue` - Overflow navigation - `SelectValue.vue` - Placeholder/value display **Styling**: - Uses design tokens (`bg-secondary-background`, `text-muted-foreground`, `border-border-default`) - Iconify icons via `icon-[lucide--*]` classes - Smooth transitions and focus states **Documentation**: - Comprehensive Storybook stories covering all variants - `AGENTS.md` with component creation guidelines ## Testing - [x] Storybook stories work correctly - [x] Components build without errors ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8205-feat-ui-add-shadcn-vue-Select-components-2ef6d73d365081fd994ddb1123c063e7) by [Unito](https://www.unito.io) --------- Co-authored-by: Amp <[email protected]> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Member
github-actions
bot
removed
the
needs-backport
DrJKL
added a commit
that referenced
this pull request
Jan 22, 2026
Backport of #8205 to `cloud/1.37` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8234-backport-cloud-1-37-feat-ui-add-shadcn-vue-Select-components-2f06d73d365081eb9437d7ef7487ca05) by [Unito](https://www.unito.io) Co-authored-by: Alexander Brown <[email protected]> Co-authored-by: Amp <[email protected]> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
godwiniheuwa
pushed a commit
to godwiniheuwa/ComfyUI_frontend
that referenced
this pull request
Jan 22, 2026
## Summary Adds shadcn-vue Select components built on Reka UI primitives with design system styling. ## Changes **New Components** (`src/components/ui/select/`): - `Select.vue` - Root wrapper using `SelectRoot` from Reka UI - `SelectTrigger.vue` - Styled trigger with chevron icon - `SelectContent.vue` - Dropdown content with scroll buttons, z-index 3000 for PrimeVue dialog compatibility - `SelectItem.vue` - Individual option with check icon - `SelectGroup.vue`, `SelectLabel.vue`, `SelectSeparator.vue` - Grouping support - `SelectScrollUpButton.vue`, `SelectScrollDownButton.vue` - Overflow navigation - `SelectValue.vue` - Placeholder/value display **Styling**: - Uses design tokens (`bg-secondary-background`, `text-muted-foreground`, `border-border-default`) - Iconify icons via `icon-[lucide--*]` classes - Smooth transitions and focus states **Documentation**: - Comprehensive Storybook stories covering all variants - `AGENTS.md` with component creation guidelines ## Testing - [x] Storybook stories work correctly - [x] Components build without errors ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8205-feat-ui-add-shadcn-vue-Select-components-2ef6d73d365081fd994ddb1123c063e7) by [Unito](https://www.unito.io) --------- Co-authored-by: Amp <[email protected]> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Adds shadcn-vue Select components built on Reka UI primitives with design system styling.
Changes
New Components (
src/components/ui/select/):Select.vue- Root wrapper usingSelectRootfrom Reka UISelectTrigger.vue- Styled trigger with chevron iconSelectContent.vue- Dropdown content with scroll buttons, z-index 3000 for PrimeVue dialog compatibilitySelectItem.vue- Individual option with check iconSelectGroup.vue,SelectLabel.vue,SelectSeparator.vue- Grouping supportSelectScrollUpButton.vue,SelectScrollDownButton.vue- Overflow navigationSelectValue.vue- Placeholder/value displayStyling:
bg-secondary-background,text-muted-foreground,border-border-default)icon-[lucide--*]classesDocumentation:
AGENTS.mdwith component creation guidelinesTesting
┆Issue is synchronized with this Notion page by Unito