promptui-react

v0.2.0

Published

6 hours ago

React components for PromptUI - AI-generated UI components with native React support

0High
0Medium
0Low

raviuideveloper

react components ui table modal dialog input form textfield promptui ai-generated web-components typescript

promptui-react

React components for PromptUI - AI-generated UI components with native React support.

Installation

npm install promptui-react
# or
yarn add promptui-react
# or
pnpm add promptui-react

Setup

Add the PromptUI CDN script to your HTML (usually in index.html or _document.tsx):

<script src="https://www.uxclicks.com/cdn/v1/promptui.js" data-api-key="YOUR_API_KEY"></script>

⚠️ Important: The CDN script with a valid API key is required for the components to work. Without it, the React components will render but won't display properly.

Get your API key from: https://www.uxclicks.com/dashboard

Available Components

PromptUI React provides the following components:

Table - Data tables with sorting, filtering, and pagination
Modal - Dialog modals with customizable actions
Input - Text input fields with validation
Textbox - Multi-line text input (textarea)
Radio - Radio button groups
Checkbox - Checkbox inputs
Dropdown - Select dropdowns with search
Toggle - Toggle switches
Tooltip - Tooltips with custom positioning
Accordion - Collapsible accordion sections
Tab - Tabbed interfaces with custom headers and content
Range - Range/slider inputs for selecting single values or value ranges
DatePicker - Date picker with single/range selection, time, and timezone support
Carousel - Sliding carousel component with navigation arrows and pagination dots
Link - Link component with href/onClick support, validation states, and target options
Button - Button component with variants (primary, secondary, danger, warning), sizes, loading states, and icon support
Hero - Hero/card component for displaying headings, subheadings, and content with customizable borders, shadows, and styling
Card - Flexible card component with header, body, footer sections, image support (top/left/right), and action buttons
Popover - Popover component with all 12 placement directions (top, bottom, left, right with start/end variants), title, content, action buttons, and multiple trigger types (click, hover, focus, manual)
Sidebar - Draggable sidebar/drawer component that slides in from left or right with resizable width
Navbar - Navigation bar component with multi-level menu support (up to 3 levels), hover interactions, and mobile responsive design
List - Ordered and unordered list components with custom markers and styling
Toast - Toast notification component with auto-dismiss, manual close, and multiple variants
Alert - Inline alert/banner component for displaying persistent messages (not floating like Toast)
Graph - Comprehensive charting component supporting line, bar, area, scatter (2D) and pie, donut (circular) charts
FileUpload - File upload component with drag-and-drop support, file preview, upload progress, and validation
Badge - Versatile badge component that can be used as badge (notification), chip (removable), tag (label), or pill (rounded)
Progress - Progress bar component for displaying task completion, loading states, and percentages
Spinner - Spinner/loader component for indicating loading states with multiple animation variants
Skeleton - Skeleton loader component for displaying loading placeholders with shimmer/pulse animation
Avatar - Avatar component for displaying user profile pictures, initials, or icons with status indicators
Breadcrumb - Breadcrumb navigation component showing the current page location in a hierarchy
Divider - Divider/separator component for creating visual separation with optional labels
Stepper - Multi-step wizard/stepper component for guiding users through processes with horizontal and vertical layouts

All components support:

✅ TypeScript types
✅ Custom styling (className, style, theme, cssVars)
✅ Brand Colors - Automatic theme generation from 5 brand colors (v0.2.0+)
✅ Dark mode
✅ Accessibility (ARIA attributes, keyboard navigation)
✅ Callbacks for user interactions

Usage

🎨 Brand Colors (NEW in v0.2.0)

All components now support automatic theme generation from your brand colors! Simply provide 5 colors and the system automatically generates:

✅ Hover states (10% darker)
✅ Active states (15% darker)
✅ Disabled states (30% desaturated)
✅ Accessible text colors (WCAG contrast-checked)
✅ Complete CSS variable set

Example:

import { Button, Table, Input } from 'promptui-react';

function App() {
  // Define your brand colors once
  const brandColors = {
    primary: "#10b981",    // Your brand's primary color
    secondary: "#6b7280",  // Secondary/neutral color
    success: "#22c55e",    // Success state color
    warning: "#f59e0b",    // Warning state color
    error: "#ef4444"       // Error/danger state color
  };

  return (
    <>
      <Button brandColors={brandColors}>
        Themed Button
      </Button>
      
      <Table 
        data={tableData}
        columns={columns}
        brandColors={brandColors}
      />
      
      <Input 
        label="Email"
        brandColors={brandColors}
      />
    </>
  );
}

✨ Benefits:

Maintains brand consistency across all components
No manual CSS variable configuration needed
Works with all 34 UI components
Perfect for white-label applications

Table Component (Main Example)

Functional Component

import { Table } from 'promptui-react';

function MyApp() {
  const columns = [
    { key: 'name', header: 'Name', sortable: true },
    { key: 'email', header: 'Email', render: 'link' },
    { key: 'role', header: 'Role', filterable: true }
  ];

  const data = [
    { name: 'John Doe', email: '[email protected]', role: 'Admin' },
    { name: 'Jane Smith', email: '[email protected]', role: 'User' }
  ];

  return (
    <Table
      columns={columns}
      data={data}
      pagination={{ enabled: true, pageSize: 10 }}
      sorting={{ enabled: true }}
      filter={{ enabled: true }}
      onSort={(sortedData, config) => {
        console.log('Data sorted:', config);
      }}
    />
  );
}

Class Component

import React from 'react';
import { Table } from 'promptui-react';

class MyApp extends React.Component {
  columns = [
    { key: 'name', header: 'Name', sortable: true },
    { key: 'email', header: 'Email', render: 'link' }
  ];

  data = [
    { name: 'John Doe', email: '[email protected]' }
  ];

  handleSort = (sortedData, config) => {
    console.log('Data sorted:', config);
  }

  render() {
    return (
      <Table
        columns={this.columns}
        data={this.data}
        pagination={{ enabled: true, pageSize: 10 }}
        sorting={{ enabled: true }}
        onSort={this.handleSort}
      />
    );
  }
}

Server-Side Data Fetching

import { Table, TableFetchDataParams } from 'promptui-react';

function ServerSideTable() {
  const handleFetchData = async (params: TableFetchDataParams) => {
    const response = await fetch(`/api/users?page=${params.page}&size=${params.pageSize}`);
    const result = await response.json();
    
    return {
      data: result.users,
      totalRows: result.total
    };
  };

  return (
    <Table
      columns={[...]}
      data={[]} // Empty for server-side
      pagination={{
        enabled: true,
        pageSize: 20,
        mode: 'server'
      }}
      sorting={{
        enabled: true,
        mode: 'server'
      }}
      onFetchData={handleFetchData}
    />
  );
}

Modal Component

import { Modal } from 'promptui-react';
import { useState } from 'react';

function MyApp() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      <Modal
        open={isOpen}
        onOpenChange={setIsOpen}
        title="Welcome"
        content="This is a modal dialog"
        size="md"
        variant="default"
        closeButton={{ enabled: true, position: 'header' }}
        closeOnEscape={true}
        actions={[
          { label: 'Cancel', variant: 'ghost', action: 'cancel' },
          { label: 'OK', variant: 'primary', action: 'ok' }
        ]}
        onAction={(action) => {
          console.log('Action:', action);
          setIsOpen(false);
        }}
        onClose={() => setIsOpen(false)}
      />
    </>
  );
}

