# Available Components Source: https://docs.devreadykit.com/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. # Avatar Source: https://docs.devreadykit.com/components/avatar Display user profile pictures, initials, or icons with customizable sizes and status badges ## Overview The UserBold component displays user profile images, initials, or icons with support for different sizes and status indicators. ## Basic Usage ```tsx theme={null} import { Avatar } from '@peppermint-design/devreadykit-custom'; export default function App() { return (
); } ``` ### Fallback to Initials When the image fails to load, it automatically falls back to initials. ```tsx theme={null} import Avatar from "@peppermint-design/devreadykit-custom"; export default function AvatarImageFallback() { return (
); } ``` ## Initials Avatars ### With Name The component automatically generates initials from the name. ```tsx theme={null} import Avatar from "@peppermint-design/devreadykit-custom"; export default function AvatarInitials() { return (
); } ``` ## Icon Avatars ```tsx theme={null} import Avatar from "@peppermint-design/devreadykit-custom"; import { User } from "@/assets/icons/user"; export default function AvatarIconExamples() { return (
} /> } /> } /> } />
); } ``` ## Sizes Avatars support four fixed sizes. The default size token is `sm` (40px). ```tsx theme={null} ``` ## Status Badges ### With Status Badge ```tsx theme={null} import Avatar from "@peppermint-design/devreadykit-custom"; export default function AvatarStatusBadges() { return (
); } ``` ## Props | Prop | Type | Default | Description | | :------------- | :----------------------------- | :------- | :--------------------- | | size | `"xs" \| "sm" \| "md" \| "lg"` | `"sm"` | Avatar size token | | src | `string` | — | Image source URL | | alt | `string` | — | Alt text for image | | name | `string` | — | User name for initials | | initials | `string` | — | Custom initials | | icon | `React.ReactNode` | — | Icon to display | | showBadge | `boolean` | `false` | Show status badge | | badgeIcon | `React.ReactNode` | — | Badge icon | | badgeVariant | `"auto" \| "dot" \| "icon"` | `"auto"` | Badge style | | badgeClassName | `string` | — | Custom badge classes | | className | `string` | — | Additional CSS classes | ## Examples ### User List ```tsx theme={null} import Avatar from "@peppermint-design/devreadykit-custom"; const users = [ { id: 1, name: "John Doe", avatar: "https://i.pravatar.cc/100?img=12", isOnline: true, }, { id: 2, name: "Jane Smith", avatar: "https://i.pravatar.cc/100?img=18", isOnline: false, }, { id: 3, name: "Alex Johnson", avatar: "https://i.pravatar.cc/100?img=28", isOnline: true, }, ]; export default function AvatarUserListExample() { return (
{users.map((user) => (
{user.name}
))}
); } ``` ### Team Members ```tsx theme={null} import Avatar from "@peppermint-design/devreadykit-custom"; const members = [ { id: 1, name: "John", avatar: "https://i.pravatar.cc/100?img=15" }, { id: 2, name: "Jane", avatar: "https://i.pravatar.cc/100?img=47" }, { id: 3, name: "Alex", avatar: "https://i.pravatar.cc/100?img=20" }, { id: 4, name: "Maria", avatar: "https://i.pravatar.cc/100?img=33" }, { id: 5, name: "Chris", avatar: "https://i.pravatar.cc/100?img=7" }, { id: 6, name: "Taylor", avatar: "https://i.pravatar.cc/100?img=52" }, ]; export default function AvatarTeamMembersExample() { return (
{members.slice(0, 5).map((member, index) => ( ))} {members.length > 5 && (
+{members.length - 5}
)}
); } ``` ``` ``` # Badge Source: https://docs.devreadykit.com/components/badge Display status indicators, notifications, or labels with customizable variants and colors ## Overview The Badge component displays status indicators, notifications, or labels with support for different variants, colors, and sizes. ## Basic Usage ```tsx theme={null} import { Badge } from '@peppermint-design/devreadykit-custom'; export default function BadgeBasicExample() { return (
); } ``` ## Variants ### Small (sm) ```tsx theme={null} import { Check } from "@/assets/icons/check.tsx"; import { Calendar } from "@/assets/icons/calendar.tsx"; import { Close } from "@/assets/icons/close.tsx"; import { Minus } from "@/assets/icons/minus.tsx"; import { Circle } from "@/assets/icons/circle.tsx"; } /> } /> } /> } /> } /> ``` ### Medium (md) ```tsx theme={null} import { Check } from "@/assets/icons/check.tsx"; import { Calendar } from "@/assets/icons/calendar.tsx"; import { Close } from "@/assets/icons/close.tsx"; import { Minus } from "@/assets/icons/minus.tsx"; import { Circle } from "@/assets/icons/circle.tsx"; } /> } /> } /> } /> } /> ``` ### Large (lg) ```tsx theme={null} ``` ## With Icons ### Text with Icon ```tsx theme={null} import Badge from "@peppermint-design/devreadykit-custom"; import { Check } from "@/assets/icons/check"; import { Close } from "@/assets/icons/close"; export default function BadgeWithIconText() { return (
} /> } />
); } ``` ## Numeric Badges ```tsx theme={null} import Badge from "@peppermint-design/devreadykit-custom"; export default function BadgeNumeric() { return (
); } ``` ## Props | Prop | Type | Default | Description | | :------ | :----------------------------------------------------------- | :------ | :------------------- | | variant | `"status" \| "sm" \| "md" \| "lg"` | — | Badge size variant | | color | `"available" \| "away" \| "offline" \| "block" \| "default"` | — | Badge color theme | | icon | `React.ReactNode` | — | Icon to display | | text | `string \| number` | — | Badge text or number | ## Examples ### User Status Indicators ```tsx theme={null} import Badge from "@peppermint-design/devreadykit-custom"; const users = [ { id: 1, name: "Alice Johnson", status: "available", statusText: "Online" }, { id: 2, name: "Brian Kim", status: "away", statusText: "Away" }, { id: 3, name: "Carlos Ruiz", status: "offline", statusText: "Offline" }, { id: 4, name: "Dana Lee", status: "block", statusText: "Blocked" }, ] as const; export default function BadgeUserStatus() { return (
{users.map((user) => (
{user.name}
))}
); } ``` ### Task Status ```tsx theme={null} import Badge from "@peppermint-design/devreadykit-custom"; import { Check } from "@/assets/icons/check"; import { Close } from "@/assets/icons/close"; import { Console } from "@/assets/icons/console.tsx"; import { MoreHorizontal } from "@/assets/icons/more-horizontal.tsx"; export default function BadgeTaskStatus() { return (
Completed } />
In-progress } />
Blocked } />
Pending } />
); } ``` # Breadcrumbs Source: https://docs.devreadykit.com/components/breadcrumbs Navigation breadcrumbs component with automatic path generation and collapsible items ## Overview The Breadcrumbs component provides navigation breadcrumbs with support for automatic path generation, collapsible items, and custom separators. ## Basic Usage ```tsx theme={null} import { Breadcrumbs } from '@peppermint-design/devreadykit-custom'; export default function BreadcrumbsBasic() { const items = [ { id: 'home', label: 'Home', href: '/' }, { id: 'products', label: 'Products', href: '/products' }, { id: 'item', label: 'Item Name', href: '/products/item', active: true } ]; return ; } ``` ## Automatic Path Generation If no items are provided, Breadcrumbs will automatically generate items from the current route. ```tsx theme={null} import { Breadcrumbs } from '@peppermint-design/devreadykit-custom'; ``` ## With Icons ```tsx theme={null} import { Breadcrumbs } from '@peppermint-design/devreadykit-custom'; import { Home, Folder } from '@/assets/icons'; const items = [ { id: 'home', label: 'Home', href: '/', icon: }, { id: 'folder', label: 'Folder', href: '/folder', icon: } ]; ``` ## Collapsible Items When there are more items than `maxItems`, the component will collapse middle items into an ellipsis menu. ```tsx theme={null} import { Breadcrumbs } from '@peppermint-design/devreadykit-custom'; const items = [ { id: 'home', label: 'Home', href: '/' }, { id: 'level1', label: 'Level 1', href: '/level1' }, { id: 'level2', label: 'Level 2', href: '/level1/level2' }, { id: 'level3', label: 'Level 3', href: '/level1/level2/level3' }, { id: 'level4', label: 'Level 4', href: '/level1/level2/level3/level4' }, { id: 'level5', label: 'Level 5', href: '/level1/level2/level3/level4/level5', active: true } ]; ``` ## Props \| Prop | Type | Default | Description | \|:------|:------|:---------|:-------------| | items | `BreadcrumbItem[]` | - | Array of breadcrumb items | | maxItems | `number` | `4` | Maximum visible items before collapsing | | className | `string` | - | Additional CSS classes \| | onItemClick | `(item: BreadcrumbItem, index: number) => void` | - | Click handler for items | | separator | `React.ReactNode` | - | Custom separator element | # Button Source: https://docs.devreadykit.com/components/button A versatile button component with multiple variants, colors, and sizes ## Overview The Button component is a flexible, accessible button with support for multiple variants, colors, sizes, and icons. ## Basic Usage ```tsx theme={null} import { Button } from '@peppermint-design/devreadykit-custom'; export default function App() { return ( ); } ``` ## Variants ### Filled (Default) The default filled variant with solid background. ```tsx ButtonVariants theme={null} import { Button } from '@peppermint-design/devreadykit-custom'; export default function ButtonVariants() { return (
); } ``` ### Border Button with border and transparent background. ```tsx theme={null} ``` ### Plain Minimal button with no background or border. ```tsx theme={null} ``` ## Sizes Buttons come in three sizes: small (s), medium (m), and large (l). ```tsx theme={null} ``` ## With Icons Add icons to your buttons using the `icon` prop. ```tsx theme={null} import { Circle } from "@/assets/icons/circle.tsx" ``` ### Icon Only Buttons Create icon-only buttons by omitting the children. ```tsx theme={null} import { Eye } from "@/assets/icons/eye.tsx"; import { EyeHide } from "@/assets/icons/eye-hide.tsx"; ); } ``` # Chip Source: https://docs.devreadykit.com/components/chip A chip component for displaying labels, tags, or status indicators ## Overview The Chip component displays labels, tags, or status indicators with different variants and colors. ## Basic Usage ```tsx theme={null} import { Chip } from '@peppermint-design/devreadykit-custom'; export default function App() { return ( Default Chip ); } ``` ## Variants ### Filled ```tsx theme={null} Brand Danger Warning Success Important ``` ### Tint ```tsx theme={null} Brand Danger Warning Success Important ``` ### Outline ```tsx theme={null} Brand Danger Warning Success Important ``` ## With Icons ```tsx theme={null} import { Check } from '@/assets/icons/check'; import { Warning } from '@/assets/icons/warning'; import { Close } from '@/assets/icons/close'; const InfoIcon = () => ( ); }> Verified }> Pending }> Failed }> Information ``` ## Props | Prop | Type | Default | Description | | :-------- | :------------------------------------------------------------- | :------ | :--------------------- | | variant | `"filled" \| "tint" \| "outline"` | — | Visual style variant | | color | `"brand" \| "danger" \| "warning" \| "success" \| "important"` | — | Color theme | | icon | `React.ReactNode` | — | Icon to display | | children | `React.ReactNode` | — | Chip content | | className | `string` | — | Additional CSS classes | ## Examples ### Filter Chips ```tsx theme={null} import { Close } from '@/assets/icons/close'; function FilterChips({ filters, onRemove }) { return (
{filters.map(filter => ( } onClick={() => onRemove(filter.key)} > {filter.label} ))}
); } ``` # Code Snippet Source: https://docs.devreadykit.com/components/code-snippet A code snippet component for displaying code with syntax highlighting ## Overview The CodeSnippet component displays code with syntax highlighting and copy functionality. ## Basic Usage ```tsx theme={null} import { CodeSnippet } from '@peppermint-design/devreadykit-custom'; export default function App() { const code = `function hello() { console.log("Hello, World!"); }`; return ( ); } ``` ## Different Languages ### JavaScript ```tsx theme={null} ``` ### Python ```tsx theme={null} ``` ### CSS ```tsx theme={null} ``` ## With Line Numbers ```tsx theme={null} ``` ## Props | Prop | Type | Default | Description | | ------------------ | ---------------------------------------------------------------------------------------------------------- | ------------ | ------------------------------------------- | | tabs | `Array<{ id: string; label: string; code: string; language?: string; codeByPm?: Record }>` | - | Snippet panes to render | | defaultTabId | `string` | first tab | Tab selected on load | | collapsible | `boolean` | `true` | Enable collapse behaviour for long snippets | | initiallyCollapsed | `boolean` | `false` | Whether the snippet starts collapsed | | previewLines | `number` | `12` | Lines shown when collapsed | | maxExpandedLines | `number` | `24` | Maximum lines when expanded | | showToggle | `boolean` | `true` | Display the show more/less toggle | | copyButtonLabel | `string` | `"Copy"` | Custom label for the copy button | | pmTabs | `Array<{ id: string; label: string }>` | - | Optional package manager tab switcher | | defaultPmId | `string` | first pm tab | Default package manager tab | | className | `string` | - | Additional CSS classes | ## Examples ### API Response ```tsx theme={null} function ApiResponse({ data }) { const jsonCode = JSON.stringify(data, null, 2); return ( ); } ``` ### Installation Instructions ```tsx theme={null} function InstallationCode() { const installCode = `npm install @peppermint-design/devreadykit-custom # or with yarn yarn add @peppermint-design/devreadykit-custom # or with pnpm pnpm add @peppermint-design/devreadykit-custom`; return ( ); } ``` ### React Component Example ```tsx theme={null} function ComponentExample() { const reactCode = `import { Button } from '@peppermint-design/devreadykit-custom'; export default function MyComponent() { return ( ); }`; return ( ); } ``` # Context Menu Source: https://docs.devreadykit.com/components/context-menu A context menu component for right-click interactions ## Overview The ContextMenu component provides a right-click menu with customizable options and actions. ## Basic Usage ```tsx theme={null} import { useState } from "react"; import ContextMenu from "@/ui/context-menu"; import { Copy } from "@/assets/icons/copy.tsx"; import { HouseAdd } from "@/assets/icons/house-add.tsx"; import { TrashEmpty } from "@/assets/icons/trash-empty.tsx"; export default function ContextMenuBasicExample() { const [lastAction, setLastAction] = useState("None"); return (
Right-click anywhere in this area
} onSelect={() => setLastAction("copy")}> Copy } onSelect={() => setLastAction("paste")}> Paste } onSelect={() => setLastAction("delete")} > Delete
Last action: {lastAction}
); } ``` | Component | Prop | Type | Default | Description | | :-------- | :------------ | :--------------------------------------------------------------------- | :------- | :--------------------------------------- | | Root | children | `React.ReactNode` | — | Wraps trigger and menu content | | Root | className | `string` | — | Additional classes for wrapper | | Trigger | children | `React.ReactNode` | — | Element that opens the menu | | Trigger | trigger | `'left' \| 'right' \| 'both'` | `'left'` | Choose which mouse button opens the menu | | Trigger | className | `string` | — | Additional classes | | Content | children | `React.ReactNode` | — | Menu body | | Content | width | `number` | `260` | Menu width in pixels | | Content | placement | `'auto' \| 'bottom-start' \| 'bottom-end' \| 'top-start' \| 'top-end'` | `'auto'` | Preferred menu placement | | Content | offset | `number` | `6` | Distance between trigger and menu | | Content | className | `string` | — | Additional classes | | List | children | `React.ReactNode` | — | Menu list container | | List | className | `string` | — | Additional classes | | Label | children | `React.ReactNode` | — | Section heading text | | Item | children | `React.ReactNode` | — | Item label | | Item | icon | `React.ReactNode` | — | Optional leading icon | | Item | shortcut | `string` | — | Keyboard shortcut helper text | | Item | onSelect | `() => void` | — | Selection handler | | Item | disabled | `boolean` | `false` | Disable item interaction | | Item | className | `string` | — | Additional classes | | Group | value | `string` | — | Selected value (radio behaviour) | | Group | onValueChange | `(value: string) => void` | — | Selection change handler | ## Examples ### File Context Menu ```tsx theme={null} import { useState } from "react"; import ContextMenu from "@/ui/context-menu"; import { Eye } from "@/assets/icons/eye.tsx"; import { EditPencil } from "@/assets/icons/edit-pencil.tsx"; import { Email } from "@/assets/icons/email.tsx"; import { Copy } from "@/assets/icons/copy.tsx"; import { TrashEmpty } from "@/assets/icons/trash-empty.tsx"; const FILE = { id: 1, name: "Quarterly_Report.pdf", size: "2.4 MB", }; export default function ContextMenuFileExample() { const [lastAction, setLastAction] = useState("No action yet"); const handleAction = (action: string) => { setLastAction(`${action} → ${FILE.name}`); }; return (
{FILE.name}
{FILE.size}
Right-click to manage file
 } onSelect={() => handleAction("View file")}> View } onSelect={() => handleAction("Edit file")}> Edit } onSelect={() => handleAction("Share via email")}>Email } onSelect={() => handleAction("Share link")}>Copy Link } className="[&>svg]:text-error-50 text-error-50" onSelect={() => handleAction("Delete file")}> Delete
{lastAction}
); } ``` # Date Input Source: https://docs.devreadykit.com/components/date-input Date input component with calendar popup for date selection ## Overview The DateInput component provides a text input with a calendar popup for date selection, supporting single date and date range modes. ## Basic Usage ```tsx theme={null} import { DateInput } from '@peppermint-design/devreadykit-custom'; import { useState } from 'react'; export default function DateInputBasic() { const [date, setDate] = useState(); return ( ); } ``` ## Date Range ```tsx theme={null} import { DateInput } from '@peppermint-design/devreadykit-custom'; import { useState } from 'react'; export default function DateInputRange() { const [range, setRange] = useState<{ from?: Date; to?: Date }>(); return ( ); } ``` ## Disable Past Dates ```tsx theme={null} import { DateInput } from '@peppermint-design/devreadykit-custom'; import { useState } from 'react'; export default function DateInputDisablePast() { const [date, setDate] = useState(); return ( ); } ``` ## Props | Prop | Type | Default | Description | | :---------- | :--------------------------------------------------- | :--------- | :--------------------- | | mode | `"single" \| "range"` | `"single"` | Selection mode | | selected | `Date \| { from?: Date; to?: Date }` | - | Selected date(s) | | onSelect | `(date: Date \| { from?: Date; to?: Date }) => void` | - | Selection handler | | label | `string` | - | Input label | | placeholder | `string` | - | Placeholder text | | disabled | `boolean` | `false` | Disabled state | | disablePast | `boolean` | `false` | Disable past dates | | className | `string` | - | Additional CSS classes | ``` ``` # Dialog Source: https://docs.devreadykit.com/components/dialog A modal dialog component for overlays, forms, and confirmations ## Overview The Dialog component provides a modal overlay for displaying content, forms, or confirmations with customizable triggers and content. ## Basic Usage ```tsx theme={null} import { FormEvent, useState } from 'react'; import { Button, Dialog } from '@peppermint-design/devreadykit-custom'; export default function App() { const [open, setOpen] = useState(false); return ( <> setOpen(false)} title="Enable notifications?" description="We'll send product updates and tips every couple of weeks." primary={{ label: 'Enable', onClick: () => setOpen(false) }} secondary={{ label: 'Not now', onClick: () => setOpen(false) }} >

You can change this setting in your account preferences at any time. We only send a handful of emails each month.

); } ``` ## Confirmation Dialog ```tsx theme={null} import { useState } from 'react'; import { Button, Dialog } from '@peppermint-design/devreadykit-custom'; export default function ConfirmationExample() { const [open, setOpen] = useState(false); return ( <> setOpen(false)} title="Delete “Quarterly_Report.pdf”?" description="This action cannot be undone." primary={{ label: 'Delete', color: 'error', onClick: () => setOpen(false) }} secondary={{ label: 'Cancel', onClick: () => setOpen(false) }} size="md" >

If you still need this document, download a copy before deleting it.

 ); } ``` ## Form Dialog ```tsx theme={null} import { useState } from 'react'; import { Button, Dialog } from '@peppermint-design/devreadykit-custom'; export default function FormDialog() { const [open, setOpen] = useState(false); const [formData, setFormData] = useState({ name: '', email: '' }); const handleSubmit = (event: FormEvent) => { event.preventDefault(); console.log('Created user', formData); setFormData({ name: '', email: '' }); setOpen(false); }; return ( <> setOpen(false)} title="Create new user" description="Fill in the details below to add a teammate." footer={
} >
); } ``` ## Props | Prop | Type | Default | Description | | -------------------- | -------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------- | | open | `boolean` | - | Controls whether the dialog is visible | | onClose | `() => void` | - | Called when the dialog should close | | onOpenChange | `(open: boolean) => void` | - | Optional callback fired when the dialog closes via internal actions | | title | `string` | - | Heading displayed at the top of the dialog | | description | `string` | - | Supporting copy displayed under the title | | size | `'lg' \| 'md' \| 'sm'` | `'lg'` | Predefined max-width and layout spacing | | children | `React.ReactNode` | - | Body content rendered between header and footer | | primary | `{ label: string; onClick: () => void; color?: ButtonColor; size?: ButtonSize }` | - | Primary action button configuration | | secondary | `{ label: string; onClick: () => void; color?: ButtonColor; size?: ButtonSize }` | - | Secondary action button configuration | | footer | `React.ReactNode` | - | Custom footer content, replaces the generated primary/secondary buttons when provided | | className | `string` | - | Additional classes for the dialog surface | | closeOnBackdropClick | `boolean` | `true` | Close the dialog when the backdrop is clicked | | hideCloseButton | `boolean` | `false` | Hide the top-right close button | ## Examples ### Delete Confirmation ```tsx theme={null} import { useState } from 'react'; import { Button, Dialog } from '@peppermint-design/devreadykit-custom'; export default function DeleteConfirmationExample() { const [open, setOpen] = useState(false); const file = { id: 'file-17', name: 'Brand_Guidelines.fig' }; return ( <> setOpen(false)} title={`Delete ${file.name}?`} description="This action cannot be undone." primary={{ label: 'Delete', color: 'error', onClick: () => setOpen(false) }} secondary={{ label: 'Cancel', onClick: () => setOpen(false) }} size="sm" >

Make sure no one on your team still needs this file. Once deleted, you'll need to re-upload it manually.

); } ``` ### Image Preview Dialog ```tsx theme={null} import { useState } from 'react'; import { Button, Dialog } from '@peppermint-design/devreadykit-custom'; const image = { url: 'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee', alt: 'Sunset over mountains', }; export default function ImagePreview() { const [open, setOpen] = useState(false); return ( <> setOpen(false)} title="Image preview" description="Click outside or press Escape to close." size="lg" hideCloseButton footer={
} > {image.alt} ); } ``` # Divider Source: https://docs.devreadykit.com/components/divider Divider component for separating content sections ## Overview The Divider component provides visual separation between content sections with support for text and icon variants. ## Basic Usage ```tsx theme={null} import { Divider } from '@peppermint-design/devreadykit-custom'; export default function DividerBasic() { return (

Content above

Content below

); } ``` ## With Text ```tsx theme={null} import { Divider } from '@peppermint-design/devreadykit-custom'; OR ``` ## With Icon ```tsx theme={null} import { Divider } from '@peppermint-design/devreadykit-custom'; import { Settings } from '@/assets/icons'; } /> ``` ## Props | Prop | Type | Default | Description | | :-------- | :------------------------------ | :---------- | :------------------------------ | | variant | `"default" \| "text" \| "icon"` | `"default"` | Divider variant | | children | `React.ReactNode` | - | Text content (for text variant) | | icon | `React.ReactElement` | - | Icon element (for icon variant) | | className | `string` | - | Additional CSS classes | # Dropdown Source: https://docs.devreadykit.com/components/dropdown A composed dropdown menu with support for single and multiple selection. ## Overview The Dropdown component is built from composable pieces: * `Dropdown.Root` manages open state, selection, and keyboard interaction. * `Dropdown.Select` renders the trigger button with label, helper text, and icons. * `Dropdown.Popover` and `Dropdown.Menu` display the list of options with proper focus management. * `Dropdown.Section` groups options and can render checkbox-style multi selection. * `Dropdown.Item` registers an option and handles selection feedback. Combine these primitives to build controlled or uncontrolled dropdowns with single or multiple selection. ## Basic Usage ```tsx theme={null} import { useState } from 'react'; import { Dropdown } from '@peppermint-design/devreadykit-custom'; const OPTIONS = [ { value: 'option-1', label: 'Option 1' }, { value: 'option-2', label: 'Option 2' }, { value: 'option-3', label: 'Option 3' }, ]; export default function App() { const [value, setValue] = useState(null); return ( {OPTIONS.map((option) => ( {option.label} ))} ); } ``` ## Single Selection ```tsx theme={null} import { useState } from 'react'; import { Dropdown } from '@peppermint-design/devreadykit-custom'; const COUNTRIES = [ { value: 'us', label: 'United States' }, { value: 'ca', label: 'Canada' }, { value: 'uk', label: 'United Kingdom' }, { value: 'de', label: 'Germany' }, { value: 'fr', label: 'France' }, ]; export default function CountrySelector() { const [country, setCountry] = useState(null); return ( {COUNTRIES.map((item) => ( {item.label} ))} ); } ``` ## Multiple Selection Use `Dropdown.Root` with `multiple` and render a `Dropdown.Section` with `variant="checkbox"` to display checkbox affordances. The trigger automatically shows the number of selected items, so render a summary elsewhere if you need labels. ```tsx theme={null} import { useState } from 'react'; import { Dropdown } from '@peppermint-design/devreadykit-custom'; const TAGS = ['React', 'Vue', 'Angular', 'Svelte', 'Solid']; export default function TagSelector() { const [tags, setTags] = useState([]); return (
{TAGS.map((tag) => ( {tag} ))} {tags.length > 0 && (
{tags.map((tag) => ( {tag} ))}
)}
); } ``` ## With Groups Render multiple `Dropdown.Section` blocks to visually separate categories. Add custom headings within a section as needed. ```tsx theme={null} import { useState } from 'react'; import { Dropdown } from '@peppermint-design/devreadykit-custom'; const CATEGORIES = { Frontend: [ { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }, { value: 'angular', label: 'Angular' }, ], Backend: [ { value: 'node', label: 'Node.js' }, { value: 'python', label: 'Python' }, { value: 'go', label: 'Go' }, ], Database: [ { value: 'postgres', label: 'PostgreSQL' }, { value: 'mysql', label: 'MySQL' }, { value: 'mongodb', label: 'MongoDB' }, ], } as const; export default function GroupedDropdown() { const [category, setCategory] = useState(null); return ( {Object.entries(CATEGORIES).map(([groupLabel, items]) => (

{groupLabel}

{items.map((item) => ( {item.label} ))} ))} ); } ``` ## Props | Component | Prop | Type | Default | Description | | :-------- | :----------- | :---------------------------------------------------------------------------------------- | :---------- | :----------------------------------------------------------------- | | Root | value | `string \| number \| (string \| number)[] \| null` | — | Controlled selected value(s); pass an array when `multiple` is set | | Root | defaultValue | `string \| number \| (string \| number)[] \| null` | — | Uncontrolled initial value(s) | | Root | onChange | `(value: string \| number \| null) => void` \|\| `(values: (string \| number)[]) => void` | — | Fired when the selection changes; signature depends on `multiple` | | Root | multiple | `boolean` | `false` | Enables multiple selection mode | | Root | className | `string` | — | Applies custom classes to the wrapper | | Select | label | `React.ReactNode` | — | Optional field label rendered above the trigger | | Select | required | `boolean` | `false` | Shows an asterisk next to the label | | Select | placeholder | `string` | `"Select"` | Placeholder text when nothing is selected | | Select | startIcon | `React.ReactNode` | — | Icon displayed on the left of the trigger | | Select | helperText | `React.ReactNode` | — | Helper text shown below the trigger | | Select | errorMessage | `React.ReactNode` | — | Error text shown below the trigger with error styling | | Select | className | `string` | — | Additional classes for the trigger button | | Popover | className | `string` | — | Styles for the popover container | | Popover | children | `React.ReactNode` | — | Popover contents, usually a `Dropdown.Menu` | | Menu | className | `string` | — | Styles for the menu surface | | Menu | maxHeight | `number` | `320` | Sets the max height before the menu scrolls | | Menu | children | `React.ReactNode` | — | Menu sections and other content | | Section | className | `string` | — | Adds spacing or borders around a section | | Section | variant | `"default" \| "checkbox"` | `"default"` | Renders checkbox visuals when set to `"checkbox"` | | Section | children | `React.ReactNode` | — | Section content such as `Dropdown.Item` elements | | Item | value | `string \| number` | — | Value emitted on selection; defaults to the text content | | Item | disabled | `boolean` | `false` | Disables the option | | Item | startIcon | `React.ReactNode` | — | Optional leading icon when `variant="default"` | | Item | className | `string` | — | Custom classes for the option | | Item | children | `React.ReactNode` | — | Option label/content | ## Examples ### Multi-Select with Custom Display ```tsx theme={null} import { useState } from 'react'; import { Dropdown } from '@peppermint-design/devreadykit-custom'; const skills = ['JavaScript', 'TypeScript', 'React', 'Node.js', 'Python', 'Go']; export default function SkillsSelector() { const [selected, setSelected] = useState([]); return (
{skills.map((skill) => ( {skill} ))} {selected.length > 0 && (
{selected.map((skill) => ( {skill} ))}
)}
); } ``` # File Upload Source: https://docs.devreadykit.com/components/file-upload File upload component with drag and drop support ## Overview The FileUpload component provides file upload functionality with drag and drop support, progress tracking, and file management. ## Basic Usage ```tsx theme={null} import { FileUpload } from '@peppermint-design/devreadykit-custom'; export default function FileUploadBasic() { const handleFiles = (files) => { console.log('Files:', files); }; return ( ); } ``` ## With File List ```tsx theme={null} import { FileUpload } from '@peppermint-design/devreadykit-custom'; import { useState } from 'react'; export default function FileUploadWithList() { const [files, setFiles] = useState([]); const handleFiles = (fileList) => { const newFiles = Array.from(fileList).map(file => ({ id: Math.random().toString(), name: file.name, size: file.size, progress: 0 })); setFiles([...files, ...newFiles]); }; return ( ); } ``` ## Single File ```tsx theme={null} import { FileUpload } from '@peppermint-design/devreadykit-custom'; export default function FileUploadSingle() { const handleFiles = (files) => { console.log('File:', files[0]); }; return ( ); } ``` ## With Accept Types ```tsx theme={null} import { FileUpload } from '@peppermint-design/devreadykit-custom'; export default function FileUploadWithAccept() { const handleFiles = (files) => { console.log('Files:', files); }; return ( ); } ``` ## Props \| Component | Prop | Type | Default | Description | \|:-----------|:------|:------|:---------|:-------------| | DropZone | onDropFiles | `(files: FileList) => void` | - | File drop handler | | DropZone \| isDisabled | `boolean` | `false` | Disabled state | | DropZone | accept | `string` | - | Accepted file types | | DropZone | multiple | `boolean` | `true` | Allow multiple files | | DropZone | title | `string` | `"Click to upload"` | Drop zone title | | DropZone | subtitle | `string` | - | Drop zone subtitle | | List | files | `UploadedFile[]` | - | Array of uploaded files | # Input Source: https://docs.devreadykit.com/components/input A flexible input component with support for text, number, and password types ## Overview The Input component provides a versatile text input with support for various types, validation states, icons, and helper text. ## Basic Usage ```tsx theme={null} import { useState } from "react"; import { Input } from "@peppermint-design/devreadykit-custom"; export default function InputExample() { const [value, setValue] = useState(''); return (
setValue(String(nextValue))} label="Full name" placeholder="e.g., Ada Lovelace" supportText="Use your legal name as on your ID." />
); } ``` ## Input Types ```tsx theme={null} import { useState } from "react"; import Input from "@peppermint-design/devreadykit-custom"; export default function InputTypes() { const [numberValue, setNumberValue] = useState(""); const [password, setPassword] = useState(""); return (
setPassword(String(value))} />
); } ``` ## With Labels and Helper Text ```tsx theme={null} import { useState } from "react"; import Input from "@peppermint-design/devreadykit-custom"; export default function InputWithLabels() { const [email, setEmail] = useState(""); const [required, setRequired] = useState(""); return (
setEmail(String(value))} /> setRequired(String(value))} />
); } ``` ## With Icons ### Start Icon ```tsx theme={null} import Input from "@peppermint-design/devreadykit-custom"; import { Circle } from "@/assets/icons/circle.tsx"; export default function InputWithIcons() { return (
} />
); } ``` ## Validation States ### Error State ```tsx theme={null} ``` ## States ### Disabled and read only ```tsx theme={null} import Input from "@peppermint-design/devreadykit-custom"; export default function InputStates() { return (
); } ``` ## Props | Prop | Type | Default | Description | | :----------- | :---------------------------------- | :------- | :---------------------------- | | type | `"text" \| "number" \| "password"` | `"text"` | Input type | | label | `string` | — | Input label | | placeholder | `string` | — | Placeholder text | | value | `string \| number` | `""` | Input value | | onChange | `(value: string \| number) => void` | — | Change handler | | disabled | `boolean` | `false` | Disabled state | | readOnly | `boolean` | `false` | Read only state | | required | `boolean` | `false` | Required field indicator | | errorMessage | `string` | — | Error message | | supportText | `string` | — | Helper text | | startIcon | `React.ReactNode` | — | Icon at start of input | | endIcon | `React.ReactNode` | — | Icon at end of input | | action | `React.ReactNode` | — | Action button | | min | `number` | — | Minimum value (number inputs) | | max | `number` | — | Maximum value (number inputs) | | step | `number` | `1` | Step value (number inputs) | | className | `string` | `""` | Additional CSS classes | ## Examples ### Contact Form ```tsx theme={null} import { Input, Button } from '@peppermint-design/devreadykit-custom'; import { useState } from 'react'; function ContactFormExample() { const [formData, setFormData] = useState({ name: '', email: '', phone: '' }); const handleSubmit = (e) => { e.preventDefault(); console.log('Form submitted!'); }; return (
setFormData(prev => ({ ...prev, name: value }))} required /> setFormData(prev => ({ ...prev, email: value }))} required /> setFormData((prev) => ({ ...prev, phone: String(value) })) } />
); } ``` # Link Source: https://docs.devreadykit.com/components/link Link component with hover effects and external link indicator ## Overview The Link component provides styled links with hover effects, external link indicators, and disabled states. ## Basic Usage ```tsx theme={null} import { Link } from '@peppermint-design/devreadykit-custom'; export default function LinkBasic() { return ( Learn more ); } ``` ## External Link ```tsx theme={null} import { Link } from '@peppermint-design/devreadykit-custom'; Visit external site ``` ## Hide Icon ```tsx theme={null} import { Link } from '@peppermint-design/devreadykit-custom'; Internal link without icon ``` ## Disabled ```tsx theme={null} import { Link } from '@peppermint-design/devreadykit-custom'; Disabled link ``` ## Props | Prop | Type | Default | Description | | :-------- | :---------------- | :------ | :---------------------- | | href | `string` | - | Link URL | | children | `React.ReactNode` | - | Link content | | disabled | `boolean` | `false` | Disabled state | | hideIcon | `boolean` | `false` | Hide external link icon | | className | `string` | - | Additional CSS classes | # Lists Source: https://docs.devreadykit.com/components/lists List component with ordered and unordered variants ## Overview The Lists component provides ordered and unordered lists with support for nested items and custom icons. ## Basic Usage ```tsx theme={null} import { Lists } from '@peppermint-design/devreadykit-custom'; export default function ListsBasic() { const items = [ { id: 1, content: 'First item' }, { id: 2, content: 'Second item' }, { id: 3, content: 'Third item' } ]; return ; } ``` ## Ordered List ```tsx theme={null} import { Lists } from '@peppermint-design/devreadykit-custom'; const items = [ { id: 1, content: 'First item' }, { id: 2, content: 'Second item' }, { id: 3, content: 'Third item' } ]; ``` ## Nested Items ```tsx theme={null} import { Lists } from '@peppermint-design/devreadykit-custom'; const nestedItems = [ { id: 1, content: 'Parent item', children: [ { id: 2, content: 'Child item 1' }, { id: 3, content: 'Child item 2' } ] } ]; ``` ## With Custom Icons ```tsx theme={null} import { Lists } from '@peppermint-design/devreadykit-custom'; import { Check } from '@/assets/icons'; const items = [ { id: 1, content: 'First item' }, { id: 2, content: 'Second item' }, { id: 3, content: 'Third item' } ]; } level2Icon={} /> ``` ## Props \| Prop | Type | Default | Description | \|:------|:------|:---------|:-------------| | items | `ListItem[]` | - | Array of list items | | ordered | `boolean` | `false` | Use ordered list | | level1Icon | `React.ReactNode` | - | Icon for first level | | level2Icon | `React.ReactNode` | - | Icon for second level | | className | `string` | - | Additional CSS classes | ### ListItem \| Prop | Type | Default | Description | \|:------|:------|:---------|:-------------| | id | `string \| number` | - | Item identifier | | content | `React.ReactNode` | - | Item content | | children | `ListItem[]` | - | Nested items | # Pagination Source: https://docs.devreadykit.com/components/pagination Pagination component with default and minimal variants ## Overview The Pagination component provides page navigation with two variants: default card style and minimal style. ## Basic Usage ```tsx theme={null} import { PaginationCardDefault } from '@peppermint-design/devreadykit-custom'; import { useState } from 'react'; export default function PaginationBasic() { const [page, setPage] = useState(1); return ( ); } ``` ## Minimal Variant ```tsx theme={null} import { PaginationCardMinimal } from '@peppermint-design/devreadykit-custom'; import { useState } from 'react'; export default function PaginationMinimal() { const [page, setPage] = useState(1); return ( ); } ``` ## With Custom Label ```tsx theme={null} import { PaginationCardMinimal } from '@peppermint-design/devreadykit-custom'; import { useState } from 'react'; export default function PaginationCustomLabel() { const [page, setPage] = useState(1); return ( `${page} / ${total}`} /> ); } ``` ## Props | Prop | Type | Default | Description | | :----------- | :----------------------- | :------ | :------------------------------ | | page | `number` | - | Current page number | | totalPages | `number` | `10` | Total number of pages | | onPageChange | `(page: number) => void` | - | Page change handler | | siblingCount | `number` | `1` | Number of sibling pages to show | | className | `string` | - | Additional CSS classes | ### PaginationCardMinimal Props | Prop | Type | Default | Description | | :------------- | :------------------------------------------------------ | :------- | :--------------------- | | align | `"left" \| "center" \| "right"` | `"left"` | Alignment | | showPageLabel | `boolean` | `true` | Show page label | | labelFormatter | `(page: number, totalPages: number) => React.ReactNode` | - | Custom label formatter | # Progress Source: https://docs.devreadykit.com/components/progress A progress bar component for displaying completion status ## Overview The Progress component displays completion status with customizable appearance and animations. ## Basic Usage ```tsx theme={null} import { Progress } from '@peppermint-design/devreadykit-custom'; export default function App() { return ; } ``` ## Different Values ```tsx theme={null} import { Progress } from '@peppermint-design/devreadykit-custom'; const values = [25, 50, 75, 100]; export default function ProgressExamples() { return (
{values.map((value) => ( ))}
); } ``` ## With Labels ```tsx theme={null} import { Progress } from '@peppermint-design/devreadykit-custom'; export default function LabelledProgress() { return ( ); } ``` ## Props | Prop | Type | Default | Description | | :---------------- | :-------- | :------ | :----------------------- | | value | `number` | — | Current progress value | | max | `number` | `100` | Maximum value | | className | `string` | — | Additional CSS classes | | progressClassName | `string` | — | Progress bar CSS classes | | animated | `boolean` | `true` | Show animation | | showPercentage | `boolean` | `false` | Show percentage text | ## Examples ### Upload Progress ```tsx theme={null} import { useEffect, useState } from 'react'; import { Progress } from '@peppermint-design/devreadykit-custom'; function UploadProgress({ fileName }: { fileName: string }) { const [progress, setProgress] = useState(18); useEffect(() => { const timer = window.setInterval(() => { setProgress((prev) => (prev >= 100 ? 100 : prev + Math.random() * 15)); }, 800); return () => window.clearInterval(timer); }, []); return (
{fileName} {Math.round(progress)}%
); } ``` ### Loading States ```tsx theme={null} import { useEffect, useState } from 'react'; import { Button, Progress } from '@peppermint-design/devreadykit-custom'; export default function LoadingProgress() { const [isLoading, setLoading] = useState(false); const [progress, setProgress] = useState(0); useEffect(() => { if (!isLoading) { setProgress(0); return; } const timer = window.setInterval(() => { setProgress((prev) => (prev >= 100 ? 100 : prev + Math.random() * 20)); }, 600); return () => window.clearInterval(timer); }, [isLoading]); return (
{isLoading && (
Loading… {Math.round(progress)}%
)}
); } ``` # Radio Button Source: https://docs.devreadykit.com/components/radio-button A radio button component for single selection from a group of options ## Overview The RadioButton component provides a radio input for single selection from a group of options, with support for labels, validation states, and error handling. ## Basic Usage ```tsx theme={null} import { useState } from "react"; import { RadioButton } from '@peppermint-design/devreadykit-custom'; export default function App() { const [selected, setSelected] = useState("option1"); return ( checked && setSelected("option1")} label="Option 1" name="group" value="option1" /> ); } ``` ## Radio Group ### Basic Group ```tsx theme={null} import { useState } from "react"; import { RadioButton } from '@peppermint-design/devreadykit-custom'; function RadioGroup() { const [selected, setSelected] = useState("option1"); return (
checked && setSelected("option1")} label="Option 1" name="group" value="option1" /> checked && setSelected("option2")} label="Option 2" name="group" value="option2" /> checked && setSelected("option3")} label="Option 3" name="group" value="option3" />
); } ``` ## Visual States ### Focus ```tsx theme={null} ``` ### Error ```tsx theme={null} ``` ### Disabled ```tsx theme={null} ``` ## Props | Prop | Type | Default | Description | | :-------------- | :--------------------------------------------------------------------- | :------- | :----------------------- | | checked | `boolean` | `false` | Checked state | | onCheckedChange | `(checked: boolean, event: ChangeEvent) => void` | — | Change handler | | visualState | `"rest" \| "focus" \| "error" \| "disabled" \| "default" \| "focused"` | `"rest"` | Visual state | | label | `React.ReactNode` | — | Label content | | required | `boolean` | `false` | Required field indicator | | errorMessage | `React.ReactNode` | — | Error message | | name | `string` | — | Name for radio group | | value | `string` | — | Value for radio button | | disabled | `boolean` | `false` | Disabled state | | className | `string` | — | Additional CSS classes | ## Examples ### Survey Form ```tsx theme={null} import { useState, type ChangeEvent } from "react"; import { RadioButton } from '@peppermint-design/devreadykit-custom'; function SurveyForm() { const [responses, setResponses] = useState({ satisfaction: "", recommendation: "", experience: "" }); const handleChange = (field: string) => (checked: boolean, event: ChangeEvent) => { if (checked) { setResponses(prev => ({ ...prev, [field]: event.target.value })); } }; return (

How satisfied are you?

{["very-satisfied", "satisfied", "neutral", "dissatisfied", "very-dissatisfied"].map(value => ( l.toUpperCase())} name="satisfaction" value={value} /> ))}
); } ``` ### Payment Method Selection ```tsx theme={null} import { useState } from "react"; import { RadioButton } from '@peppermint-design/devreadykit-custom'; function PaymentMethod() { const [method, setMethod] = useState("credit-card"); return (

Payment Method

checked && setMethod("credit-card")} label="Credit Card" name="payment" value="credit-card" /> checked && setMethod("paypal")} label="PayPal" name="payment" value="paypal" /> checked && setMethod("bank-transfer")} label="Bank Transfer" name="payment" value="bank-transfer" />
); } ``` # Range Slider Source: https://docs.devreadykit.com/components/range-slider A dual-handle slider component for selecting a range of values ## Overview The RangeSlider component provides a dual-handle slider for selecting a range of values within a specified min/max range. ## Basic Usage ```tsx theme={null} import { useState } from "react"; import { RangeSlider } from '@peppermint-design/devreadykit-custom'; export default function App() { const [range, setRange] = useState([20, 80]); return ( ); } ``` ## With Labels ```tsx theme={null} import { RangeSlider } from '@peppermint-design/devreadykit-custom'; export default function PriceRange() { return ( `$${value}`} /> ); } ``` ## Custom Ranges ```tsx theme={null} import { RangeSlider } from '@peppermint-design/devreadykit-custom'; export default function CustomRanges() { return (
`${value}°C`} /> `${value} years`} />
); } ``` ## Without Value Display ```tsx theme={null} import { RangeSlider } from '@peppermint-design/devreadykit-custom'; export default function VolumeRange() { return ( ); } ``` ## Disabled State ```tsx theme={null} import { RangeSlider } from '@peppermint-design/devreadykit-custom'; export default function DisabledRange() { return ( ); } ``` ## Props | Prop | Type | Default | Description | | :------------- | :---------------------------------- | :--------------------------- | :--------------------------- | | value | `[number, number]` | — | Current range (controlled) | | defaultValue | `[number, number]` | `[20, 80]` | Default range (uncontrolled) | | onValueChange | `(value: [number, number]) => void` | — | Change handler | | min | `number` | `0` | Minimum value | | max | `number` | `100` | Maximum value | | step | `number` | `1` | Step increment | | disabled | `boolean` | `false` | Disabled state | | showValue | `boolean` | `true` | Show current values | | formatValue | `(value: number) => string` | `(v) => Math.round(v) + '%'` | Value formatter | | label | `React.ReactNode` | — | Label content | | className | `string` | — | Additional CSS classes | | trackClassName | `string` | — | Track CSS classes | ## Examples ### Price Filter ```tsx theme={null} import { useState } from "react"; import { RangeSlider } from '@peppermint-design/devreadykit-custom'; function PriceFilter({ onRangeChange }: { onRangeChange: (range: [number, number]) => void }) { const [priceRange, setPriceRange] = useState<[number, number]>([50, 500]); return (
{ setPriceRange(range); onRangeChange(range); }} min={0} max={1000} step={10} formatValue={(value) => `$${value}`} />
Min: ${priceRange[0]} Max: ${priceRange[1]}
); } export default PriceFilter; ``` ### Date Range Picker ```tsx theme={null} import { useState } from "react"; import { RangeSlider } from '@peppermint-design/devreadykit-custom'; function DateRangePicker() { const [yearRange, setYearRange] = useState<[number, number]>([2020, 2024]); const formatYear = (year: number) => `${year}`; return (
{yearRange[0]} - {yearRange[1]}
); } export default DateRangePicker; ``` ### Filter Component ```tsx theme={null} import { useState } from "react"; import { RangeSlider } from '@peppermint-design/devreadykit-custom'; function ProductFilter() { const [filters, setFilters] = useState({ priceRange: [100, 800], ratingRange: [3, 5], weightRange: [0.5, 5.0] }); return (
setFilters(prev => ({ ...prev, priceRange: range }))} min={0} max={1000} step={25} formatValue={(value) => `$${value}`} /> setFilters(prev => ({ ...prev, ratingRange: range }))} min={1} max={5} step={0.1} formatValue={(value) => `${value.toFixed(1)}★`} /> setFilters(prev => ({ ...prev, weightRange: range }))} min={0} max={10} step={0.1} formatValue={(value) => `${value.toFixed(1)}kg`} />
); } export default ProductFilter; ``` # Sidebar Source: https://docs.devreadykit.com/components/sidebar Collapsible sidebar component with sections and navigation ## Overview The Sidebar component provides a collapsible sidebar with sections, navigation items, and customizable width. ## Basic Usage ```tsx theme={null} import { Sidebar } from '@peppermint-design/devreadykit-custom'; export default function SidebarBasic() { return ( Header Content Footer ); } ``` ## Collapsible ```tsx theme={null} import { Sidebar } from '@peppermint-design/devreadykit-custom'; export default function SidebarCollapsible() { return ( My App Navigation ); } ``` ## Controlled ```tsx theme={null} import { Sidebar } from '@peppermint-design/devreadykit-custom'; import { useState } from 'react'; export default function SidebarControlled() { const [collapsed, setCollapsed] = useState(false); return ( My App Navigation ); } ``` ## Props | Prop | Type | Default | Description | | :---------------- | :----------------------------- | :------ | :------------------------- | | defaultCollapsed | `boolean` | `false` | Default collapsed state | | collapsed | `boolean` | - | Controlled collapsed state | | onCollapsedChange | `(collapsed: boolean) => void` | - | Collapsed change handler | | expandedWidth | `number` | `256` | Expanded width in pixels | | collapsedWidth | `number` | `64` | Collapsed width in pixels | | animate | `boolean` | `true` | Enable animations | | collapsible | `boolean` | `true` | Allow collapsing | | className | `string` | - | Additional CSS classes | # Slider Source: https://docs.devreadykit.com/components/slider A slider component for selecting numeric values within a range ## Overview The Slider component provides a draggable slider for selecting numeric values within a specified range, with support for keyboard navigation and custom formatting. ## Basic Usage ```tsx theme={null} import { useState } from "react"; import { Slider } from '@peppermint-design/devreadykit-custom'; export default function App() { const [value, setValue] = useState(50); return ( ); } ``` ## With Labels ```tsx theme={null} import { Slider } from '@peppermint-design/devreadykit-custom'; export default function VolumeSlider() { return ( `${value}%`} /> ); } ``` ## Custom Ranges ```tsx theme={null} import { Slider } from '@peppermint-design/devreadykit-custom'; export default function CustomRanges() { return (
`${value}°C`} /> `$${value}`} />
); } ``` ## Without Value Display ```tsx theme={null} import { Slider } from '@peppermint-design/devreadykit-custom'; export default function VolumeWithoutValue() { return ( ); } ``` ## Disabled State ```tsx theme={null} import { Slider } from '@peppermint-design/devreadykit-custom'; export default function DisabledSlider() { return ( ); } ``` ## Props | Prop | Type | Default | Description | | :------------- | :-------------------------- | :--------------------------- | :--------------------------- | | value | `number` | — | Current value (controlled) | | defaultValue | `number` | `0` | Default value (uncontrolled) | | onValueChange | `(value: number) => void` | — | Change handler | | min | `number` | `0` | Minimum value | | max | `number` | `100` | Maximum value | | step | `number` | `1` | Step increment | | disabled | `boolean` | `false` | Disabled state | | showValue | `boolean` | `true` | Show current value | | formatValue | `(value: number) => string` | `(v) => Math.round(v) + '%'` | Value formatter | | label | `React.ReactNode` | — | Label content | | className | `string` | — | Additional CSS classes | | trackClassName | `string` | — | Track CSS classes | ## Examples ### Volume Control ```tsx theme={null} import { useState } from "react"; import { Slider } from '@peppermint-design/devreadykit-custom'; function VolumeControl() { const [volume, setVolume] = useState(75); return (
`${Math.round(value)}%`} />
Mute Max
); } export default VolumeControl; ``` ### Temperature Control ```tsx theme={null} import { useState } from "react"; import { Slider } from '@peppermint-design/devreadykit-custom'; function TemperatureControl() { const [temperature, setTemperature] = useState(22); const getTemperatureColor = (temp: number) => { if (temp < 10) return 'text-blue-600'; if (temp < 20) return 'text-green-600'; if (temp < 30) return 'text-yellow-600'; return 'text-red-600'; }; return (
`${value.toFixed(1)}°C`} />
Current: {temperature.toFixed(1)}°C
); } export default TemperatureControl; ``` # Spinner Source: https://docs.devreadykit.com/components/spinner Loading spinner component with determinate and indeterminate modes ## Overview The Spinner component displays loading indicators with support for determinate (with progress) and indeterminate modes, multiple sizes, and label placement. ## Basic Usage ```tsx theme={null} import { Spinner } from '@peppermint-design/devreadykit-custom'; export default function SpinnerBasic() { return ; } ``` ## Sizes ```tsx theme={null} import { Spinner } from '@peppermint-design/devreadykit-custom'; ``` ## With Label ```tsx theme={null} import { Spinner } from '@peppermint-design/devreadykit-custom'; ``` ## Determinate (With Progress) ```tsx theme={null} import { Spinner } from '@peppermint-design/devreadykit-custom'; ``` ## Props | Prop | Type | Default | Description | | :------------- | :--------------------- | :-------- | :----------------------------------------------- | | size | `"sm" \| "md" \| "lg"` | `"md"` | Spinner size | | label | `string` | - | Loading label text | | labelPlacement | `"right" \| "bottom"` | `"right"` | Label position | | progress | `number` | - | Progress percentage (0-100) for determinate mode | | className | `string` | - | Additional CSS classes | # Stepper Source: https://docs.devreadykit.com/components/stepper Stepper component for displaying multi-step processes ## Overview The Stepper component displays multi-step processes with support for multiple variants (compact, timeline, vertical, underline, numeric) and step statuses. ## Basic Usage ```tsx theme={null} import { Stepper } from '@peppermint-design/devreadykit-custom'; export default function StepperBasic() { const steps = [ { title: 'Step 1', description: 'Description 1' }, { title: 'Step 2', description: 'Description 2' }, { title: 'Step 3', description: 'Description 3' } ]; return ; } ``` ## Variants ```tsx theme={null} import { Stepper } from '@peppermint-design/devreadykit-custom'; const steps = [ { title: 'Step 1', description: 'Description 1' }, { title: 'Step 2', description: 'Description 2' }, { title: 'Step 3', description: 'Description 3' } ]; ``` ## With Current Step ```tsx theme={null} import { Stepper } from '@peppermint-design/devreadykit-custom'; const steps = [ { title: 'Step 1', description: 'Description 1' }, { title: 'Step 2', description: 'Description 2' }, { title: 'Step 3', description: 'Description 3' } ]; ``` ## Props | Prop | Type | Default | Description | | :---------- | :------------------------------------------------------------------ | :------ | :------------------------ | | steps | `StepperStep[]` | - | Array of step objects | | currentStep | `number` | - | Current active step index | | variant | `"compact" \| "timeline" \| "vertical" \| "underline" \| "numeric"` | - | Stepper variant | | label | `string` | - | Optional label | | className | `string` | - | Additional CSS classes | ### StepperStep | Prop | Type | Default | Description | | :---------- | :-------------------------------------- | :------ | :--------------- | | title | `string` | - | Step title | | description | `string` | - | Step description | | status | `"complete" \| "current" \| "upcoming"` | - | Step status | # Table Source: https://docs.devreadykit.com/components/table Flexible data table with compound components, built-in sorting, and row selection. ## Overview `Table` follows a compound-component API so you can compose headers, body rows, and cells declaratively while keeping visual styles and interactions consistent with the design system. ## Basic Usage ```tsx theme={null} import { Table } from '@peppermint-design/devreadykit-custom'; type Invoice = { id: string; label: string; due: string; amount: number; }; const invoices: Invoice[] = [ { id: "inv-101", label: "Brand identity", due: "Jan 18, 2025", amount: 3800 }, { id: "inv-102", label: "Website redesign", due: "Jan 22, 2025", amount: 5600 }, ]; export default function TableBasic() { return ( {(invoice) => ( {invoice.label} {invoice.due} ${invoice.amount.toLocaleString()} )}
); } ``` ## Selection & Actions Enable checkboxes by setting `selectionMode`. Rows register automatically and the header renders a "select all" checkbox for multiple selection. ```tsx theme={null} import { useState } from "react"; import { Table, Badge } from "@peppermint-design/devreadykit-custom"; import { Overflow } from "@/assets/icons/overflow"; type Member = { id: string; name: string; role: string; status: "active" | "inactive"; }; const members: Member[] = [ { id: "ava", name: "Ava Reynolds", role: "Designer", status: "active" }, { id: "miles", name: "Miles Chen", role: "Engineering Manager", status: "inactive" }, ]; export default function TableWithSelection() { const [selected, setSelected] = useState([]); return ( {(member) => ( {member.name} {member.status} {member.role} )}
); } ``` ## Sorting Pass a controlled `sortDescriptor` to drive column sorting. Clicking any header with `allowsSorting` toggles between ascending and descending order. ```tsx theme={null} import { useMemo, useState } from "react"; import { Table, type TableSortDescriptor } from "@peppermint-design/devreadykit-custom"; type Customer = { id: string; name: string; total: number; }; const customers: Customer[] = [ { id: "1", name: "Andrew Martin", total: 760 }, { id: "2", name: "Jessica Taylor", total: 540 }, ]; export default function SortableTable() { const [sortDescriptor, setSortDescriptor] = useState({ column: "name", direction: "ascending", }); const sortedCustomers = useMemo(() => { const items = [...customers]; const multiplier = sortDescriptor.direction === "ascending" ? 1 : -1; return items.sort((a, b) => sortDescriptor.column === "total" ? (a.total - b.total) * multiplier : a.name.localeCompare(b.name) * multiplier, ); }, [sortDescriptor]); return ( {(customer) => ( {customer.name} ${customer.total.toLocaleString()} )}
); } ``` ## Rich Cells Compose cells with any JSX — avatars, badges, or multi-line content — while keeping spacing and typography consistent. ```tsx theme={null} import { Table, Avatar } from '@peppermint-design/devreadykit-custom';
{member.name}
{member.email}
 ``` ## Props | Prop | Type | Default | Description | | :------------------ | :------------------------------------------ | :-------------------- | :---------------------------------------------------------- | | children | `React.ReactNode` | – | Compose `Table.Header` and `Table.Body` inside the table. | | caption | `React.ReactNode` | – | Optional caption rendered before the header. | | header | `React.ReactNode` | – | Toolbar/header area rendered above the table content. | | zebra | `boolean` | `false` | Applies alternating background colors to body rows. | | stickyHeader | `boolean` | `false` | Makes the header stick to the top while scrolling. | | rowClickable | `boolean` | `false` | Adds pointer affordances and hover state to rows. | | emptyState | `React.ReactNode` | `"No data available"` | Content shown when the body has no rows. | | selectionMode | `"none" \| "single" \| "multiple"` | `"none"` | Enables row selection. `"multiple"` adds a header checkbox. | | selectedKeys | `React.Key[]` | – | Controlled selection keys. | | defaultSelectedKeys | `React.Key[]` | `[]` | Initial selection for uncontrolled usage. | | onSelectionChange | `(keys: React.Key[]) => void` | – | Called when row selection changes. | | sortDescriptor | `TableSortDescriptor \| null` | `null` | Controlled sorting state. | | onSortChange | `(descriptor: TableSortDescriptor) => void` | – | Called when a sortable header is clicked. | | tableClassName | `string` | – | Additional classes applied to the `` element. | ### `Table.Head` | Prop | Type | Default | Description | | :------------ | :------------------------------ | :------- | :---------------------------------------------------------------------------- | | id | `string` | – | Unique identifier for the column. | | label | `React.ReactNode` | – | Header label. If omitted, children render instead. | | allowsSorting | `boolean` | `false` | Enables sort toggling on click. | | align | `"left" \| "center" \| "right"` | `"left"` | Text alignment for the entire column. | | tooltip | `string` | – | Optional title attribute for the header. | | isRowHeader | `boolean` | `false` | Marks the column as a row header, rendering body cells as `
