Components

99 shadcn-style components — the pieces every block is built from, with the same classes and pixels in Vue and React. Each installs on its own, with everything it needs.

npx shadcn-vue@latest add @trame/button

• 
  accordion
  npx shadcn-vue add @trame/accordion
• 
  alert
  npx shadcn-vue add @trame/alert
• alert-dialog
  npx shadcn-vue add @trame/alert-dialog
• animated-beam
  npx shadcn-vue add @trame/animated-beam
• aspect-ratio
  npx shadcn-vue add @trame/aspect-ratio
• aurora-background
  npx shadcn-vue add @trame/aurora-background
• 
  avatar
  npx shadcn-vue add @trame/avatar
• avatar-stack
  npx shadcn-vue add @trame/avatar-stack
• 
  badge
  npx shadcn-vue add @trame/badge
• bento-grid
  npx shadcn-vue add @trame/bento-grid
• border-beam
  npx shadcn-vue add @trame/border-beam
• breadcrumb
  npx shadcn-vue add @trame/breadcrumb
• 
  button
  npx shadcn-vue add @trame/button
• button-group
  npx shadcn-vue add @trame/button-group
• calendar
  npx shadcn-vue add @trame/calendar
• 
  card
  npx shadcn-vue add @trame/card
• card-carousel
  npx shadcn-vue add @trame/card-carousel
• card-spotlight
  npx shadcn-vue add @trame/card-spotlight
• carousel
  npx shadcn-vue add @trame/carousel
• 
  checkbox
  npx shadcn-vue add @trame/checkbox
• choicebox
  npx shadcn-vue add @trame/choicebox
• collapsible
  npx shadcn-vue add @trame/collapsible
• combobox
  npx shadcn-vue add @trame/combobox
• command
  npx shadcn-vue add @trame/command
• compare
  npx shadcn-vue add @trame/compare
• container-scroll
  npx shadcn-vue add @trame/container-scroll
• context-menu
  npx shadcn-vue add @trame/context-menu
• date-field
  npx shadcn-vue add @trame/date-field
• date-picker
  npx shadcn-vue add @trame/date-picker
• date-range-picker
  npx shadcn-vue add @trame/date-range-picker
• device-frame
  npx shadcn-vue add @trame/device-frame
• dialog
  npx shadcn-vue add @trame/dialog
• direction-aware-hover
  npx shadcn-vue add @trame/direction-aware-hover
• drawer
  npx shadcn-vue add @trame/drawer
• dropdown-menu
  npx shadcn-vue add @trame/dropdown-menu
• empty
  npx shadcn-vue add @trame/empty
• expandable-gallery
  npx shadcn-vue add @trame/expandable-gallery
• field
  npx shadcn-vue add @trame/field
• file-upload
  npx shadcn-vue add @trame/file-upload
• filter-tabs
  npx shadcn-vue add @trame/filter-tabs
• hover-card
  npx shadcn-vue add @trame/hover-card
• icon-button
  npx shadcn-vue add @trame/icon-button
• images-slider
  npx shadcn-vue add @trame/images-slider
• 
  input
  npx shadcn-vue add @trame/input
• input-group
  npx shadcn-vue add @trame/input-group
• input-otp
  npx shadcn-vue add @trame/input-otp
• interactive-hover-button
  npx shadcn-vue add @trame/interactive-hover-button
• kbd
  npx shadcn-vue add @trame/kbd
• label
  npx shadcn-vue add @trame/label
• lens
  npx shadcn-vue add @trame/lens
• logo-cloud
  npx shadcn-vue add @trame/logo-cloud
• motion
  npx shadcn-vue add @trame/motion
• native-select
  npx shadcn-vue add @trame/native-select
• navigation-menu
  npx shadcn-vue add @trame/navigation-menu
• number-field
  npx shadcn-vue add @trame/number-field
• pagination
  npx shadcn-vue add @trame/pagination
• password-input
  npx shadcn-vue add @trame/password-input
• password-strength
  npx shadcn-vue add @trame/password-strength
• pattern-background
  npx shadcn-vue add @trame/pattern-background
• popover
  npx shadcn-vue add @trame/popover
• price
  npx shadcn-vue add @trame/price
• 
  progress
  npx shadcn-vue add @trame/progress
• progressive-blur
  npx shadcn-vue add @trame/progressive-blur
• quantity-field
  npx shadcn-vue add @trame/quantity-field
• radio-group
  npx shadcn-vue add @trame/radio-group
• range-calendar
  npx shadcn-vue add @trame/range-calendar
• rating
  npx shadcn-vue add @trame/rating
• ripple
  npx shadcn-vue add @trame/ripple
• scroll-area
  npx shadcn-vue add @trame/scroll-area
• search-field
  npx shadcn-vue add @trame/search-field
• select
  npx shadcn-vue add @trame/select
• separator
  npx shadcn-vue add @trame/separator
• sheet
  npx shadcn-vue add @trame/sheet
• shimmer-button
  npx shadcn-vue add @trame/shimmer-button
• sidebar
  npx shadcn-vue add @trame/sidebar
• skeleton
  npx shadcn-vue add @trame/skeleton
• 
  slider
  npx shadcn-vue add @trame/slider
• sonner
  npx shadcn-vue add @trame/sonner
• sparkline
  npx shadcn-vue add @trame/sparkline
• spinner
  npx shadcn-vue add @trame/spinner
• status-icon
  npx shadcn-vue add @trame/status-icon
• stepper
  npx shadcn-vue add @trame/stepper
• 
  switch
  npx shadcn-vue add @trame/switch
• table
  npx shadcn-vue add @trame/table
• 
  tabs
  npx shadcn-vue add @trame/tabs
• tags-input
  npx shadcn-vue add @trame/tags-input
• testimonials
  npx shadcn-vue add @trame/testimonials
• text-highlight
  npx shadcn-vue add @trame/text-highlight
• text-scroll-reveal
  npx shadcn-vue add @trame/text-scroll-reveal
• textarea
  npx shadcn-vue add @trame/textarea
• theme-toggle
  npx shadcn-vue add @trame/theme-toggle
• time-field
  npx shadcn-vue add @trame/time-field
• timeline
  npx shadcn-vue add @trame/timeline
• toggle
  npx shadcn-vue add @trame/toggle
• toggle-group
  npx shadcn-vue add @trame/toggle-group
• tooltip
  npx shadcn-vue add @trame/tooltip
• tree
  npx shadcn-vue add @trame/tree
• underline-text
  npx shadcn-vue add @trame/underline-text
• word-rotate
  npx shadcn-vue add @trame/word-rotate