Modal Options

closeOnEscape: Set to false to prevent closing on ESC key (default: true)
closeOnOverlayClick: Set to false to prevent closing on overlay click (default: true)
preventClose: Set to true to disable all close mechanisms (default: false)
size: 'sm' | 'md' | 'lg' | 'xl' | 'full' (default: 'md')
variant: 'default' | 'alert' | 'confirmation' | 'form' (default: 'default')
position: 'center' | 'top' | 'bottom' (default: 'center')

Input Component

import { Input } from 'promptui-react';
import { useState } from 'react';

function MyApp() {
  const [value, setValue] = useState('');
  const [error, setError] = useState('');

  const handleChange = (newValue: string) => {
    setValue(newValue);
    // Validate on change
    if (newValue.length < 3) {
      setError('Value must be at least 3 characters');
    } else {
      setError('');
    }
  };

  const handleBlur = () => {
    // Final validation on blur
    if (value.length < 3) {
      setError('Value must be at least 3 characters');
    }
  };

  const handleEnter = (value: string) => {
    // Submit form or search
    console.log('Submitting:', value);
  };

  return (
    <Input
      type="email"
      label="Email Address"
      placeholder="Enter your email"
      value={value}
      onChange={handleChange}
      onBlur={handleBlur}
      onEnter={handleEnter}
      validationState={error ? 'error' : 'default'}
      errorMessage={error}
      required
      showClearButton
      size="md"
      variant="outlined"
    />
  );
}

Input Options

type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local' | 'month' | 'week' (default: 'text')
size: 'sm' | 'md' | 'lg' (default: 'md')
variant: 'default' | 'outlined' | 'filled' (default: 'default')
validationState: 'default' | 'error' | 'success' | 'warning' (default: 'default')
showClearButton: Show X button to clear input (default: false)
showCharacterCount: Show character counter with maxLength (default: false)
leftIcon / rightIcon: Add icons to input
onChange: Required callback - fires on every keystroke
onBlur: Optional - fires when input loses focus (good for validation)
onEnter: Optional - fires when Enter key is pressed
onClear: Optional - fires when clear button is clicked

Other Components

All components follow the same pattern as Table. Here are quick examples:

Textbox (Multi-line Input)

import { Textbox } from 'promptui-react';

<Textbox
  label="Description"
  placeholder="Enter description"
  value={value}
  onChange={setValue}
  rows={5}
  resize="vertical"
/>

Radio

import { Radio } from 'promptui-react';

<Radio
  options={[
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' }
  ]}
  value={selected}
  onChange={setSelected}
/>

Checkbox

import { Checkbox } from 'promptui-react';

<Checkbox
  label="Accept terms"
  checked={accepted}
  onChange={setAccepted}
/>

Dropdown

import { Dropdown } from 'promptui-react';

<Dropdown
  options={[
    { value: '1', label: 'Option 1' },
    { value: '2', label: 'Option 2' }
  ]}
  value={selected}
  onChange={setSelected}
  searchable
  placeholder="Select an option"
/>

Toggle

import { Toggle } from 'promptui-react';

<Toggle
  label="Enable notifications"
  checked={enabled}
  onChange={setEnabled}
/>

Tooltip

import { Tooltip } from 'promptui-react';

<Tooltip
  content="This is a tooltip"
  placement="top"
  trigger="hover"
>
  <button>Hover me</button>
</Tooltip>

Accordion

import { Accordion } from 'promptui-react';

<Accordion
  items={[
    { id: '1', title: 'Section 1', content: 'Content 1' },
    { id: '2', title: 'Section 2', content: 'Content 2' }
  ]}
  defaultOpenIndex={0}
  allowMultiple={false}
/>

Tab

import { Tab } from 'promptui-react';

<Tab
  tabs={[
    { id: '1', header: 'Tab 1', body: 'Content 1' },
    { id: '2', header: 'Tab 2', body: 'Content 2' }
  ]}
  defaultActiveTab="1"
  columns={2}
/>

Range

import { Range } from 'promptui-react';
import { useState } from 'react';

function MyComponent() {
  const [value, setValue] = useState(50);
  const [rangeValue, setRangeValue] = useState([100, 500]);

  return (
    <>
      {/* Single value slider */}
      <Range
        mode="single"
        min={0}
        max={100}
        value={value}
        onChange={(val) => setValue(val as number)}
        label="Volume"
        showValue
      />

      {/* Price range slider */}
      <Range
        mode="range"
        min={0}
        max={1000}
        value={rangeValue}
        onChange={(val) => setRangeValue(val as [number, number])}
        label="Price Range"
        showValue
        valueFormat={(val: number) => `$${val}`}
      />
    </>
  );
}

DatePicker

import { DatePicker } from 'promptui-react';
import { useState } from 'react';

function MyComponent() {
  const [date, setDate] = useState<string>('');
  const [dateRange, setDateRange] = useState<{ from: string; to: string } | undefined>();

  return (
    <>
      {/* Single date picker */}
      <DatePicker
        mode="single"
        label="Select Date"
        placeholder="Choose a date"
        value={date}
        onChange={(val) => setDate(val as string)}
        dateFormat="MM/DD/YYYY"
        minDate={new Date().toISOString().split('T')[0]}
        disabledDates={['2024-12-25', '2025-01-01']}
      />

      {/* Date range picker */}
      <DatePicker
        mode="range"
        label="Date Range"
        placeholder="Select date range"
        value={dateRange}
        onChange={(val) => setDateRange(val as { from: string; to: string })}
        dateFormat="MM/DD/YYYY"
      />

      {/* Date picker with time */}
      <DatePicker
        mode="single"
        label="Date & Time"
        showTime={true}
        timeFormat="12h"
        showSeconds={false}
        value={date}
        onChange={(val) => setDate(val as string)}
      />

      {/* Date picker with timezone */}
      <DatePicker
        mode="single"
        label="Date, Time & Timezone"
        showTime={true}
        showTimezone={true}
        timezone="UTC"
        value={date}
        onChange={(val) => setDate(val as string)}
      />
    </>
  );
}

DatePicker Options

mode: 'single' | 'range' (default: 'single')
dateFormat: 'MM/DD/YYYY' | 'DD/MM/YYYY' | 'YYYY-MM-DD' | 'DD-MM-YYYY' | 'MMM DD, YYYY' | 'DD MMM YYYY' (default: 'MM/DD/YYYY')
showTime: Show time picker (default: false)
timeFormat: '12h' | '24h' (default: '12h')
showSeconds: Show seconds in time picker (default: false)
showTimezone: Show timezone selector (default: false)
timezone: Timezone string (e.g., 'UTC', 'GMT', 'IST', 'America/New_York')
minDate / maxDate: Minimum/maximum selectable dates
disabledDates: Array of disabled date strings
disabledDateRanges: Array of disabled date ranges
size: 'sm' | 'md' | 'lg' (default: 'md')
variant: 'default' | 'outlined' | 'filled' (default: 'default')
validationState: 'default' | 'error' | 'success' | 'warning' (default: 'default')

Carousel

import { Carousel } from 'promptui-react';

function MyComponent() {
  const items = [
    { id: '1', content: 'Slide 1 Content' },
    { id: '2', content: 'Slide 2 Content' },
    { id: '3', content: 'Slide 3 Content' }
  ];

  return (
    <Carousel
      items={items}
      slideMode="single"
      showDots={true}
      showArrows={true}
      onChange={(index, item) => {
        console.log('Active item:', index, item);
      }}
      onSlide={(direction, index) => {
        console.log('Slid:', direction, 'to index', index);
      }}
    />
  );
}

