A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code. Use this to build your own component library.
$ npx -y skills add unovue/shadcn-vue --agent claude-code
Run the curl in your terminal, the rest in Claude Code.
Repo: unovue/shadcn-vue
What's inside
A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code. Use this to build your own component library.

Visit http://shadcn-vue.com/docs to view the documentation.
Please read the contributing guide.
Licensed under the MIT license.
.editorconfig
.gitattributes
.github/
actions/
setup/
action.yml
FUNDING.yml
ISSUE_TEMPLATE/
bug-report.yml
config.yml
feature-request.yml
PULL_REQUEST_TEMPLATE.md
workflows/
pkg.pr.new-module.yaml
pkg.pr.new.yaml
publish.yaml
release.yaml
test.yaml
.gitignore
.vscode/
extensions.json
settings.json
apps/
v4/
__registry__/
index.ts
.gitignore
.wrangler/
deploy/
config.json
app.vue
assets/
css/
fonts.css
main.css
themes.css
components/
_internal/
sink/
AccordionDemo.vue
AlertDemo.vue
AlertDialogDemo.vue
AspectRatioDemo.vue
AvatarDemo.vue
BadgeDemo.vue
BreadcrumbDemo.vue
ButtonDemo.vue
CalendarDemo.vue
CardDemo.vue
CarouselDemo.vue
CheckboxDemo.vue
CollapsibleDemo.vue
ComboboxDemo.vue
CommandDemo.vue
ContextMenuDemo.vue
DataTableDemoColumn.vue
DatePickerDemo.vue
DialogDemo.vue
DrawerDemo.vue
DropdownMenuDemo.vue
FormDemo.vue
FormsDemo.vue
HoverCardDemo.vue
InputDemo.vue
LabelDemo.vue
MenubarDemo.vue
NavigationMenuDemo.vue
NavigationMenuItem.vue
PaginationDemo.vue
PinInputDemo.vue
PopoverDemo.vue
ProgressDemo.vue
RadioGroupDemo.vue
ResizableDemo.vue
ScrollAreaDemo.vue
SelectDemo.vue
SeparatorDemo.vue
SheetDemo.vue
SkeletonDemo.vue
SliderDemo.vue
SonnerDemo.vue
SwitchDemo.vue
TableDemo.vue
TabsDemo.vue
TextareaDemo.vue
ToggleDemo.vue
ToggleGroupDemo.vue
TooltipDemo.vue
ActionMenu.vue
Announcement.vue
BaseColorPicker.vue
BasePicker.vue
BlockDisplay.vue
BlocksNav.vue
BlockViewer.vue
BlockViewerCode.vue
BlockViewerFileTree.vue
BlockViewerIframe.vue
BlockViewerMobile.vue
BlockViewerToolbar.vue
BlockViewerTree.vue
BlockViewerView.vue
CarbonAds.vue
cards/
ActivityGoal.vue
Calendar.vue
Chat.vue
CookieSettings.vue
CreateAccount.vue
Demo.vue
ExerciseMinutes.vue
Forms.vue
PaymentMethod.vue
Payments.vue
ReportIssue.vue
Share.vue
Stats.vue
TeamMembers.vue
ChartColorPicker.vue
ChartDisplay.vue
ChartsNav.vue
ChartToolbar.vue
CodeBlockCommand.vue
Color.vue
ColorFormatSelector.vue
ColorIndicator.vue
ColorPalette.vue
ColorsNav.vue
command-menu/
CommandItem.vue
CommandMenu.vue
CommandMenuKbd.vue
ComponentPreviewTabs.vue
ComponentSource.vue
ComponentWrapper.vue
content/
ButtonA.vue
Callout.vue
CodeCollapsibleWrapper.vue
CodeTabs.vue
ComponentPreview.vue
ComponentsList.vue
LinkedCard.vue
ProseA.vue
ProseBlockQuote.vue
ProseCode.vue
ProseH1.vue
ProseH2.vue
ProseH3.vue
ProseH4.vue
ProseH5.vue
ProseH6.vue
ProseHr.vue
ProseImg.vue
ProseLi.vue
ProseOl.vue
ProseP.vue
ProsePre.vue
ProseStrong.vue
ProseTable.vue
ProseTd.vue
ProseTh.vue
ProseTr.vue
ProseUl.vue
RegistryDirectory.vue
Step.vue
Steps.vue
Tabs.vue
TabsContent.vue
TabsList.vue
TabsTrigger.vue
VueSchoolLink.vue
CopyButton.vue
CopyCodeButton.vue
CopyPreset.vue
CreateProjectDialog.vue
Customizer.vue
CustomizerCode.vue
CustomizerControls.vue
demo/
AccordionDemo.vue
AlertDemo.vue
AlertDestructive.vue
AlertDialogDemo.vue
AspectRatioDemo.vue
AttachmentDemo.vue
AttachmentGroupDemo.vue
AttachmentImageDemo.vue
AttachmentSizesDemo.vue
AttachmentStatesDemo.vue
AttachmentTriggerDemo.vue
AvatarDemo.vue
BadgeDemo.vue
BadgeDestructive.vue
BadgeOutline.vue
BadgeSecondary.vue
BreadcrumbCollapsedDemo.vue
BreadcrumbCustomSeparatorDemo.vue
BreadcrumbDemo.vue
BreadcrumbDropdownDemo.vue
BreadcrumbLinkDemo.vue
BreadcrumbResponsiveDemo.vue
BubbleAlignmentDemo.vue
BubbleCollapsibleDemo.vue
BubbleDemo.vue
BubbleGroupDemo.vue
BubbleLinksAndButtonsDemo.vue
BubblePopoverDemo.vue
BubbleReactionsDemo.vue
BubbleTooltipDemo.vue
BubbleVariantsDemo.vue
ButtonDefault.vue
ButtonDemo.vue
ButtonDestructive.vue
ButtonGhost.vue
ButtonGroupDemo.vue
ButtonGroupInputGroupDemo.vue
ButtonGroupNestedDemo.vue
ButtonGroupOrientationDemo.vue
ButtonGroupSeparatorDemo.vue
ButtonGroupSizeDemo.vue
ButtonGroupSplitDemo.vue
ButtonGroupWithDropdownMenuDemo.vue
ButtonGroupWithInputDemo.vue
ButtonGroupWithPopoverDemo.vue
ButtonGroupWithSelectDemo.vue
ButtonIcon.vue
ButtonLink.vue
ButtonLoading.vue
ButtonOutline.vue
ButtonRounded.vue
ButtonSecondary.vue
ButtonSize.vue
ButtonWithIcon.vue
CalendarCustomCellSize.vue
CalendarDateAndTimePicker.vue
CalendarDateBirth.vue
CalendarDemo.vue
CalendarNaturalLanguagePicker.vue
CalendarPersianDemo.vue
CalendarRangeDemo.vue
CalendarSystems.vue
CalendarYearAndMonthSelector.vue
CardDemo.vue
CarouselApi.vue
CarouselDemo.vue
CarouselOrientation.vue
CarouselPlugin.vue
CarouselSize.vue
CarouselSpacing.vue
ChartBarDemo.vue
ChartBarDemoAxis.vue
ChartBarDemoLegend.vue
ChartBarDemoTooltip.vue
ChartDemo.vue
CheckboxDemo.vue
CheckboxDisabled.vue
CollapsibleDemo.vue
ComboboxDemo.vue
ComboboxMultipleDemo.vue
ComboboxTimezoneDemo.vue
ComboboxUserDemo.vue
ComboboxWithListboxDemo.vue
CommandDemo.vue
ContextMenuDemo.vue
CREATED_COMPONENTS.md
DataTableDemo.vue
DatePickerDemo.vue
DialogCloseButton.vue
DialogDemo.vue
DialogForm.vue
DialogResponsive.vue
DrawerDemo.vue
DrawerScrollableContent.vue
DrawerSides.vue
DropdownMenuDemo.vue
EmptyAvatarDemo.vue
EmptyAvatarGroupDemo.vue
EmptyBackgroundDemo.vue
EmptyDemo.vue
EmptyInputGroupDemo.vue
EmptyOutlineDemo.vue
FieldCheckboxDemo.vue
FieldChoiceCardDemo.vue
FieldDemo.vue
FieldFieldsetDemo.vue
FieldGroupDemo.vue
FieldInputDemo.vue
FieldRadioDemo.vue
FieldResponsiveDemo.vue
FieldSelectDemo.vue
FieldSliderDemo.vue
FieldSwitchDemo.vue
FieldTextareaDemo.vue
FormDemo.vue
FormischArray.vue
FormischCheckbox.vue
FormischComplex.vue
FormischDemo.vue
FormischInput.vue
FormischRadioGroup.vue
FormischSelect.vue
FormischSwitch.vue
FormischTextarea.vue
HoverCardDemo.vue
index.ts
InputDemo.vue
InputDisabled.vue
InputFile.vue
InputForm.vue
InputFormAutoAnimate.vue
InputGroupDemo.vue
InputGroupWithButton.vue
InputGroupWithButtonGroup.vue
InputGroupWithCustomInput.vue
InputGroupWithDropdown.vue
InputGroupWithIcon.vue
InputGroupWithLabel.vue
InputGroupWithSpinner.vue
InputGroupWithText.vue
InputGroupWithTextarea.vue
InputGroupWithTooltip.vue
InputOTPControlledDemo.vue
InputOTPDemo.vue
InputOTPFormDemo.vue
InputOTPPatternDemo.vue
InputOTPSeparatorDemo.vue
InputWithButton.vue
InputWithLabel.vue
InputWithText.vue
ItemAvatarDemo.vue
ItemDemo.vue
ItemDropdownDemo.vue
ItemGroupDemo.vue
ItemHeaderDemo.vue
ItemIconDemo.vue
ItemImageDemo.vue
ItemLinkDemo.vue
ItemSizeDemo.vue
ItemVariantDemo.vue
KbdDemo.vue
KbdGroupDemo.vue
KbdWithButton.vue
KbdWithInputGroup.vue
KbdWithTooltip.vue
LabelDemo.vue
MarkerBorderDemo.vue
MarkerDemo.vue
MarkerIconDemo.vue
MarkerLinkButtonDemo.vue
MarkerSeparatorDemo.vue
MarkerShimmerDemo.vue
MarkerStatusDemo.vue
MarkerVariantsDemo.vue
MenubarDemo.vue
MessageActionsDemo.vue
MessageAvatarDemo.vue
MessageDemo.vue
MessageGroupDemo.vue
MessageHeaderAndFooterDemo.vue
MessageScrollerAnchoringDemo.vue
MessageScrollerAnimationDemo.vue
MessageScrollerCommandsDemo.vue
MessageScrollerDemo.vue
MessageScrollerGroupChatDemo.vue
MessageScrollerLoadHistoryDemo.vue
MessageScrollerOpeningPositionDemo.vue
MessageScrollerPreviousContextDemo.vue
MessageScrollerScrollableDemo.vue
MessageScrollerStreamingDemo.vue
MessageScrollerVisibilityDemo.vue
NativeSelectDemo.vue
NativeSelectDisabledDemo.vue
NativeSelectFormDemo.vue
NativeSelectGroupsDemo.vue
NativeSelectInputGroupDemo.vue
NativeSelectInvalidDemo.vue
NavigationMenuDemo.vue
NavigationMenuItem.vue
NumberFieldCurrencyDemo.vue
NumberFieldDecimalDemo.vue
NumberFieldDemo.vue
NumberFieldDisabledDemo.vue
NumberFieldFormDemo.vue
NumberFieldPercentageDemo.vue
PaginationDemo.vue
PinInputDemo.vue
PopoverDemo.vue
ProgressDemo.vue
QuestionnaireAnimatedDemo.vue
QuestionnaireCardDemo.vue
QuestionnaireConditionalDemo.vue
QuestionnaireControlledDemo.vue
QuestionnaireDemo.vue
QuestionnaireDialogDemo.vue
QuestionnaireFreeformDemo.vue
QuestionnaireMultipleDemo.vue
QuestionnaireNavigationStateDemo.vue
QuestionnaireProgressDemo.vue
QuestionnaireResumeDemo.vue
... 1600 moreShowing a partial view of a very large repo.
FAQ
shadcn-vue is a Claude Code plugin with 1 hand-picked skill for development work, indexed on Flowy. Install it with the command on its page. It includes shadcn-vue. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.