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.

DateInput

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

Verification (PinInput)

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

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.

FileUpload

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

Display Components

Avatar

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.

Card

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

Progress

Progress bars for completion status with animations and custom styling.

Spinner

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

Divider

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

Lists

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

Table

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

Charts

Responsive data visualisation components built on top of Recharts with multiple chart types. Navigation breadcrumbs component with automatic path generation and collapsible items.

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.

Pagination

Pagination component with default and minimal variants for page navigation. Collapsible sidebar component with sections, navigation items, and customizable width.

Stepper

Stepper component for displaying multi-step processes with multiple variants. Link component with hover effects and external link indicator.

Date & Time

Calendar

Calendar component for date selection with single and range modes.

Media & Content

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

CodeSnippet

Code display with syntax highlighting and copy functionality.

Overlay Components

Dialog

Modal dialogs for forms and confirmations with customizable content areas.

Tooltip

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

Toast

Toast notification component with multiple variants and stacking support.

Chat

Complete chat interface with message handling and file upload support.

Import Examples

Individual imports

import { Button, Input, Avatar } 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.