Carousel Options

items: Array of carousel items { id: string, content: string | ReactNode } (required)
slideMode: 'single' | 'all' (default: 'single') - Slide one item at a time or show all items
showDots: Show pagination dots (default: true)
showArrows: Show left/right navigation arrows (default: true)
autoDisableArrows: Automatically disable arrows when at start/end (default: true)
defaultActiveIndex: Index of item to show by default (default: 0)
loop: Loop back to start when reaching the end (default: false)
size: 'sm' | 'md' | 'lg' (default: 'md')
variant: 'default' | 'outlined' | 'filled' (default: 'default')

Link

import { Link } from 'promptui-react';

function MyComponent() {
  return (
    <>
      {/* Basic link */}
      <Link
        href="https://example.com"
        target="_self"
      >
        Click here
      </Link>

      {/* Link opening in new tab */}
      <Link
        href="https://example.com"
        target="_blank"
        validationState="info"
        infoMessage="This link opens in a new tab"
      >
        External link
      </Link>

      {/* Link with onClick (button-like) */}
      <Link
        onClick={(event) => {
          event.preventDefault();
          console.log('Link clicked');
        }}
        variant="button"
      >
        Submit
      </Link>

      {/* Link with warning state */}
      <Link
        href="https://external.com"
        target="_blank"
        validationState="warning"
        warningMessage="This link opens an external website"
      >
        External website
      </Link>
    </>
  );
}

Link Options

children: Link text content (string or ReactNode) (required if label not provided)
href: URL to navigate to (if provided, renders as <a> tag)
onClick: Callback when link is clicked (if provided without href, renders as <button>)
target: '_self' | '_blank' | '_parent' | '_top' (default: '_self') - Link target
rel: Link rel attribute (automatically set to "noopener noreferrer" for _blank if not provided)
download: Download file instead of navigating (default: false)
disabled: Prevents navigation and shows disabled styling (default: false)
label: Link label (if children not provided)
helpText: Help text below link
infoMessage: Info message (shows when validationState is "info")
warningMessage: Warning message (shows when validationState is "warning")
errorMessage: Error message (shows when validationState is "error")
size: 'sm' | 'md' | 'lg' (default: 'md')
variant: 'default' | 'underlined' | 'button' (default: 'default')
validationState: 'default' | 'info' | 'warning' | 'error' (default: 'default')
onFocus: Callback when link receives focus
onBlur: Callback when link loses focus
onMouseEnter: Callback when mouse enters link
onMouseLeave: Callback when mouse leaves link

Button

import { Button } from 'promptui-react';

function MyComponent() {
  return (
    <>
      {/* Primary button */}
      <Button
        variant="primary"
        onClick={(event) => {
          console.log('Clicked');
        }}
      >
        Submit
      </Button>

      {/* Secondary button */}
      <Button
        variant="secondary"
        onClick={(event) => {
          console.log('Cancelled');
        }}
      >
        Cancel
      </Button>

      {/* Danger button */}
      <Button
        variant="danger"
        onClick={(event) => {
          console.log('Deleted');
        }}
      >
        Delete
      </Button>

      {/* Warning button */}
      <Button
        variant="warning"
        onClick={(event) => {
          console.log('Warning action');
        }}
      >
        Warning
      </Button>

      {/* Loading button */}
      <Button
        variant="primary"
        loading={true}
        onClick={(event) => {
          console.log('Submitting');
        }}
      >
        Submit
      </Button>

      {/* Button with icon */}
      <Button
        variant="primary"
        leftIcon={{ element: '💾', position: 'left' }}
        onClick={(event) => {
          console.log('Saved');
        }}
      >
        Save
      </Button>
    </>
  );
}

Button Options

children: Button text content (string or ReactNode) (required if label not provided)
label: Button label (if children not provided)
variant: 'primary' | 'secondary' | 'danger' | 'warning' (default: 'primary')
size: 'sm' | 'md' | 'lg' (default: 'md')
type: 'button' | 'submit' | 'reset' (default: 'button')
disabled: Prevents interaction and shows disabled styling (default: false)
loading: Shows spinner and disables button (default: false)
fullWidth: Makes button span entire container width (default: false)
leftIcon: Icon configuration for left side of button
rightIcon: Icon configuration for right side of button
helpText: Help text below button
onClick: Callback when button is clicked (REQUIRED)
onFocus: Callback when button receives focus
onBlur: Callback when button loses focus
onMouseEnter: Callback when mouse enters button
onMouseLeave: Callback when mouse leaves button

Hero

import { Hero } from 'promptui-react';

function MyComponent() {
  return (
    <>
      {/* Basic hero */}
      <Hero
        heading="Welcome"
        subheading="Get started today"
        content="This is a hero section with heading, subheading, and content."
      />

      {/* Hero with border and shadow */}
      <Hero
        heading="Hero Title"
        subheading="Subtitle"
        content="Content text"
        border={true}
        shadow="lg"
      />

      {/* Outlined hero */}
      <Hero
        heading="Hero Title"
        subheading="Subtitle"
        content="Content text"
        variant="outlined"
        border={true}
      />

      {/* Filled hero */}
      <Hero
        heading="Hero Title"
        subheading="Subtitle"
        content="Content text"
        variant="filled"
      />

      {/* Clickable hero */}
      <Hero
        heading="Click me"
        subheading="Subtitle"
        content="This hero is clickable"
        onClick={(event) => {
          console.log('Hero clicked');
        }}
      />
    </>
  );
}

Hero Options

heading: Main heading text (h2)
subheading: Subheading text (h3)
content: Body content text or ReactNode
children: Alternative content (if content not provided)
size: 'sm' | 'md' | 'lg' (default: 'md')
variant: 'default' | 'outlined' | 'filled' (default: 'default')
shadow: 'none' | 'sm' | 'md' | 'lg' | 'xl' (default: 'md')
border: Show border (default: true)
rounded: Rounded corners (default: true)
onClick: Callback when hero is clicked (optional)
onFocus: Callback when hero receives focus
onBlur: Callback when hero loses focus
onMouseEnter: Callback when mouse enters hero
onMouseLeave: Callback when mouse leaves hero

Card

import { Card } from 'promptui-react';

function MyComponent() {
  return (
    <>
      {/* Basic card */}
      <Card
        title="Card Title"
        subtitle="Card Subtitle"
        content="This is a card with title, subtitle, and content."
      />

      {/* Card with image */}
      <Card
        title="Product Name"
        subtitle="$99.99"
        content="Product description"
        image="https://example.com/product.jpg"
        imagePosition="top"
        actions={[
          { label: 'Buy', variant: 'primary' },
          { label: 'Learn More', variant: 'secondary' }
        ]}
        showFooter={true}
      />

      {/* Card with image on left */}
      <Card
        title="Article Title"
        content="Article content"
        image="https://example.com/article.jpg"
        imagePosition="left"
        footer="Published on Jan 1, 2024"
        showFooter={true}
      />
    </>
  );
}

Card Options

