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

Form Components

Button

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

Input

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

Textarea

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

Checkbox

Checkbox with indeterminate state support, labels, and validation.

RadioButton

Radio buttons for single selection from a group of options.

Toggle

Toggle switch for boolean state management with icons and labels.

Slider

Single-value slider for numeric input with keyboard navigation.

RangeSlider

Dual-handle slider for selecting a range of values.

Display Components

UserBold

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

Badge

Status indicators and notifications with different variants and colors.

Chip

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

Progress

Progress bars for completion status with animations and custom styling.

Tabs

Tabbed interface for content organization with support for icons and vertical layouts. Dropdown menus with single/multiple selection, search, and grouping.

ContextMenu

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

Overlay Components

Dialog

Modal dialogs for forms and confirmations with customizable content areas.

Chat

Complete chat interface with message handling and file upload support.

CodeSnippet

Code display with syntax highlighting and copy functionality.

Import Examples

Individual imports

import { Button, Input, UserBold } from '@peppermint-design/devreadykit';

Component groups

import { 
  Button, 
  Input, 
  Textarea, 
  Checkbox, 
  RadioButton 
} from '@peppermint-design/devreadykit';

Complex components

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.
I