`. | ### `Table.Body` | Prop | Type | Default | Description | | :------- | :----------------------------------------------------------------------------- | :------ | :--------------------------------------- | | items | `T[]` | – | Data items to render. | | children | `React.ReactNode \| (item: T, index: number) => React.ReactElement` | – | Either a render function or static rows. | ### `Table.Row` | Prop | Type | Default | Description | | :--------- | :---------- | :------ | :----------------------------------------------- | | id | `React.Key` | – | Row identifier used for selection. | | isDisabled | `boolean` | `false` | Disables selection and hover styles for the row. | ### `Table.Cell` | Prop | Type | Default | Description | | :---------- | :------------------------------ | :------- | :----------------------------------------------- | | align | `"left" \| "center" \| "right"` | `"left"` | Overrides alignment for the cell. | | isRowHeader | `boolean` | `false` | Forces the cell to render as ``. | ## Types ```ts theme={null} type TableSelectionMode = "none" | "single" | "multiple"; type TableSortDirection = "ascending" | "descending"; type TableSortDescriptor = { column: string; direction: TableSortDirection; }; ``` # Tabs Source: https://docs.devreadykit.com/components/tabs A tabs component for organizing content into multiple panels ## Overview The Tabs component provides a tabbed interface for organizing content into multiple panels. ## Basic Usage ```tsx theme={null} import { Tabs, TabsList, TabsTrigger, TabsContent } from '@peppermint-design/devreadykit-custom'; export default function App() { return ( Tab 1 Tab 2 Tab 3

Content for tab 1

Content for tab 2

Content for tab 3

 ); } ``` ## With Icons ```tsx theme={null} import { Tabs, TabsList, TabsTrigger, TabsContent } from '@peppermint-design/devreadykit-custom'; import { User } from '@/assets/icons/user'; import { Edit } from '@/assets/icons/edit'; import { Users } from "@/assets/icons/users.tsx"; export default function TabsWithIcons() { return ( Profile Settings Help
Profile content
Settings content
Help content
 ); } ``` ## Vertical Tabs ```tsx theme={null} import { Tabs, TabsList, TabsTrigger, TabsContent } from '@peppermint-design/devreadykit-custom'; export default function VerticalTabs() { return (
Overview Details History
Overview content
Details content
History content
); } ``` ## Props | Component | Prop | Type | Default | Description | | :---------- | :------------ | :--------------------------- | :------------- | :--------------------- | | Tabs | defaultValue | `string` | — | Default active tab | | Tabs | value | `string` | — | Controlled active tab | | Tabs | onValueChange | `(value: string) => void` | — | Tab change handler | | Tabs | orientation | `"horizontal" \| "vertical"` | `"horizontal"` | Tab orientation | | Tabs | children | `React.ReactNode` | — | Tab content | | TabsList | children | `React.ReactNode` | — | Tab triggers | | TabsList | className | `string` | — | Additional CSS classes | | TabsTrigger | value | `string` | — | Tab value | | TabsTrigger | children | `React.ReactNode` | — | Tab label | | TabsTrigger | disabled | `boolean` | `false` | Disabled state | | TabsTrigger | className | `string` | — | Additional CSS classes | | TabsContent | value | `string` | — | Content value | | TabsContent | children | `React.ReactNode` | — | Tab content | | TabsContent | className | `string` | — | Additional CSS classes | ## Examples ### User Profile Tabs ```tsx theme={null} import { useState } from "react"; import { Tabs, TabsList, TabsTrigger, TabsContent, Toggle } from '@peppermint-design/devreadykit-custom'; export default function UserProfileTabs() { const user = { name: "Jane Doe", email: "jane.doe@example.com", activity: [ { id: 1, description: "Signed in from Chrome on macOS" }, { id: 2, description: "Updated profile information" }, { id: 3, description: "Enabled two-factor authentication" }, ], }; const [emailNotifications, setEmailNotifications] = useState(true); const [darkMode, setDarkMode] = useState(false); return ( Profile Activity Settings

Profile Information

{user.name}

{user.email}

Recent Activity

{user.activity.map(activity => (
{activity.description}
))}

Account Settings

 ); } ``` # Textarea Source: https://docs.devreadykit.com/components/textarea A textarea component with auto-growing support and validation states ## Overview The Textarea component provides a multi-line text input with support for auto-growing, validation states, labels, and helper text. ## Basic Usage ```tsx theme={null} import { useState } from "react"; import { Textarea } from '@peppermint-design/devreadykit-custom'; export default function App() { const [value, setValue] = useState(""); return (