title: Card title (displayed in header)
subtitle: Card subtitle (displayed in header)
content: Main body content (text or ReactNode)
children: Alternative content (if content not provided)
image: Image URL
imagePosition: 'top' | 'left' | 'right' (default: 'top')
imageAlt: Alt text for image
headerContent: Custom header content (overrides title/subtitle)
headerIcon: Icon to display in header
footer: Footer content (text or ReactNode)
actions: Array of action buttons [{ label, variant, onClick, action }]
showFooter: Show footer section (default: false, auto if footer/actions provided)
size: 'sm' | 'md' | 'lg' (default: 'md')
variant: 'default' | 'outlined' | 'filled' (default: 'default')
shadow: 'none' | 'sm' | 'md' | 'lg' | 'xl' (default: 'md')
border: Show border (default: true)
rounded: Rounded corners (default: true)
onClick: Callback when card is clicked (optional)
onAction: Callback when action button is clicked
onFocus: Callback when card receives focus
onBlur: Callback when card loses focus
onMouseEnter: Callback when mouse enters card
onMouseLeave: Callback when mouse leaves card

Popover

import { Popover } from 'promptui-react';

function MyComponent() {
  return (
    <>
      {/* Basic popover */}
      <Popover
        title="Popover Title"
        content="This is a popover with title and content."
        placement="bottom"
        trigger="click"
      >
        <button>Click me</button>
      </Popover>

      {/* Popover with actions */}
      <Popover
        title="Confirm Action"
        content="Are you sure you want to proceed?"
        placement="top"
        actions={[
          { label: 'OK', variant: 'primary' },
          { label: 'Cancel', variant: 'secondary' }
        ]}
        showFooter={true}
      >
        <button>Open Popover</button>
      </Popover>

      {/* Popover on hover */}
      <Popover
        title="Information"
        content="Hover to see more details."
        trigger="hover"
        placement="right"
      >
        <button>Hover me</button>
      </Popover>

      {/* Popover without arrow */}
      <Popover
        title="Popover Title"
        content="Content"
        showArrow={false}
        placement="left"
      >
        <button>Click me</button>
      </Popover>
    </>
  );
}

Popover Options

title: Popover title (displayed in header, optional)
content: Popover content (REQUIRED - text or ReactNode)
children: Trigger element (button, icon, etc.) that activates the popover
placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end' (default: 'bottom')
trigger: 'click' | 'hover' | 'focus' | 'manual' (default: 'click')
size: 'sm' | 'md' | 'lg' (default: 'md')
variant: 'default' | 'outlined' | 'filled' (default: 'default')
showArrow: Show arrow pointing to trigger (default: true)
showCloseButton: Show close button in header (default: true)
actions: Array of action buttons [{ label, variant, onClick, action }]
showFooter: Show footer section (default: false, true if actions provided)
closeOnClickOutside: Close popover when clicking outside (default: true)
closeOnEscape: Close popover when pressing Escape (default: true)
onOpen: Callback when popover opens
onClose: Callback when popover closes
onAction: Callback when action button is clicked

Sidebar

import { Sidebar } from 'promptui-react';
import { useState } from 'react';

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Sidebar</button>
      
      {/* Right sidebar */}
      <Sidebar
        open={isOpen}
        position="right"
        draggable={true}
        title="Sidebar Title"
        onClose={() => setIsOpen(false)}
      >
        Sidebar content
      </Sidebar>

      {/* Left sidebar */}
      <Sidebar
        open={isOpen}
        position="left"
        draggable={true}
        size="lg"
        onClose={() => setIsOpen(false)}
      >
        Sidebar content
      </Sidebar>

      {/* Non-draggable sidebar */}
      <Sidebar
        open={isOpen}
        position="right"
        draggable={false}
        width="400px"
        onClose={() => setIsOpen(false)}
      >
        Sidebar content
      </Sidebar>
    </>
  );
}

Sidebar Options

children: Sidebar content (string or ReactNode)
title: Sidebar title/header text
open: Sidebar open state (controlled)
defaultOpen: Initial open state (uncontrolled)
position: 'left' | 'right' (default: 'right')
draggable: Enable dragging to resize width (default: true)
width: Initial width (e.g., "400px", "30%", "25rem")
minWidth: Minimum width when dragging (default: "200px")
maxWidth: Maximum width when dragging (default: "80%")
size: 'sm' | 'md' | 'lg' | 'xl' (default: 'md') - Size presets (sm: 300px, md: 400px, lg: 500px, xl: 600px)
closeOnOverlayClick: Close when clicking overlay (default: true)
closeOnEscape: Close when pressing ESC (default: true)
showCloseButton: Show close button in header (default: true)
preventClose: Prevent all close mechanisms (default: false)
showOverlay: Show backdrop overlay (default: true)
onOpen: Callback when sidebar opens
onClose: Callback when sidebar closes
onWidthChange: Callback when width changes (dragging)
onFocus: Callback when sidebar receives focus
onBlur: Callback when sidebar loses focus

Navbar

import { Navbar } from 'promptui-react';

function MyComponent() {
  return (
    <>
      {/* Basic navbar */}
      <Navbar
        brandName="My App"
        items={[
          { label: 'Home', href: '/' },
          { label: 'About', href: '/about' },
          { label: 'Contact', href: '/contact' },
        ]}
      />

      {/* Navbar with submenu */}
      <Navbar
        brandName="My App"
        items={[
          { label: 'Home', href: '/' },
          { label: 'Products', href: '/products', children: [
            { label: 'Product 1', href: '/products/1' },
            { label: 'Product 2', href: '/products/2' },
          ]},
          { label: 'About', href: '/about' },
        ]}
      />

      {/* Navbar with three levels */}
      <Navbar
        brandName="My App"
        items={[
          { label: 'Products', children: [
            { label: 'Category 1', children: [
              { label: 'Item 1', href: '/products/cat1/item1' },
              { label: 'Item 2', href: '/products/cat1/item2' },
            ]},
            { label: 'Category 2', children: [
              { label: 'Item 3', href: '/products/cat2/item3' },
            ]},
          ]},
        ]}
      />

      {/* Sticky navbar */}
      <Navbar
        brandName="My App"
        variant="sticky"
        items={[
          { label: 'Home', href: '/' },
          { label: 'About', href: '/about' },
        ]}
      />

      {/* Navbar with logo and icons */}
      <Navbar
        logo="🚀"
        brandName="My App"
        items={[
          { label: 'Home', href: '/', icon: '🏠' },
          { label: 'Products', href: '/products', icon: '📦' },
          { label: 'Contact', href: '/contact', icon: '📧' },
        ]}
      />
    </>
  );
}

Navbar Options

brandName: Brand name text
logo: Logo (text, emoji, image URL, or ReactNode)
logoHref: Logo link URL
logoOnClick: Logo click handler
items: Array of navigation menu items (required)
- Each item: { label, href?, onClick?, active?, disabled?, icon?, children? }
- children: Submenu items array (level 2)
- Submenu items can also have children (level 3)
- Maximum 3 levels supported
variant: 'default' | 'sticky' | 'fixed' (default: 'default')
mobileMenu: Show mobile hamburger menu (default: true)
mobileBreakpoint: Mobile breakpoint (default: "768px")
onItemClick: Callback when any menu item is clicked
onLogoClick: Callback when logo is clicked

Graph

import { Graph } from 'promptui-react';

