---
title: Components
description: "Explore all Hux UI components"
---

# Components

Hux UI provides a comprehensive collection of beautiful, customizable components for Flutter. Browse all available components below.

<Tip>
  **Try them live!** See all components in action at [ui.thehuxdesign.com](https://ui.thehuxdesign.com)
</Tip>

## Feedback & Status

<CardGroup cols={3}>
  <Card title="Alert" icon="triangle-exclamation" href="/components/alert">
    Message boxes with dismissible functionality
  </Card>
  <Card title="Badge" icon="tag" href="/components/badge">
    Status indicators with semantic variants
  </Card>
  <Card title="Loading" icon="spinner" href="/components/loading">
    Customizable loading indicators and overlays
  </Card>
  <Card title="Progress" icon="bars-progress" href="/components/progress">
    Progress bars and indicators
  </Card>
  <Card title="Snackbar" icon="comment" href="/components/snackbar">
    Toast notifications and snackbars
  </Card>
  <Card title="Tooltip" icon="circle-info" href="/components/tooltip">
    Contextual information on hover
  </Card>
</CardGroup>

## Input & Forms

<CardGroup cols={3}>
  <Card title="Button" icon="hand-pointer" href="/components/buttons">
    Multiple variants with loading states
  </Card>
  <Card title="Checkbox" icon="square-check" href="/components/checkbox">
    Interactive checkbox with custom styling
  </Card>
  <Card title="Date Picker" icon="calendar" href="/components/date-picker">
    Modern date picker with calendar overlay
  </Card>
  <Card title="Dropdown" icon="chevron-down" href="/components/dropdown">
    Dropdown menus and select inputs
  </Card>
  <Card title="Input" icon="i-cursor" href="/components/input">
    Enhanced text input with validation
  </Card>
  <Card title="Radio" icon="circle-dot" href="/components/radio">
    Radio button groups
  </Card>
  <Card title="Slider" icon="sliders" href="/components/slider">
    Range and value sliders
  </Card>
  <Card title="Switch" icon="toggle-on" href="/components/switch">
    Toggle switch with smooth animations
  </Card>
  <Card title="Textarea" icon="align-left" href="/components/textarea">
    Multi-line text input
  </Card>
  <Card title="Toggle" icon="toggle-off" href="/components/toggle">
    Toggle buttons and button groups
  </Card>
</CardGroup>

## Layout & Navigation

<CardGroup cols={3}>
  <Card title="Avatar" icon="user" href="/components/avatar">
    User images with initials fallback
  </Card>
  <Card title="Breadcrumbs" icon="angles-right" href="/components/breadcrumbs">
    Navigation breadcrumb trails
  </Card>
  <Card title="Card" icon="square" href="/components/cards">
    Flexible card component with actions
  </Card>
  <Card title="Context Menu" icon="bars" href="/components/context-menu">
    Right-click context menus
  </Card>
  <Card title="Dialog" icon="window-maximize" href="/components/dialog">
    Modal dialogs and popups
  </Card>
  <Card title="Pagination" icon="left-right" href="/components/pagination">
    Page navigation controls
  </Card>
  <Card title="Sidebar" icon="table-columns" href="/components/sidebar">
    Collapsible sidebar navigation
  </Card>
  <Card title="Tabs" icon="table-cells" href="/components/tabs">
    Tab navigation and panels
  </Card>
</CardGroup>

## Data & Utilities

<CardGroup cols={3}>
  <Card title="Charts" icon="chart-line" href="/components/charts">
    Beautiful data visualization
  </Card>
  <Card title="Command" icon="terminal" href="/components/command">
    Command palette and search
  </Card>
  <Card title="OTP" icon="key" href="/components/otp">
    One-time password input
  </Card>
</CardGroup>
