Components Overview

HeroUI Vue provides a comprehensive set of UI components for building modern web applications.

Forms

Form components for user input and interaction.

• Button - Clickable button element with multiple variants
• Button Group - Group multiple buttons together
• Checkbox - Checkbox for boolean selections
• Checkbox Group - Group related checkbox values
• Fieldset - Form section layout with legend and actions
• Input - Single-line text input field
• Input Group - Input shell with prefix, suffix, and textarea slots
• Input OTP - One-time passcode input with visual slots
• Number Field - Numeric input with increment/decrement controls
• Radio - Radio button for single selection from a group
• Radio Group - Group radio buttons with shared state
• Switch - Toggle switch for on/off states
• Switch Group - Layout wrapper for related switches
• TextField - Complete form field with label and validation
• Textarea - Multi-line text input field
• Toggle Button - Pressable toggle control
• Toggle Button Group - Group related toggle controls

Form Elements

Helper components for building accessible forms.

• Description - Descriptive text for form fields
• Field Error - Error message display for form validation
• Label - Label component for form fields

General

General-purpose UI components.

• Accordion - Collapsible content sections
• Alert - Status and feedback message
• AlertDialog - Confirmation dialog for consequential actions
• Autocomplete - Searchable single-option picker
• Avatar - User or entity avatar
• Badge - Compact status marker
• Breadcrumbs - Hierarchical navigation path
• Card - Structured surface container
• Chip - Compact label or status
• Disclosure - Collapsible section with trigger and animated panel
• Close Button - Button for closing/dismissing elements
• Empty State - Empty list or search result placeholder
• Header - Section heading primitive
• Kbd - Display keyboard shortcuts
• Link - Accessible hyperlink component
• Meter - Known-range scalar measurement
• Pagination - Page navigation controls
• Progress Bar - Linear progress indicator
• Progress Circle - Circular progress indicator
• Scroll Shadow - Scrollable region with edge shadows
• Separator - Visual divider between content sections
• Skeleton - Loading placeholder
• Spinner - Loading indicator
• Surface - Base surface wrapper
• Tag - Selectable or removable tag
• Tabs - Tabbed content navigation
• Text - Styled text component
• Toolbar - Toolbar container for related actions

Coming Soon

More components are being actively developed:

• Select
• DatePicker
• Modal
• Tooltip
• Dropdown
• Calendar and date inputs
• Menus and overlays

Usage Pattern

All components follow a consistent API pattern:

<script setup lang="ts">
import { ComponentName } from '@heroui-vue/vue'
</script>

<template>
  <ComponentName
    variant="primary"
    size="md"
    :disabled="false"
  >
    Content
  </ComponentName>
</template>