function MyComponent() {
  return (
    <>
      {/* Line chart */}
      <Graph
        type="line"
        series={[{
          name: 'Sales',
          data: [
            { x: 'Jan', y: 100 },
            { x: 'Feb', y: 200 },
            { x: 'Mar', y: 150 }
          ],
          color: '#3b82f6'
        }]}
        xAxis={{ label: 'Month' }}
        yAxis={{ label: 'Revenue ($)', format: 'currency' }}
        tooltip={{ enabled: true }}
        legend={{ enabled: true }}
        showGrid={true}
      />

      {/* Bar chart with multiple series */}
      <Graph
        type="bar"
        series={[
          {
            name: 'Q1',
            data: [
              { x: 'Jan', y: 100 },
              { x: 'Feb', y: 150 }
            ],
            color: '#3b82f6'
          },
          {
            name: 'Q2',
            data: [
              { x: 'Jan', y: 120 },
              { x: 'Feb', y: 180 }
            ],
            color: '#10b981'
          }
        ]}
        xAxis={{ label: 'Month' }}
        yAxis={{ label: 'Amount' }}
        tooltip={{ enabled: true }}
        legend={{ enabled: true, position: 'top' }}
        showGrid={true}
      />

      {/* Pie chart */}
      <Graph
        type="pie"
        data={[
          { name: 'Category A', value: 30 },
          { name: 'Category B', value: 25 },
          { name: 'Category C', value: 20 }
        ]}
        tooltip={{ enabled: true, showPercentage: true }}
        legend={{ enabled: true, position: 'right' }}
        circularConfig={{
          labelConfig: {
            showLabels: true,
            showValues: true,
            showPercentages: true,
            position: 'outside'
          }
        }}
      />

      {/* Donut chart */}
      <Graph
        type="donut"
        data={[
          { name: 'A', value: 30, color: '#3b82f6' },
          { name: 'B', value: 25, color: '#10b981' },
          { name: 'C', value: 20, color: '#f59e0b' }
        ]}
        tooltip={{ enabled: true, showPercentage: true }}
        legend={{ enabled: true }}
        circularConfig={{
          innerRadius: 50,
          labelConfig: {
            showLabels: true,
            showValues: true,
            showPercentages: true
          }
        }}
      />

      {/* Area chart */}
      <Graph
        type="area"
        series={[{
          name: 'Revenue',
          data: [
            { x: 'Jan', y: 100 },
            { x: 'Feb', y: 200 },
            { x: 'Mar', y: 150 }
          ],
          color: '#3b82f6',
          fill: '#3b82f6'
        }]}
        xAxis={{ label: 'Month' }}
        yAxis={{ label: 'Revenue' }}
        tooltip={{ enabled: true }}
        showGrid={true}
      />

      {/* Scatter plot */}
      <Graph
        type="scatter"
        series={[{
          name: 'Data Points',
          data: [
            { x: 10, y: 20 },
            { x: 15, y: 30 },
            { x: 20, y: 25 }
          ],
          color: '#3b82f6'
        }]}
        xAxis={{ label: 'X Value' }}
        yAxis={{ label: 'Y Value' }}
        tooltip={{ enabled: true }}
        showGrid={true}
      />
    </>
  );
}

Graph Options

type: 'line' | 'bar' | 'area' | 'scatter' | 'pie' | 'donut' (required) - Chart type
series: Array of data series for 2D charts (line, bar, area, scatter)
- Each series: { name: string, data: Array<{ x: string | number | Date, y: number }>, color?: string, strokeWidth?: number, fill?: string }
data: Array of data points for circular charts (pie, donut)
- Each point: { name: string, value: number, color?: string }
xAxis: X-axis configuration { label?: string, min?: number, max?: number, format?: 'number' | 'date' | 'currency' | 'percentage', showGrid?: boolean }
yAxis: Y-axis configuration { label?: string, min?: number, max?: number, format?: 'number' | 'date' | 'currency' | 'percentage', showGrid?: boolean }
tooltip: Tooltip configuration { enabled?: boolean, showLabel?: boolean, showValue?: boolean, showPercentage?: boolean }
legend: Legend configuration { enabled?: boolean, position?: 'top' | 'bottom' | 'left' | 'right', align?: 'start' | 'center' | 'end' }
showGrid: Show grid lines for 2D charts (default: true)
width: Chart width (number in px or string)
height: Chart height (default: 400)
responsive: Make chart responsive (default: true)
animation: Animation configuration { enabled?: boolean, duration?: number }
circularConfig: Configuration for circular charts { innerRadius?: number, labelConfig?: { showLabels?: boolean, showValues?: boolean, showPercentages?: boolean, position?: 'inside' | 'outside' } }
onClick: Callback when chart element is clicked
onHover: Callback when hovering over chart element

FileUpload

import { FileUpload } from 'promptui-react';
import { useState } from 'react';

function MyComponent() {
  const [files, setFiles] = useState([]);

  return (
    <>
      {/* Basic file upload */}
      <FileUpload
        label="Upload File"
        placeholder="Click to upload or drag and drop"
        multiple={false}
        dragAndDrop={true}
        showPreview={true}
        showFileList={true}
        showRemoveButton={true}
        onChange={(files) => {
          console.log('Files:', files);
          setFiles(files);
        }}
      />

      {/* Multiple file upload with restrictions */}
      <FileUpload
        label="Upload Images"
        placeholder="Click to upload or drag and drop images"
        multiple={true}
        accept="image/*"
        maxSize={5242880} // 5MB
        maxFiles={5}
        dragAndDrop={true}
        showPreview={true}
        showFileList={true}
        showRemoveButton={true}
        onChange={(files) => {
          console.log('Files:', files);
          setFiles(files);
        }}
      />

      {/* File upload with upload functionality */}
      <FileUpload
        label="Upload to Server"
        placeholder="Click to upload or drag and drop"
        mode="upload"
        uploadUrl="/api/upload"
        uploadMethod="POST"
        multiple={false}
        showProgress={true}
        showFileList={true}
        showRemoveButton={true}
        onUpload={(files) => {
          console.log('Upload started:', files);
        }}
        onUploadProgress={(file, progress) => {
          console.log('Progress:', file.name, progress + '%');
        }}
        onUploadSuccess={(file, response) => {
          console.log('Success:', file.name, response);
        }}
        onUploadError={(file, error) => {
          console.error('Error:', file.name, error);
        }}
        onChange={(files) => {
          console.log('Files:', files);
          setFiles(files);
        }}
      />

      {/* PDF upload only */}
      <FileUpload
        label="Upload PDF"
        placeholder="Click to upload PDF file"
        accept=".pdf"
        maxSize={10485760} // 10MB
        multiple={false}
        dragAndDrop={true}
        showFileList={true}
        showRemoveButton={true}
        onChange={(files) => {
          console.log('PDF:', files);
          setFiles(files);
        }}
      />
    </>
  );
}

FileUpload Options

