> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devreadykit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Available Components

> Overview of all components in the DevReady Kit library

Our component library includes a comprehensive set of UI components designed for modern React applications:

## Form Components

### [Button](/components/button)

Versatile button with multiple variants and states. Supports filled, border, and plain variants with different colors and sizes.

### [Input](/components/input)

Text, number, and password inputs with validation. Includes support for icons, helper text, and error states.

### [Textarea](/components/textarea)

Multi-line text input with auto-growing support and validation states.

### [DateInput](/components/date-input)

Date input component with calendar popup for date selection, supporting single date and date range modes.

### [Verification (PinInput)](/components/verification)

PIN input component for entering verification codes, PINs, or OTP codes with automatic focus management.

### [Checkbox](/components/checkbox)

Checkbox with indeterminate state support, labels, and validation.

### [RadioButton](/components/radio-button)

Radio buttons for single selection from a group of options.

### [Toggle](/components/toggle)

Toggle switch for boolean state management with icons and labels.

### [Slider](/components/slider)

Single-value slider for numeric input with keyboard navigation.

### [RangeSlider](/components/range-slider)

Dual-handle slider for selecting a range of values.

### [FileUpload](/components/file-upload)

File upload component with drag and drop support, progress tracking, and file management.

## Display Components

### [Avatar](/components/avatar)

User profile pictures with initials fallback, customizable sizes, and status badges.

### [Badge](/components/badge)

Status indicators and notifications with different variants and colors.

### [Chip](/components/chip)

Tags and labels with multiple variants (filled, tint, outline) and colors.

### [Card](/components/card)

Flexible card component for displaying content in containers with consistent styling and hover effects.

### [Progress](/components/progress)

Progress bars for completion status with animations and custom styling.

### [Spinner](/components/spinner)

Loading spinner component with determinate and indeterminate modes, multiple sizes, and label placement.

### [Divider](/components/divider)

Divider component for separating content sections with support for text and icon variants.

### [Lists](/components/lists)

List component with ordered and unordered variants, nested items, and custom icons.

### [Table](/components/table)

Flexible data table with compound components, built-in sorting, and row selection.

### [Charts](/components/charts)

Responsive data visualisation components built on top of Recharts with multiple chart types.

## Navigation & Layout

### [Breadcrumbs](/components/breadcrumbs)

Navigation breadcrumbs component with automatic path generation and collapsible items.

### [Tabs](/components/tabs)

Tabbed interface for content organization with support for icons and vertical layouts.

### [Dropdown](/components/dropdown)

Dropdown menus with single/multiple selection, search, and grouping.

### [ContextMenu](/components/context-menu)

Right-click context menus with icons, shortcuts, and submenus.

### [Pagination](/components/pagination)

Pagination component with default and minimal variants for page navigation.

### [Sidebar](/components/sidebar)

Collapsible sidebar component with sections, navigation items, and customizable width.

### [Stepper](/components/stepper)

Stepper component for displaying multi-step processes with multiple variants.

### [Link](/components/link)

Link component with hover effects and external link indicator.

## Date & Time

### [Calendar](/components/calendar)

Calendar component for date selection with single and range modes.

## Media & Content

### [Carousel](/components/carousel)

Carousel component with dots, lines, and arrows variants for navigation controls.

### [CodeSnippet](/components/code-snippet)

Code display with syntax highlighting and copy functionality.

## Overlay Components

### [Dialog](/components/dialog)

Modal dialogs for forms and confirmations with customizable content areas.

### [Tooltip](/components/tooltip)

Tooltip component with automatic positioning and arrow support for contextual information.

### [Toast](/components/toast)

Toast notification component with multiple variants and stacking support.

### [Chat](/components/chat)

Complete chat interface with message handling and file upload support.

## Import Examples

### Individual imports

```ts theme={null}
import { Button, Input, Avatar } from '@peppermint-design/devreadykit';
```

### Component groups

```ts theme={null}
import { 
  Button, 
  Input, 
  Textarea, 
  Checkbox, 
  RadioButton 
} from '@peppermint-design/devreadykit';
```

### Complex components

```ts theme={null}
import { 
  Tabs, 
  TabsList, 
  TabsTrigger, 
  TabsContent,
  Dropdown,
  Dialog 
} from '@peppermint-design/devreadykit';
```

## Getting Started with Components

Each component includes:

* **Props documentation** - Complete API reference
* **Usage examples** - Real-world implementation scenarios
* **Variants and states** - Different visual styles and behaviors
* **Best practices** - Recommended usage patterns

Browse the Components section to explore each component in detail.