# Docs

## design-principles

- [Design Principles](/docs/design-principles): Core principles that guide HeroUI v3's design and development

## introduction

- [Introduction](/docs/introduction): An open-source UI component library for building beautiful and accessible user interfaces.

## llms-txt

- [LLMs.txt](/docs/llms-txt): Enable AI assistants like Claude, Cursor, and Windsurf to understand HeroUI v3

## quick-start

- [Quick Start](/docs/quick-start): Get started with HeroUI v3 in minutes

## components

- [Accordion](/docs/components/accordion): A collapsible content panel for organizing information in a compact space
- [Avatar](/docs/components/avatar): Display user profile images with customizable fallback content
- [Button](/docs/components/button): A clickable button component with multiple variants and states
- [Chip](/docs/components/chip): Small informational badges for displaying labels, statuses, and categories
- [Disclosure](/docs/components/disclosure): A disclosure is a collapsible section with a header containing a heading and a trigger button, and a panel that wraps the content.
- [Kbd](/docs/components/kbd): Display keyboard shortcuts and key combinations
- [Link](/docs/components/link): A styled anchor component for navigation with built-in icon support
- [Popover](/docs/components/popover): Displays rich content in a portal triggered by a button or any custom element
- [Separator](/docs/components/separator): Visually divide content sections
- [Skeleton](/docs/components/skeleton): Skeleton is a placeholder to show a loading state and the expected shape of a component.
- [Spinner](/docs/components/spinner): A loading indicator component to show pending states
- [Tabs](/docs/components/tabs): Tabs organize content into multiple sections and allow users to navigate between them.
- [TextField](/docs/components/text-field): Text input fields for forms with labels, descriptions, and error messages
- [Tooltip](/docs/components/tooltip): Displays informative text when users hover over or focus on an element

## handbook

- [Animation](/docs/handbook/animation): Add smooth animations and transitions to HeroUI v3 components
- [Colors](/docs/handbook/colors): Color palette and theming system for HeroUI v3
- [Composition](/docs/handbook/composition): Build flexible UI with component composition patterns
- [Styling](/docs/handbook/styling): Style HeroUI components with CSS, Tailwind, or CSS-in-JS
- [Theming](/docs/handbook/theming): Customize HeroUI's design system with CSS variables and global styles