files: Array of selected files (controlled)
defaultFiles: Default files (uncontrolled)
multiple: Allow multiple file selection (default: false)
accept: Accepted file types (e.g., "image/*", ".pdf,.doc", "image/png,image/jpeg")
maxSize: Maximum file size in bytes
maxFiles: Maximum number of files (when multiple is true)
mode: 'select' | 'upload' (default: 'select') - Mode: select (just select files) or upload (with upload functionality)
uploadUrl: Upload endpoint URL (required if mode is 'upload')
uploadMethod: 'POST' | 'PUT' | 'PATCH' (default: 'POST') - HTTP method for upload
uploadHeaders: Additional headers for upload request
uploadFieldName: Form field name for file in upload request (default: 'file')
uploadWithCredentials: Include credentials in upload request (default: false)
label: FileUpload label
labelPosition: 'top' | 'left' (default: 'top') - Label position
placeholder: Placeholder text (default: 'Click to upload or drag and drop')
helpText: Help text below input
errorMessage: Error message (shows when validationState is error)
successMessage: Success message (shows when validationState is success)
size: 'sm' | 'md' | 'lg' (default: 'md') - FileUpload size
variant: 'default' | 'outlined' | 'filled' (default: 'default') - FileUpload style variant
validationState: 'default' | 'error' | 'success' | 'warning' (default: 'default') - Validation state
dragAndDrop: Enable drag and drop (default: true)
showPreview: Show file preview for images (default: true)
showFileList: Show list of selected files (default: true)
showRemoveButton: Show remove button for each file (default: true)
showProgress: Show upload progress when mode is upload (default: true)
disabled: Disabled state (default: false)
required: Required field indicator (default: false)
fullWidth: Full width input (default: false)
onChange: Callback when files are selected/removed: (files: FileObject[]) => void
onFileSelect: Callback when files are selected: (files: File[]) => void
onFileRemove: Callback when a file is removed: (file: FileObject, index: number) => void
onUpload: Callback when upload starts: (files: FileObject[]) => void (when mode is 'upload')
onUploadProgress: Callback during upload: (file: FileObject, progress: number) => void (when mode is 'upload')
onUploadSuccess: Callback when upload succeeds: (file: FileObject, response: any) => void (when mode is 'upload')
onUploadError: Callback when upload fails: (file: FileObject, error: Error) => void (when mode is 'upload')
onDragEnter: Callback when drag enters: () => void
onDragLeave: Callback when drag leaves: () => void
onDragOver: Callback when dragging over: () => void
onDrop: Callback when files are dropped: (files: File[]) => void
onFocus: Callback when component receives focus
onBlur: Callback when component loses focus
theme: Theme configuration object with:
- mode: 'light' | 'dark' | 'auto' (default: 'auto') - Theme mode
- primaryColor: Primary accent color (e.g., '#6366f1')
- backgroundColor: Background color
- borderColor: Border color
- textColor: Text color
- borderRadius: Border radius (e.g., '8px', '0.5rem')
- hoverBackgroundColor: Hover state background color
- focusRingColor: Focus ring color
- errorColor: Error state color
- successColor: Success state color
- warningColor: Warning state color
cssVars: Custom CSS variables object for fine-grained styling. Available variables:
- --fileupload-primary: Primary accent color
- --fileupload-bg: Background color
- --fileupload-border: Border color
- --fileupload-text: Text color
- --fileupload-hover-bg: Hover background color
- --fileupload-focus-ring: Focus ring color
- --fileupload-error: Error state color
- --fileupload-success: Success state color
- --fileupload-warning: Warning state color
- --fileupload-radius: Border radius

Example with theme and CSS variables:

<FileUpload
  label="Upload File"
  theme={{
    primaryColor: '#6366f1',
    borderRadius: '12px',
    hoverBackgroundColor: '#f3f4f6'
  }}
  cssVars={{
    '--fileupload-primary': '#6366f1',
    '--fileupload-bg': '#ffffff',
    '--fileupload-border': '#e5e7eb',
    '--fileupload-radius': '12px'
  }}
  onChange={(files) => console.log('Files:', files)}
/>

Badge

import { Badge } from 'promptui-react';

function MyComponent() {
  return (
    <>
      {/* Badge with notification count */}
      <Badge
        label="Notifications"
        type="badge"
        variant="error"
        count={5}
      />

      {/* Removable chip */}
      <Badge
        label="Filter"
        type="chip"
        variant="default"
        removable={true}
        onRemove={() => console.log('Removed')}
      />

      {/* Status tag */}
      <Badge
        label="Active"
        type="tag"
        variant="success"
      />

      {/* Pill badge */}
      <Badge
        label="Featured"
        type="pill"
        variant="info"
      />

      {/* Clickable badge with icon */}
      <Badge
        label="Settings"
        type="chip"
        variant="primary"
        clickable={true}
        leftIcon={{ element: '⚙️', position: 'left' }}
        onClick={() => console.log('Clicked')}
      />

      {/* Badge with max count */}
      <Badge
        label="Messages"
        type="badge"
        variant="error"
        count={150}
        maxCount={99}
      />
    </>
  );
}

Badge Options

children: Badge content (string or ReactNode)
label: Badge label (if children not provided)
type: 'badge' | 'chip' | 'tag' | 'pill' (default: 'badge') - Badge type: badge (notification), chip (removable), tag (label), pill (rounded)
size: 'sm' | 'md' | 'lg' (default: 'md') - Badge size
variant: 'default' | 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' (default: 'default') - Color variant
count: Count/number to display (for badge type)
showZero: Show count even when zero (for badge type) (default: false)
maxCount: Maximum count to display (e.g., 99+)
removable: Show remove/close button (for chip/tag/pill types) (default: false)
clickable: Make badge clickable (default: false)
leftIcon: Icon configuration { position?: 'left' | 'right', element?: string, onClick?: () => void }
rightIcon: Icon configuration { position?: 'left' | 'right', element?: string, onClick?: () => void }
disabled: Disabled state (default: false)
onClick: Callback when badge is clicked: (event: React.MouseEvent) => void
onRemove: Callback when remove button is clicked: (event: React.MouseEvent) => void
onFocus: Callback when badge receives focus
onBlur: Callback when badge loses focus
theme: Theme configuration object (same structure as FileUpload)
cssVars: Custom CSS variables object. Available variables:
- --badge-primary: Primary accent color
- --badge-bg: Background color
- --badge-text: Text color
- --badge-border: Border color
- --badge-hover-bg: Hover background color
- --badge-focus-ring: Focus ring color
- --badge-radius: Border radius

Progress

import { Progress } from 'promptui-react';

function MyComponent() {
  return (
    <>
      {/* Basic progress bar */}
      <Progress
        value={50}
        variant="default"
        size="md"
        showValue={true}
      />

      {/* Success progress bar */}
      <Progress
        value={100}
        variant="success"
        label="Upload Complete"
        showValue={true}
      />

      {/* Warning progress bar */}
      <Progress
        value={60}
        variant="warning"
        label="Almost Full"
        showValue={true}
      />

      {/* Error progress bar */}
      <Progress
        value={90}
        variant="error"
        label="Storage Almost Full"
        showValue={true}
      />

      {/* Animated progress bar */}
      <Progress
        value={50}
        variant="default"
        animated={true}
        showValue={true}
      />

      {/* Striped progress bar */}
      <Progress
        value={65}
        variant="default"
        striped={true}
        showValue={true}
      />

      {/* Progress bar with help text */}
      <Progress
        value={30}
        variant="default"
        label="Processing"
        helpText="This may take a few moments..."
        showValue={true}
      />
    </>
  );
}

Progress Options

value: number (default: 0) - Progress value from 0 to 100 (required)
variant: 'default' | 'success' | 'warning' | 'error' (default: 'default') - Progress style variant
- 'default': Blue progress bar (default)
- 'success': Green progress bar (for completed/success states)
- 'warning': Yellow progress bar (for caution states)
- 'error': Red progress bar (for error/critical states)
size: 'sm' | 'md' | 'lg' (default: 'md') - Progress bar size
label: Label text displayed above or beside the progress bar
labelPosition: 'top' | 'left' (default: 'top') - Label position
helpText: Help text displayed below the progress bar
showValue: boolean (default: true) - Show percentage value
animated: boolean (default: false) - Enable animation on progress bar (smooth transitions when value changes)
striped: boolean (default: false) - Enable striped pattern on progress bar (animated diagonal stripes)
valueFormat: Custom formatter for value display: (value: number) => string
theme: Theme configuration object (same structure as other components)
cssVars: Custom CSS variables object. Available variables:
- --progress-primary: Default progress color
- --progress-success: Success variant color
- --progress-warning: Warning variant color
- --progress-error: Error variant color
- --progress-bg: Track background color
- --progress-text: Text color
- --progress-radius: Border radius

Spinner

import { Spinner } from 'promptui-react';

function MyComponent() {
  return (
    <>
      {/* Basic spinner */}
      <Spinner
        variant="default"
        size="md"
      />

      {/* Spinner with label */}
      <Spinner
        variant="default"
        size="md"
        label="Loading..."
      />

      {/* Dots spinner */}
      <Spinner
        variant="dots"
        size="md"
      />

      {/* Bars spinner */}
      <Spinner
        variant="bars"
        size="md"
      />

      {/* Pulse spinner */}
      <Spinner
        variant="pulse"
        size="md"
      />

      {/* Small spinner */}
      <Spinner
        variant="default"
        size="sm"
        label="Processing..."
      />

      {/* Large spinner */}
      <Spinner
        variant="default"
        size="lg"
        label="Loading..."
      />

      {/* Spinner with label on top */}
      <Spinner
        variant="default"
        size="md"
        label="Loading..."
        labelPosition="top"
      />
    </>
  );
}

Spinner Options

variant: 'default' | 'dots' | 'bars' | 'pulse' (default: 'default') - Spinner variant: default (circular), dots (bouncing), bars (vertical), pulse (pulsing)
size: 'sm' | 'md' | 'lg' (default: 'md') - Spinner size
label: Label text displayed above or below the spinner
labelPosition: 'top' | 'bottom' (default: 'bottom') - Label position
className: Custom CSS classes for spinner container
style: Inline styles for spinner container
spinnerClassName: Custom CSS classes for spinner element
spinnerStyle: Inline styles for spinner element
theme: Theme configuration object (same structure as other components)
cssVars: Custom CSS variables object. Available variables:
- --spinner-primary: Primary spinner color (default: #2563eb)
- --spinner-bg: Background color (default: transparent)
- --spinner-text: Text color (default: #1f2937)
- --spinner-radius: Border radius (default: 50%)

Skeleton

import { Skeleton } from 'promptui-react';

function MyComponent() {
  return (
    <>
      {/* Text skeleton with 3 lines */}
      <Skeleton
        shape="text"
        lines={3}
        size="md"
        variant="default"
      />

      {/* Circular skeleton */}
      <Skeleton
        shape="circle"
        size="md"
        variant="pulse"
      />

      {/* Rectangle skeleton */}
      <Skeleton
        shape="rectangle"
        width="200px"
        height="20px"
        size="md"
        variant="wave"
      />
    </>
  );
}

Skeleton Options

shape: 'text' | 'circle' | 'rectangle' | 'custom' (default: 'text') - Skeleton shape
lines: number (default: 1) - Number of text lines (for text shape)
width: string | number - Custom width (e.g., "100%", "200px", 200)
height: string | number - Custom height (e.g., "20px", 20)
size: 'sm' | 'md' | 'lg' (default: 'md') - Skeleton size
variant: 'default' | 'pulse' | 'wave' (default: 'default') - Animation variant
className: Custom CSS classes
style: Inline styles
theme: Theme configuration object
cssVars: Custom CSS variables object

Avatar

import { Avatar } from 'promptui-react';

function MyComponent() {
  return (
    <>
      {/* Avatar with initials */}
      <Avatar
        name="John Doe"
        size="md"
        shape="circle"
      />

      {/* Avatar with image */}
      <Avatar
        src="https://example.com/avatar.jpg"
        alt="User avatar"
        name="John Doe"
        size="lg"
        shape="circle"
        status="online"
      />

      {/* Avatar with badge */}
      <Avatar
        name="John Doe"
        size="md"
        shape="circle"
        badge={5}
      />

      {/* Group avatar */}
      <Avatar
        name="John Doe"
        size="md"
        shape="circle"
        group={true}
        groupCount={3}
      />
    </>
  );
}

Avatar Options

src: Image source URL
alt: Alt text for image
name: Name for generating initials
initials: Custom initials (if not provided, generated from name)
icon: Icon element (emoji or string)
size: 'sm' | 'md' | 'lg' | 'xl' (default: 'md') - Avatar size
shape: 'circle' | 'square' | 'rounded' (default: 'circle') - Avatar shape
status: 'online' | 'offline' | 'away' | 'busy' - Status indicator
badge: Badge count to display
badgeMax: Maximum count to display (e.g., 99+)
group: Group avatar style (overlapping)
groupCount: Number of additional members in group
onClick: Click handler: (event: React.MouseEvent) => void
onError: Image error handler: () => void
onFocus: Focus handler: () => void
onBlur: Blur handler: () => void
className: Custom CSS classes
style: Inline styles
theme: Theme configuration object
cssVars: Custom CSS variables object

Breadcrumb

import { Breadcrumb } from 'promptui-react';

function MyComponent() {
  return (
    <>
      {/* Basic breadcrumb */}
      <Breadcrumb
        items={[
          { label: 'Home', href: '/' },
          { label: 'Products', href: '/products' },
          { label: 'Current' }
        ]}
        size="md"
        variant="default"
      />

      {/* Breadcrumb with icons */}
      <Breadcrumb
        items={[
          { label: 'Home', href: '/', icon: '🏠' },
          { label: 'Products', href: '/products', icon: '📦' },
          { label: 'Current' }
        ]}
        size="md"
        variant="default"
      />

      {/* Minimal breadcrumb */}
      <Breadcrumb
        items={[
          { label: 'Home', href: '/' },
          { label: 'Current' }
        ]}
        size="sm"
        variant="minimal"
        separator=">"
      />
    </>
  );
}

Breadcrumb Options

items: Array<{ label: string; href?: string; icon?: string; disabled?: boolean }> (required) - Breadcrumb items
size: 'sm' | 'md' | 'lg' (default: 'md') - Breadcrumb size
variant: 'default' | 'minimal' (default: 'default') - Breadcrumb variant
separator: Custom separator character (default: "/")
separatorIcon: Custom separator icon
onItemClick: Item click handler: (item: BreadcrumbItem, index: number, event: React.MouseEvent) => void
onFocus: Focus handler: () => void
onBlur: Blur handler: () => void
className: Custom CSS classes
style: Inline styles
theme: Theme configuration object
cssVars: Custom CSS variables object

Divider

import { Divider } from 'promptui-react';

function MyComponent() {
  return (
    <>
      {/* Basic horizontal divider */}
      <Divider
        orientation="horizontal"
        variant="solid"
        size="md"
      />

      {/* Divider with label */}
      <Divider
        orientation="horizontal"
        variant="solid"
        size="md"
        label="Section"
        labelPosition="center"
      />

      {/* Vertical divider */}
      <Divider
        orientation="vertical"
        variant="dashed"
        size="md"
      />

      {/* Divider with custom spacing */}
      <Divider
        orientation="horizontal"
        variant="dotted"
        size="md"
        spacing="32px"
      />
    </>
  );
}

Divider Options

orientation: 'horizontal' | 'vertical' (default: 'horizontal') - Divider orientation
variant: 'solid' | 'dashed' | 'dotted' (default: 'solid') - Divider variant
size: 'sm' | 'md' | 'lg' (default: 'md') - Divider size
label: Label text (for horizontal dividers)
labelPosition: 'left' | 'center' | 'right' (default: 'center') - Label position
spacing: Margin spacing (e.g., "16px", "1rem")
className: Custom CSS classes
style: Inline styles
theme: Theme configuration object
cssVars: Custom CSS variables object

Stepper

import { Stepper } from 'promptui-react';
import { useState } from 'react';

function MyComponent() {
  const [currentStep, setCurrentStep] = useState(0);

  const steps = [
    { id: 'step1', title: 'Step 1', description: 'First step', content: 'Step 1 content here' },
    { id: 'step2', title: 'Step 2', description: 'Second step', content: 'Step 2 content here' },
    { id: 'step3', title: 'Step 3', description: 'Third step', content: 'Step 3 content here' },
  ];

  return (
    <>
      {/* Basic horizontal stepper */}
      <Stepper
        steps={steps}
        currentStep={currentStep}
        layout="horizontal"
        onStepChange={(stepIndex, step) => {
          setCurrentStep(stepIndex);
          console.log('Step changed:', stepIndex);
        }}
      />

      {/* Vertical stepper */}
      <Stepper
        steps={steps}
        currentStep={currentStep}
        layout="vertical"
        onStepChange={(stepIndex) => setCurrentStep(stepIndex)}
      />

      {/* Clickable stepper */}
      <Stepper
        steps={steps}
        currentStep={currentStep}
        clickableSteps={true}
        onStepChange={(stepIndex) => setCurrentStep(stepIndex)}
      />

      {/* Stepper with validation */}
      <Stepper
        steps={steps}
        currentStep={currentStep}
        validateOnNext={true}
        onNext={(currentStep) => {
          // Add validation logic
          const isValid = true; // Your validation
          return isValid; // Return false to prevent navigation
        }}
        onStepChange={(stepIndex) => setCurrentStep(stepIndex)}
      />

      {/* Stepper with skip option */}
      <Stepper
        steps={steps}
        currentStep={currentStep}
        allowSkip={true}
        onStepChange={(stepIndex) => setCurrentStep(stepIndex)}
      />
    </>
  );
}

Stepper Options

steps: Array of step configurations (required) - each step has:
- id: Unique identifier (string, required)
- title: Step title (string, required)
- description: Step description/subtitle (string, optional)
- content: Step content (string or ReactNode, optional)
- state: Step state: 'completed', 'active', 'pending', 'error' (optional, auto-determined)
- icon: Step icon (emoji or SVG string, optional)
- errorMessage: Error message when state is 'error' (optional)
- disabled: Step is disabled (boolean, default: false)
currentStep: Current active step index (0-based, default: 0)
layout: 'horizontal' | 'vertical' (default: 'horizontal') - Stepper layout
size: 'sm' | 'md' | 'lg' (default: 'md') - Stepper size
showNavigation: Show next/previous buttons (default: true)
showStepNumbers: Show step numbers (default: true)
showStepIcons: Show step icons (default: false)
allowSkip: Allow skipping steps (default: false)
validateOnNext: Validate step before allowing next (default: false)
clickableSteps: Allow clicking steps to navigate (default: false)
nextLabel: Next button label (default: 'Next')
previousLabel: Previous button label (default: 'Previous')
finishLabel: Finish button label (default: 'Finish')
skipLabel: Skip button label (default: 'Skip')
onStepChange: Callback when step changes: (stepIndex: number, step: Step) => void
onNext: Callback when next button is clicked: (currentStep: number) => boolean | void (return false to prevent navigation)
onPrevious: Callback when previous button is clicked: (currentStep: number) => boolean | void (return false to prevent navigation)
onFinish: Callback when finish button is clicked: () => void
onSkip: Callback when skip button is clicked: (stepIndex: number) => void
onStepClick: Callback when step is clicked: (stepIndex: number, step: Step) => void
onFocus: Callback when stepper receives focus
onBlur: Callback when stepper loses focus
theme: Theme configuration object (same structure as other components)
cssVars: Custom CSS variables object. Available variables:
- --stepper-primary: Primary accent color
- --stepper-bg: Background color
- --stepper-text: Text color
- --stepper-border: Border color
- --stepper-completed: Completed step color
- --stepper-active: Active step color
- --stepper-error: Error state color
- --stepper-radius: Border radius

List

import { List } from 'promptui-react';

function MyComponent() {
  return (
    <>
      {/* Ordered list */}
      <List
        type="ordered"
        items={[
          { content: 'First item' },
          { content: 'Second item' },
          { content: 'Third item' }
        ]}
      />

      {/* Unordered list */}
      <List
        type="unordered"
        items={[
          { content: 'Item 1' },
          { content: 'Item 2' },
          { content: 'Item 3' }
        ]}
        marker="disc"
      />

      {/* Nested list */}
      <List
        type="unordered"
        items={[
          { content: 'Parent 1', children: [
            { content: 'Child 1.1' },
            { content: 'Child 1.2' }
          ]},
          { content: 'Parent 2' }
        ]}
      />
    </>
  );
}

List Options

type: 'ordered' | 'unordered' (default: 'unordered') - List type
items: Array of list items { content: string | ReactNode, children?: ListItem[] } (required)
marker: 'disc' | 'circle' | 'square' | 'decimal' | 'lower-alpha' | 'upper-alpha' | 'lower-roman' | 'upper-roman' - List marker style
spacing: 'sm' | 'md' | 'lg' (default: 'md') - Spacing between items
nested: Support for nested lists via children property
className: Custom CSS classes
style: Inline styles

Toast

import { Toast } from 'promptui-react';
import { useState } from 'react';

function MyComponent() {
  const [showToast, setShowToast] = useState(false);

  return (
    <>
      <button onClick={() => setShowToast(true)}>Show Toast</button>
      
      {showToast && (
        <Toast
          message="Operation successful!"
          title="Success"
          variant="success"
          position="top-right"
          autoDismiss={true}
          duration={5000}
          showCloseButton={true}
          onClose={() => setShowToast(false)}
        />
      )}

      {/* Toast with action */}
      <Toast
        message="Item deleted"
        variant="error"
        position="top-center"
        action={{
          label: 'Undo',
          onClick: () => {
            console.log('Undo clicked');
          }
        }}
        autoDismiss={true}
        duration={3000}
      />

      {/* Manual close

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

promptui-react

Installation

Setup

Available Components

Usage

🎨 Brand Colors (NEW in v0.2.0)

Table Component (Main Example)

Functional Component

Class Component

Server-Side Data Fetching

Modal Component

Modal Options

Input Component

Input Options

Other Components

Textbox (Multi-line Input)

Radio

Checkbox

Dropdown

Toggle

Tooltip

Accordion

Tab

Range

DatePicker

DatePicker Options

Carousel

Carousel Options

Link

Link Options

Button

Button Options

Hero

Hero Options

Card

Card Options

Popover

Popover Options

Sidebar

Sidebar Options

Navbar

Navbar Options

Graph

Graph Options

FileUpload

FileUpload Options

Badge

Badge Options

Progress

Progress Options

Spinner

Spinner Options

Skeleton

Skeleton Options

Avatar

Avatar Options

Breadcrumb

Breadcrumb Options

Divider

Divider Options

Stepper

Stepper Options

List

List Options

Toast