Welcome to WorksBuddy

A modern, accessible, and customizable React component library built with TypeScript and CSS variables for maximum flexibility.

What is WorksBuddy?

WorksBuddy is a production-ready component library designed to accelerate your development process. It provides a collection of carefully crafted, accessible UI components with a consistent design system, comprehensive documentation, and real-world usage examples.

Key Features

• Built with React 18+: Modern React patterns with TypeScript support
• CSS Variables: Fully customizable theming system using CSS custom properties
• Accessible: WCAG 2.1 AA compliant components with keyboard navigation
• Production Ready: Battle-tested components used in real applications
• Multiple Variants: Each component supports multiple visual styles (fill, stroke, text)
• Responsive: Mobile-first design with responsive sizing
• Well Documented: Clear examples and comprehensive API documentation
• Zero Dependencies: Only depends on React, no additional libraries

Installation

Get WorksBuddy installed in your project with a single command.

Using npm

npm install works-buddy

Using yarn

yarn add works-buddy

Using pnpm

pnpm add works-buddy

Import Styles

WorksBuddy includes global styles and CSS variables. Import them in your application's entry point:

// In your main.jsx or index.js
import 'works-buddy/style';

TypeScript Support

WorksBuddy includes full TypeScript support out of the box. All components are fully typed, and type definitions are included with the package.

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Quick Start

Get your first component up and running in minutes.

1. Import a Component

import { WbButton, ArrowRightIcon } from 'works-buddy';

2. Use the Component

<WbButton
  variant="fill"
  size="medium"
  rightIcon={<ArrowRightIcon />}
>
  Get Started
</WbButton>

3. Customize with Props

Each component accepts props to control its behavior and appearance:

<WbButton
  variant="stroke"
  size="large"
  disabled={false}
  onClick={() => console.log('Clicked!')}
>
  Click Me
</WbButton>

Common Components

• WbButton: Primary action button with multiple variants and sizes
• WbInput: Text input field with validation states
• WbBadge: Status indicator and label component
• WbCard: Container for grouped content
• WbAvatar: User profile image component

Design Tokens

WorksBuddy uses CSS variables (custom properties) to define a comprehensive design system. This allows for easy theming and customization without changing component code.

Token Categories

• Colors: Color palettes and semantic colors
• Typography: Font families, sizes, and weights
• Spacing: Consistent spacing scale
• Border Radius: Rounded corner values
• Shadows: Elevation and depth effects
• Transitions: Animation timing

Accessing Tokens

Use tokens in your custom CSS or components:

.custom-element {
  background-color: var(--wb-lio-900);
  padding: var(--wb-spacing-md);
  border-radius: var(--wb-border-radius-lg);
  transition: all var(--wb-transition-fast);
}

Complete Token Reference

See the Colors, Typography, and Spacing sections for the complete list of available tokens.

Colors

WorksBuddy includes comprehensive color palettes organized by function and brand themes. All colors are defined as CSS variables for easy customization and theming.

Semantic Colors

Colors with semantic meaning for common states and feedback. Use these for success messages, errors, warnings, and info states.

Neutral Colors

Grayscale colors for text, borders, backgrounds, and disabled states. These form the foundation of your interface.

Slate - Text & Foreground

Primary text and foreground colors from dark to light.

White - Background

Light background colors for components and containers.

Grey - Secondary Text

Secondary text and subtle UI elements.

Primary Brand Palettes

Seven distinct brand color palettes for different use cases and themes. Each palette has 10 shades from dark (900) to light (50).

LIO - Purple/Violet (Primary)

The main brand color. Used for primary actions, buttons, and highlights.

TARO - Green

Success and growth color. Use for positive actions and confirmations.

PRAX - Peach/Salmon

Warm accent color for secondary themes and highlights.

EVOX - Blue/Teal

Cool, professional color for tech-focused applications.

INZO - Purple/Lavender

Soft, creative purple for artistic and design-focused applications.

CORO - Pink/Rose

Vibrant pink for social and community-focused applications.

SIGI - Mauve/Dusty Pink

Muted, sophisticated mauve for premium and elegant applications.

Additional Color Systems

Extended color palettes for specific use cases and states.

Red - Danger/Error

Used for destructive actions and error states.

Orange - Warning

Used for warnings and caution states.

Blue - Info

Used for informational messages and status.

Green - Success

Used for successful actions and confirmations.

Background Color Classes

Reference Table

Usage Guide

Use colors consistently throughout your application. Follow these guidelines:

• Primary Actions: Use LIO-900 for primary buttons and CTAs
• Hover States: Use LIO-800 or lighter shades for hover effects
• Success Messages: Use TARO-900 or wb-color-success
• Error Messages: Use RED-900 or wb-color-error
• Warnings: Use ORANGE-900 or wb-color-warning
• Info Messages: Use BLUE-900 or wb-color-info
• Backgrounds: Use WHITE shades for main backgrounds, GREY for secondary
• Text: Use SLATE-900 for primary text, SLATE-600 for secondary
• Disabled States: Use GREY or SLATE with reduced opacity
• Brand Themes: Switch entire palettes using TARO, PRAX, EVOX, INZO, CORO, or SIGI for themed applications

Accessibility Considerations

• Ensure sufficient color contrast for text (WCAG AA: 4.5:1 for normal text)
• Don't rely on color alone to convey meaning—use icons, text, or patterns
• Use semantic colors for feedback (success, error, warning, info)
• Test color combinations with accessibility checkers
• Consider colorblind users when selecting complementary colors

Typography

WorksBuddy uses a comprehensive typography system with platform-aware styling for both website and dashboard contexts. The system includes the Onest font family, semantic text components, and consistent design tokens.

Overview

The typography system provides 6 text components (WbHeading, WbPara, WbParaSmall, WbCaption, WbNav, WbHighlight) that automatically adapt their styling based on the platform context. Website typography is larger and more impactful for marketing pages, while dashboard typography is compact for information-dense interfaces.

Typography Components

WorksBuddy provides 6 typography components for semantic text rendering with platform-aware styles.

Components Overview

Heading Styles

WbHeading supports h1-h6 variants with different sizes for website and dashboard platforms.

Website Headings

Large, impactful headings for marketing pages and landing pages.

Dashboard Headings

Compact headings for data-dense dashboard interfaces.

Heading Specifications

<WbHeading variant="h1" platform="website">Website Title</WbHeading>
<WbHeading variant="h1" platform="dashboard">Dashboard Title</WbHeading>
<WbHeading variant="h2" platform="website">Section Heading</WbHeading>
<WbHeading variant="h3" platform="dashboard">Card Title</WbHeading>

Body Text Styles

Paragraph and body text components for content.

Platform Comparison

Body Text Specifications

<WbPara platform="website">Website body text for marketing content.</WbPara>
<WbPara platform="dashboard">Dashboard body text for data interfaces.</WbPara>
<WbParaSmall platform="dashboard">Smaller supporting text.</WbParaSmall>
<WbCaption platform="website">Image Caption</WbCaption>
<WbNav>Navigation Link</WbNav>
<WbHighlight>Important highlighted text</WbHighlight>

Font Size Tokens

CSS variables for consistent font sizing across components.

/* Usage in custom CSS */
.custom-text {
  font-size: var(--wb-font-size-md);
}

.small-label {
  font-size: var(--wb-font-size-xs);
}

Font Weights

Three weight tokens for consistent text emphasis.

Text Colors

WorksBuddy provides a comprehensive slate color palette for text hierarchy.

Slate Palette (Text)

Text Color Tokens

Semantic Text Colors

Usage Examples

Marketing Page Layout

<WbHeading variant="h1" platform="website">
  Build Better Products
</WbHeading>
<WbPara platform="website">
  WorksBuddy provides everything you need to create amazing user experiences.
</WbPara>
<WbParaSmall platform="website">
  Trusted by over 10,000 companies worldwide.
</WbParaSmall>

Navigation

<nav>
  <WbNav>Home</WbNav>
  <WbNav>Products</WbNav>
  <WbNav>About</WbNav>
  <WbNav>Contact</WbNav>
</nav>

Using CSS Variables

.custom-component {
  font-family: var(--wb-font-family);
  font-size: var(--wb-font-size-md);
  font-weight: var(--wb-font-weight-medium);
  color: var(--wb-slate-900);
  line-height: 1.5;
}

.custom-label {
  font-size: var(--wb-font-size-sm);
  font-weight: var(--wb-font-weight-medium);
  color: var(--wb-slate-700);
}

Component Props Reference

WbHeading Props

WbPara / WbParaSmall / WbCaption / WbHighlight Props

Spacing

WorksBuddy uses a consistent spacing scale based on a 0.5rem (8px) base unit.

Spacing Scale

Visual Scale

Border Radius

Border radius tokens define the rounding scale. Utility classes let you apply them directly to elements without writing custom CSS.

Design Tokens

All-Corners Utility Classes

Apply the same radius to every corner.

Visual Examples

Per-Corner & Per-Side Classes

Target individual corners or logical pairs (top, bottom, left, right). Every pattern is available in sizes: sm, md, lg, xl, full, none.

Per-Side Visual Examples

Usage Examples

<!-- Rounded card (all corners) -->
<div class="wb-rounded-lg">
  8px border-radius on all corners
</div>

<!-- Top-only rounding (e.g., card header) -->
<div class="wb-rounded-t-xl">
  12px radius on top-left and top-right only
</div>

<!-- Single corner -->
<div class="wb-rounded-tl-lg">
  8px radius on top-left corner only
</div>

<!-- Pill shape (buttons, badges) -->
<button class="wb-rounded-full">
  Pill Button
</button>

<!-- Combine with border utilities -->
<div class="wb-border wb-border--width-regular wb-border--color-primary wb-rounded-lg">
  Rounded border box
</div>

Component Sizes

Components use a consistent sizing scale:

• Giant: 52px height - for prominent actions
• Large: 48px height - for primary actions
• Medium: 40px height - default, most common
• Small: 32px height - for secondary actions
• Tiny: 26px height - for tertiary or compact layouts

Margin

Apply margin using utility classes directly on elements.

Classes

Available Sizes

Visual Examples

The colored area shows the margin space around each box.

Directional Margins

Usage Example

<div className="wb-mt-md wb-mb-lg">
  Content with top margin 8px, bottom margin 12px
</div>

<div className="wb-mx-xl wb-my-2xl">
  Content with horizontal margin 16px, vertical margin 22px
</div>

Padding

Apply padding using utility classes directly on elements.

Classes

Available Sizes

Visual Examples

The colored area shows the padding space inside each box.

Directional Padding

Usage Example

<div className="wb-pt-md wb-pb-lg">
  Content with top padding 8px, bottom padding 12px
</div>

<div className="wb-p-4xl">
  Content with 32px padding all sides
</div>

Border

Apply borders using utility classes. Combine base class with width and color modifiers.

Base Class

Always include the base class wb-border which sets border-style: solid.

Width Classes

Color Classes

Visual Examples

Border Widths

Border Colors

Side Classes

Apply borders to individual sides only. Combine with width and color classes for full control.

Side Examples

Side Usage

<!-- Top border only -->
<div class="wb-border wb-border--top wb-border--width-medium wb-border--color-primary">
  Top border only
</div>

<!-- Bottom border only -->
<div class="wb-border wb-border--bottom wb-border--width-regular wb-border--color-secondary">
  Bottom border only
</div>

Usage Example

<!-- All sides border -->
<div class="wb-border wb-border--width-medium wb-border--color-primary">
  Content with 4px primary border
</div>

<!-- Top border only -->
<div class="wb-border wb-border--top wb-border--width-medium wb-border--color-primary">
  Top border only
</div>

<!-- Bottom border only -->
<div class="wb-border wb-border--bottom wb-border--width-regular wb-border--color-secondary">
  Bottom border only
</div>

Button Component

Versatile button component with multiple variants, sizes, and states.

Props API

Variants

Fill (Primary)

<WbButton variant="fill">Button</WbButton>
<WbButton variant="fill" disabled>Disabled</WbButton>

Stroke (Secondary)

<WbButton variant="stroke">Button</WbButton>
<WbButton variant="stroke" disabled>Disabled</WbButton>

Text (Tertiary)

<WbButton variant="text">Button</WbButton>
<WbButton variant="text" disabled>Disabled</WbButton>

Sizes

Fill Sizes

<WbButton size="giant">Giant</WbButton>   // 52px
<WbButton size="large">Large</WbButton>   // 48px
<WbButton size="medium">Medium</WbButton> // 40px (default)
<WbButton size="small">Small</WbButton>   // 32px
<WbButton size="tiny">Tiny</WbButton>     // 26px

Stroke Sizes

<WbButton variant="stroke" size="giant">Giant</WbButton>
<WbButton variant="stroke" size="large">Large</WbButton>
<WbButton variant="stroke" size="medium">Medium</WbButton>
<WbButton variant="stroke" size="small">Small</WbButton>
<WbButton variant="stroke" size="tiny">Tiny</WbButton>

Text Sizes

<WbButton variant="text" size="giant">Giant</WbButton>
<WbButton variant="text" size="large">Large</WbButton>
<WbButton variant="text" size="medium">Medium</WbButton>
<WbButton variant="text" size="small">Small</WbButton>
<WbButton variant="text" size="tiny">Tiny</WbButton>

States

Fill States

Stroke States

Text States

Icons

Left Icon

<WbButton leftIcon={<ArrowLeftIcon />}>Back</WbButton>

Right Icon

<WbButton rightIcon={<ArrowRightIcon />}>Next</WbButton>

Icon Only

<WbButton iconOnly aria-label="Upload">
  <ArrowUpIcon />
</WbButton>

Icon Only Sizes

<WbButton iconOnly size="giant"><ArrowUpIcon /></WbButton>
<WbButton iconOnly size="large"><ArrowUpIcon /></WbButton>
<WbButton iconOnly size="medium"><ArrowUpIcon /></WbButton>
<WbButton iconOnly size="small"><ArrowUpIcon /></WbButton>
<WbButton iconOnly size="tiny"><ArrowUpIcon /></WbButton>

Button Groups

Primary + Secondary

<WbButton variant="fill">Save</WbButton>
<WbButton variant="stroke">Cancel</WbButton>

Action Hierarchy

<WbButton variant="fill">Confirm</WbButton>
<WbButton variant="stroke">Maybe Later</WbButton>
<WbButton variant="text">Learn More</WbButton>

Tabs with Content Panels

Organize content into separate views with tabbed navigation using compound components. Only one tab's content is visible at a time.

Component API

WbTabGroup Props

WbTab Props

WbTabContent Props

States

Basic Usage

<WbTabGroup defaultActiveId="dashboard">
    <WbTabList>
        <WbTab id="dashboard">Dashboard</WbTab>
        <WbTab id="analytics">Analytics</WbTab>
        <WbTab id="settings">Settings</WbTab>
    </WbTabList>

    <WbTabContent id="dashboard">
        <h4>Dashboard Content</h4>
        <p>Welcome to your dashboard!</p>
    </WbTabContent>

    <WbTabContent id="analytics">
        <h4>Analytics Content</h4>
        <p>View detailed analytics...</p>
    </WbTabContent>

    <WbTabContent id="settings">
        <h4>Settings Content</h4>
        <p>Customize your preferences...</p>
    </WbTabContent>
</WbTabGroup>

With Disabled Tab

<WbTabGroup defaultActiveId="active">
    <WbTabList>
        <WbTab id="active">Active</WbTab>
        <WbTab id="default">Default</WbTab>
        <WbTab id="disabled" disabled>Disabled</WbTab>
    </WbTabList>

    <WbTabContent id="active">
        <h4>Active Tab Content</h4>
        <p>This is the content for the active tab.</p>
    </WbTabContent>

    <WbTabContent id="default">
        <h4>Default Tab Content</h4>
        <p>This is the content for the default tab.</p>
    </WbTabContent>

    <WbTabContent id="disabled">
        <h4>Disabled Tab Content</h4>
        <p>This content cannot be accessed.</p>
    </WbTabContent>
</WbTabGroup>

Default Active Tab

<WbTabGroup defaultActiveId="analytics">
    <WbTabList>
        <WbTab id="dashboard">Dashboard</WbTab>
        <WbTab id="analytics">Analytics</WbTab>
        <WbTab id="reports">Reports</WbTab>
    </WbTabList>

    <WbTabContent id="dashboard">
        <p>Dashboard content</p>
    </WbTabContent>

    <WbTabContent id="analytics">
        <p>Analytics content (active by default)</p>
    </WbTabContent>

    <WbTabContent id="reports">
        <p>Reports content</p>
    </WbTabContent>
</WbTabGroup>

Controlled Usage

const [activeTab, setActiveTab] = useState("dashboard");

<WbTabGroup
    defaultActiveId="dashboard"
    activeId={activeTab}
    onTabChange={setActiveTab}
>
    <WbTabList>
        <WbTab id="dashboard">Dashboard</WbTab>
        <WbTab id="analytics">Analytics</WbTab>
        <WbTab id="reports">Reports</WbTab>
    </WbTabList>

    <WbTabContent id="dashboard">
        <p>Dashboard content</p>
    </WbTabContent>

    <WbTabContent id="analytics">
        <p>Analytics content</p>
    </WbTabContent>

    <WbTabContent id="reports">
        <p>Reports content</p>
    </WbTabContent>
</WbTabGroup>

DataTable Component

A powerful, feature-rich data table for displaying, selecting, and editing tabular data. Supports multiple column types, row selection, inline editing, and responsive design.

Overview

The DataTable component provides a comprehensive solution for displaying structured data in rows and columns. It supports various column types (text, avatar, status badges, priority, scores, links), row selection with checkboxes, inline edit buttons, and custom cell rendering. The table is fully responsive with horizontal scrolling on smaller screens.

Props API

DataTable Props

Column Configuration

Column Types

The DataTable supports 10 built-in column types for common data display patterns.

Status Badges

Status badges indicate the current state of an item. Five variants are available.

// Status column with variant
{
  key: 'status',
  header: 'Status',
  type: 'status',
}

// Data format
{ status: { text: 'Completed', variant: 'success' } }
// Or simple string (defaults to 'success')
{ status: 'Completed' }

Priority Badges

Priority badges indicate urgency or importance levels.

// Priority column
{
  key: 'priority',
  header: 'Priority',
  type: 'priority',
}

// Data format
{ priority: { text: 'High', variant: 'high' } }

Score Badges

Circular badges for displaying numeric scores or ratings.

// Score column
{
  key: 'score',
  header: 'Score',
  type: 'score',
}

// Data format
{ score: { value: 85, variant: 'success' } }
// Or simple number (defaults to 'success')
{ score: 85 }

Avatar Cells

Display user avatars with names. Shows image if provided, otherwise displays initial.

// Avatar column
{
  key: 'user',
  header: 'Name',
  type: 'avatar-text',
}

// Data formats
{ user: { src: 'https://example.com/avatar.jpg', text: 'John Smith' } }
// Or just text (shows initial)
{ user: 'John Smith' }

Row Selection

Enable row selection with circular checkboxes. Supports single row and select all.

const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set());

<WbDataTable
  columns={columns}
  data={data}
  selectable={true}
  selectedRows={selectedRows}
  onSelectionChange={(selected) => setSelectedRows(selected)}
/>

Editable Cells

Add edit buttons to cells for inline editing triggers.

const columns = [
  { key: 'name', header: 'Name', editable: true },
  { key: 'phone', header: 'Phone', type: 'phone', editable: true },
  { key: 'email', header: 'Email', editable: true },
];

<WbDataTable
  columns={columns}
  data={data}
  onEdit={(rowIndex, columnKey, row) => {
    console.log('Edit:', rowIndex, columnKey, row);
    openEditModal(rowIndex, columnKey);
  }}
/>

Row States

Table rows support different visual states based on interaction and selection.

Complete Example

Full-featured table with selection, multiple column types, and edit functionality.

import { WbDataTable } from 'works-buddy';

const columns = [
  { key: 'name', header: 'Name', type: 'text' },
  { key: 'email', header: 'Email', type: 'avatar-text' },
  { key: 'phone', header: 'Phone', type: 'phone' },
  { key: 'status', header: 'Status', type: 'status', editable: true },
  { key: 'leadSource', header: 'Lead Source', type: 'link' },
  { key: 'priority', header: 'Priority', type: 'priority' },
  { key: 'score', header: 'Score', type: 'score', editable: true },
  { key: 'created', header: 'Created', type: 'date' },
  { key: 'assignee', header: 'Assignee', type: 'assignee', editable: true },
];

const data = [
  {
    name: 'Aarav Mehta',
    email: { text: '[email protected]', src: '/avatars/arjun.jpg' },
    phone: '+91 9876543210',
    status: { text: 'Done', variant: 'success' },
    leadSource: 'Website Form',
    priority: { text: 'High', variant: 'high' },
    score: { value: 41, variant: 'error' },
    created: '10 Nov 2025',
    assignee: 'Priya Sharma',
  },
  // ... more rows
];

<WbDataTable
  columns={columns}
  data={data}
  selectable={true}
  onSelectionChange={(selected) => console.log(selected)}
  onEdit={(rowIndex, columnKey, row) => {
    console.log('Edit:', rowIndex, columnKey, row);
  }}
/>

Custom Cell Rendering

Use the render function for complete control over cell content.

const columns = [
  {
    key: 'actions',
    header: 'Actions',
    type: 'custom',
    render: (value, row, index) => (
      <div style={{ display: 'flex', gap: '8px' }}>
        <button onClick={() => handleView(row)}>View</button>
        <button onClick={() => handleEdit(row)}>Edit</button>
        <button onClick={() => handleDelete(row)}>Delete</button>
      </div>
    ),
  },
  {
    key: 'progress',
    header: 'Progress',
    render: (value) => (
      <div className="progress-bar">
        <div style={{ width: `${value}%` }} />
      </div>
    ),
  },
];

Input Component

Text input fields for user data entry with validation states and accessibility features. WorksBuddy provides two Input components: a basic Input with label and error support, and a branded WbInput with status variants and preset widths.

Overview

The Input components provide a consistent way to collect text input from users. The basic Input component supports labels, error messages, and all standard HTML input attributes. The branded WbInput component offers 7 status variants (default, hover, focus, success, info, warning, error) and 5 width options for design system consistency.

WbInput Props API

Input Props API

Status Variants

WbInput supports 7 status variants for visual feedback. Status changes border and background colors to communicate state.

All Status States

Status Colors Reference

<WbInput status="default" placeholder="Enter text" />
<WbInput status="success" placeholder="Valid input" />
<WbInput status="error" placeholder="Invalid input" />
<WbInput status="warning" placeholder="Caution" />
<WbInput status="info" placeholder="Info" />

Width Variants

WbInput supports 5 preset width options for consistent layouts. Choose based on expected content length.

All Width Sizes

<WbInput width="xs" placeholder="Code" />
<WbInput width="sm" placeholder="Phone" />
<WbInput width="md" placeholder="Email" />  {/* Default */}
<WbInput width="lg" placeholder="Full Name" />
<WbInput width="xl" placeholder="URL" />

Width Selection Guide

Input with Label and Error

The basic Input component supports integrated labels and error messages for form scenarios.

With Label

<Input
  label="Email Address"
  type="email"
  placeholder="Enter your email"
/>

With Error Message

<Input
  label="Password"
  type="password"
  placeholder="Enter password"
  error="Password must be at least 8 characters"
/>

Without Label

<Input
  type="text"
  placeholder="Search..."
  aria-label="Search"
/>

Component Comparison

Choose the right Input component for your use case:

Badge Component

Small status labels and indicators for displaying categories, counts, and status information. Badges provide visual differentiation through color-coded status variants and two size options.

Overview

The WbBadge component displays compact labeled information with an optional count value. It's useful for status indicators, category tags, notification counts, and inline labels. The component supports 5 status colors (default, success, info, warning, error) and 2 sizes (medium, small).

Props API

Status Variants

WbBadge supports 5 status variants with distinct background colors for visual categorization and semantic meaning.

All Status Colors

Status Colors Reference

<WbBadge label="Category" status="default" />
<WbBadge label="Active" status="success" />
<WbBadge label="New" status="info" />
<WbBadge label="Pending" status="warning" />
<WbBadge label="Blocked" status="error" />

Size Variants

WbBadge supports 2 size variants to fit different contexts and visual hierarchies.

Size Comparison

Size Specifications

<WbBadge label="Manager" count={41} size="medium" />
<WbBadge label="Manager" count={41} size="small" />

Badge Variations

Badges can be used with or without the count element for different use cases.

Label Only (No Count)

<WbBadge label="Active" status="success" />
<WbBadge label="Pending" status="warning" />
<WbBadge label="Expired" status="error" />
<WbBadge label="Beta" status="info" />

Label with Count

<WbBadge label="Users" count={156} />
<WbBadge label="Online" count={42} status="success" />
<WbBadge label="Issues" count={7} status="error" />

String Count Values

<WbBadge label="Version" count="2.1" status="info" />
<WbBadge label="Status" count="OK" status="success" />
<WbBadge label="Priority" count="P1" status="warning" />

Radio Component

Radio buttons allow users to select a single option from a set of mutually exclusive choices. The WbRadio component supports multiple sizes, visual states, and optional labels with full accessibility support.

Overview

The WbRadio component provides a customizable radio button with 3 size variants (sm, md, lg) and 5 visual states (default, hover, focus, selected, disabled). It uses native HTML radio input under the hood for proper form integration and accessibility, while providing a consistent branded appearance.

Props API

States

WbRadio supports 5 visual states that change based on user interaction. States are managed automatically through native HTML behavior, but can also be set explicitly via the state prop for design showcases.

All States (Without Label)

All States (With Label)

State Colors Reference

<WbRadio name="demo" state="default" label="Default" />
<WbRadio name="demo" state="hover" label="Hover" />
<WbRadio name="demo" state="focus" label="Focus" />
<WbRadio name="demo" state="selected" label="Selected" />
<WbRadio name="demo" state="disabled" label="Disabled" />

Size Variants

WbRadio supports 3 size variants to fit different contexts and visual hierarchies.

Size Comparison

Size Specifications

All Sizes - Selected State

<WbRadio name="size-demo" size="sm" label="Small" />
<WbRadio name="size-demo" size="md" label="Medium" />  {/* Default */}
<WbRadio name="size-demo" size="lg" label="Large" />

Radio Groups

Radio buttons work in groups where only one option can be selected at a time. Use the same name attribute to group related options.

Basic Radio Group

<WbRadio name="options" value="a" label="Option A" checked />
<WbRadio name="options" value="b" label="Option B" />
<WbRadio name="options" value="c" label="Option C" />

Group with Disabled Option

<WbRadio name="availability" value="available" label="Available" />
<WbRadio name="availability" value="selected" label="Selected" checked />
<WbRadio name="availability" value="unavailable" label="Unavailable" disabled />

Checkbox Component

Checkboxes allow users to select one or more options from a set, or toggle a single option on/off. The WbCheckbox component supports multiple visual states, optional labels with flexible positioning, and includes an indeterminate state for partial selections.

Overview

The WbCheckbox component provides a customizable checkbox with 6 visual states (default, hover, focus, selected, indeterminate, disabled) and optional labels that can be positioned on either side. It includes proper ARIA attributes for accessibility and supports both controlled and showcase usage patterns.

Props API

States

WbCheckbox supports 6 visual states that represent different interaction and selection states.

All States (Without Label)

All States (With Label - Right)

State Colors Reference

<WbCheckbox status="default" label="Default" />
<WbCheckbox status="selected" label="Selected" />
<WbCheckbox status="indeterminate" label="Indeterminate" />
<WbCheckbox status="disabled" label="Disabled" />

Label Position

Labels can be positioned on either side of the checkbox for flexible layout options.

Label Right (Default)

<WbCheckbox label="Label on right" />
<WbCheckbox label="Label on right" labelPosition="right" />

Label Left

<WbCheckbox label="Label on left" labelPosition="left" />

Without Label

<WbCheckbox />
<WbCheckbox status="selected" />
<WbCheckbox status="indeterminate" />

Indeterminate State

The indeterminate state is used when a checkbox represents a group of options where some (but not all) are selected. This is common in "select all" scenarios.

Example: Parent-Child Selection

// Parent checkbox shows indeterminate when some children are selected
const allSelected = children.every(c => c.selected);
const someSelected = children.some(c => c.selected);

<WbCheckbox
  label="Select All Features"
  status={allSelected ? 'selected' : someSelected ? 'indeterminate' : 'default'}
  checked={allSelected}
  onChange={handleSelectAll}
/>

Checkbox Groups

Unlike radio buttons, multiple checkboxes can be selected independently. Group related checkboxes together logically.

Multiple Selection

<WbCheckbox label="Email notifications" checked={prefs.email} onChange={...} />
<WbCheckbox label="SMS notifications" checked={prefs.sms} onChange={...} />
<WbCheckbox label="Push notifications" checked={prefs.push} onChange={...} />
<WbCheckbox label="In-app notifications (coming soon)" status="disabled" />

Progress Bar Component

Progress bars visually indicate the completion status of a task or process. The WbProgress component supports multiple sizes, flexible label positioning, and smooth animations with full accessibility support.

Overview

The WbProgress component displays a horizontal bar that fills based on a percentage value. It supports 3 size variants (sm, md, lg), 3 label positions (left, right, none), and includes proper ARIA attributes for accessibility. The fill animation provides smooth visual feedback when the value changes.

Props API

Basic Examples

Progress bars showing different completion states from 0% to 100%.

Progress Values

<WbProgress value={0} />
<WbProgress value={25} />
<WbProgress value={50} />
<WbProgress value={75} />
<WbProgress value={100} />

Size Variants

WbProgress supports 3 size variants for different UI contexts and visual prominence.

Size Comparison

Size Specifications

<WbProgress value={60} size="sm" />
<WbProgress value={60} size="md" />  {/* Default */}
<WbProgress value={60} size="lg" />

Label Position

The percentage label can be positioned on either side of the progress bar or hidden entirely.

Label Left (Default)

<WbProgress value={45} labelPosition="left" />

Label Right

<WbProgress value={45} labelPosition="right" />

No Label

<WbProgress value={45} labelPosition="none" />
{/* Or use showLabel prop */}
<WbProgress value={45} showLabel={false} />

Colors

The progress bar uses the WorksBuddy design system colors.

Color Reference

Customizing Colors

/* Override colors via CSS variables */
:root {
  --wb-color-primary: #22c55e;  /* Green fill */
  --wb-color-primary-soft: #dcfce7;  /* Light green track */
}

/* Or use custom className */
.progress-success .wb-progress__fill {
  background-color: #22c55e;
}

.progress-success .wb-progress__track {
  background-color: #dcfce7;
}

List Component

Lists display a series of items with visual markers. WbList supports ordered (numbered) and unordered (star bullet) styles.

Props API

WbList Props

WbListItem Props

Unordered List

Displays items with star bullet markers (24px).

<WbList type="unordered">
  <WbListItem>First list item</WbListItem>
  <WbListItem>Second list item</WbListItem>
  <WbListItem>Third list item</WbListItem>
</WbList>

Ordered List

Displays items with numbered circle markers (32px).

<WbList type="ordered">
  <WbListItem>Create your account</WbListItem>
  <WbListItem>Configure your settings</WbListItem>
  <WbListItem>Start using the app</WbListItem>
</WbList>

Styling Details

Alert Component

Alerts display important messages with color-coded variants for different types of feedback.

Props API

Variants

<WbAlert variant="success">Success! Your changes have been saved.</WbAlert>
<WbAlert variant="error">Error! Something went wrong.</WbAlert>
<WbAlert variant="info">Info: New features are available.</WbAlert>
<WbAlert variant="warning">Warning: Your session will expire soon.</WbAlert>

Without Icon

<WbAlert variant="info" showIcon={false}>
  This alert has no icon.
</WbAlert>

Variant Colors

Loader Component

Animated circular loading spinner to indicate loading states. The WbLoader uses an SVG-based arc design with customizable size, color, speed, and optional track.

Props API

Sizes

WbLoader supports 5 size options. Each size has a proportional default stroke width.

<WbLoader size="xs" />  {/* 24px */}
<WbLoader size="sm" />  {/* 32px */}
<WbLoader size="md" />  {/* 40px - default */}
<WbLoader size="lg" />  {/* 48px */}
<WbLoader size="xl" />  {/* 56px */}

Colors

8 color options to match your design system.

<WbLoader color="primary" />    {/* #735DFF */}
<WbLoader color="secondary" />  {/* #6b7280 */}
<WbLoader color="success" />    {/* #10b981 */}
<WbLoader color="danger" />     {/* #ef4444 */}
<WbLoader color="warning" />    {/* #f59e0b */}
<WbLoader color="info" />       {/* #3b82f6 */}

With Track

Show an optional background track circle behind the spinner arc.

<WbLoader showTrack />
<WbLoader showTrack={false} />

Animation Speeds

Control the rotation speed with 4 preset options.

<WbLoader speed="slow" />    {/* 1500ms */}
<WbLoader speed="normal" />  {/* 1000ms - default */}
<WbLoader speed="fast" />    {/* 700ms */}
<WbLoader speed="faster" />  {/* 500ms */}

Size Reference

Color Reference

Speed Reference

Stroke Width Reference

Stats Card Component

Display statistics with title, value, and active/inactive counts.

Basic Props

Basic Usage

<WbStatsCard title="Total Leads" value={26} activeCount={17} inactiveCount={2} bgColor="cyan" icon={<WbIconDownload />} />
<WbStatsCard title="Assigned" value={129} activeCount={17} inactiveCount={2} bgColor="green" iconColor="green" activeColor="green" icon={<WbIconCheck />} />
<WbStatsCard title="In progress" value={129} activeCount={17} inactiveCount={2} bgColor="yellow" iconColor="yellow" activeColor="yellow" icon={<WbIconClock />} />
<WbStatsCard title="Lost" value="94%" activeCount={6} inactiveCount={100} bgColor="red" iconColor="red" activeColor="red" activeLabel="% left" inactiveLabel="%" icon={<WbIconClose />} />

Dimension Props

Color Props

Background Colors

Only 4 approved background colors are available:

<WbStatsCard bgColor="cyan" ... />  {/* #0C9CFC1A */}
<WbStatsCard bgColor="green" ... />  {/* #0CC7901A */}
<WbStatsCard bgColor="yellow" ... /> {/* #FFCE0B1A */}
<WbStatsCard bgColor="red" ... />    {/* #E103031A */}

Icon Props

Custom Colors Example

<!-- Green theme -->
<WbStatsCard
  title="Tasks"
  value={45}
  activeCount={40}
  inactiveCount={5}
  bgColor="green"
  iconColor="green"
  activeColor="green"
  activeLabel="completed"
  inactiveLabel="pending"
  icon={<WbIconCheck />}
/>

<!-- Yellow theme -->
<WbStatsCard
  title="In Progress"
  value={129}
  activeCount={17}
  inactiveCount={2}
  bgColor="yellow"
  iconColor="yellow"
  activeColor="yellow"
  icon={<WbIconClock />}
/>

Popup Component

Modal dialog for confirmations, forms, and alerts with backdrop overlay.

Props API

Example 1: Simple Modal Popup

The simplest way to use WbPopup is by controlling its visibility with a boolean state. Set isOpen to true to show the popup, and false to hide it.

import { useState } from 'react';
import { WbPopup } from 'works-buddy;

function SimplePopupExample() {
  // Step 1: Create state to control popup visibility
  const [isOpen, setIsOpen] = useState(false);

  // Step 2: Render the popup with isOpen and onClose
  return (
    <WbPopup
      isOpen={isOpen}
      onClose={() => setIsOpen(false)}
      showCloseButton
      title="Title"
      description="Keep your messages short, but make sure they cover everything you need to say."
      primaryButtonLabel="Button"
      onPrimaryClick={() => {
        // Handle primary action
        setIsOpen(false);
      }}
      secondaryButtonLabel="Button"
      onSecondaryClick={() => setIsOpen(false)}
    />
  );
}

Example 2: Open Popup with WbButton

A common pattern is to open the popup when a user clicks a button. Simply call setIsOpen(true) in the button's onClick handler. Click the button below to see it in action.

import { useState } from 'react';
import { WbPopup, WbButton } from 'works-buddy;

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

  return (
    <div>
      {/* Button that opens the popup */}
      <WbButton
        variant="fill"
        onClick={() => setIsOpen(true)}
      >
        Open Modal
      </WbButton>

      {/* Popup that appears when button is clicked */}
      <WbPopup
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        showCloseButton
        title="Title"
        description="Keep your messages short, but make sure they cover everything you need to say."
        primaryButtonLabel="Button"
        onPrimaryClick={() => {
          // Handle primary action
          setIsOpen(false);
        }}
        secondaryButtonLabel="Button"
        onSecondaryClick={() => setIsOpen(false)}
      />
    </div>
  );
}

Button Props

Input Props

With Input Field

<WbPopup
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Enter Name"
  inputPlaceholder="Enter name..."
  inputValue={name}
  onInputChange={(e) => setName(e.target.value)}
  primaryButtonLabel="Save"
  onPrimaryClick={handleSave}
/>

Simple Alert

<WbPopup
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Success!"
  description="Your changes have been saved."
  primaryButtonLabel="OK"
  onPrimaryClick={() => setIsOpen(false)}
  paddingSize="small"
/>

With Custom Content

<WbPopup
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  showCloseButton
  title="Custom Content"
>
  <div>
    <p>Any custom React content here</p>
    <MyCustomComponent />
  </div>
</WbPopup>

Avatar Component

Display user profile images or initials with optional status indicators.

Props API

With Image

Get the code →

<WbAvatar
  src="https://example.com/avatar.png"
  alt="John Doe"
  size="md"
/>

With Initials (Fallback)

<WbAvatar name="John Doe" size="md" />

Sizes

<WbAvatar name="Alice" size="xs" />
<WbAvatar name="Alice" size="sm" />
<WbAvatar name="Alice" size="md" />
<WbAvatar name="Alice" size="lg" />
<WbAvatar name="Alice" size="xl" />
<WbAvatar name="Alice" size="2xl" />
<WbAvatar name="Alice" size="3xl" />
<WbAvatar name="Alice" size="4xl" />

Status Indicators

<WbAvatar name="John" size="lg" status="online" />
<WbAvatar name="John" size="lg" status="offline" />
<WbAvatar name="John" size="lg" status="away" />
<WbAvatar name="John" size="lg" status="busy" />

Size Reference

Status Colors

Toggle Component

Switch control for toggling between on and off states.

Props API

Basic Usage

<WbToggle />
<WbToggle checked={true} />

With Label

<WbToggle label="Enable notifications" />

Label Position

<WbToggle label="Left label" labelPosition="left" />
<WbToggle label="Right label" labelPosition="right" />

States

<WbToggle checked={false} />
<WbToggle checked={true} />
<WbToggle status="disabled" />

Controlled Usage

const [isEnabled, setIsEnabled] = useState(false);

<WbToggle
  checked={isEnabled}
  onChange={(checked) => setIsEnabled(checked)}
  label="Dark mode"
/>

Stepper Component

Numeric input control with increment and decrement buttons. A compact two-button stepper that supports controlled/uncontrolled modes, min/max boundaries, and multiple size variants.

Props API

States

The stepper supports four visual states. Clicking a button highlights it with the active (purple) state.

// Default
<WbStepper />

// Hover state (demo only)
<WbStepper status="hover" activeButton="decrement" />

// Active state (demo only)
<WbStepper status="active" activeButton="increment" />

// Disabled
<WbStepper disabled />

Basic Usage

const [value, setValue] = useState(0);

<WbStepper
  value={value}
  onChange={(val) => setValue(val)}
/>

Sizes

<WbStepper size="medium" />
<WbStepper size="small" />

With Min/Max

<WbStepper
  value={quantity}
  min={0}
  max={10}
  onChange={(val) => setQuantity(val)}
/>

Disabled

<WbStepper disabled />

Pagination Component

Navigate between pages with numbered or dot-based pagination.

Props API

Dashboard Style (Numbers)

const [page, setPage] = useState();

  <WbPagination
  platform="dashboard"
  currentPage={page}
  totalPages={4}
  onChange={(page) => setPage(page)}
/>

Website Style (Dots)

const [page, setPage] = useState(); 
                           
<WbPagination
platform="website"
currentPage={page}
totalPages={4}
onChange={(page) => setPage(page)}
/>

Dropdown Component

Select dropdown with multi-select support.

Props API

Basic Usage

const [selected, setSelected] = useState();
const options = [
  { value: '1', label: 'Option 1' },
  { value: '2', label: 'Option 2' },
  { value: '3', label: 'Option 3' },
];

<WbDropdown
  options={options}
  value={selected}
  placeholder="Select option"
  onChange={(values) => setSelected(values)}
/>

Disabled State

Use the disabled prop to disable the dropdown. The dropdown cannot be opened or interacted with when disabled.

const [selected, setSelected] = useState();
const options = [
  { value: '1', label: 'Option 1' },
  { value: '2', label: 'Option 2' },
  { value: '3', label: 'Option 3' },
];

<WbDropdown
  options={options}
  value={selected}
  placeholder="Select option"
  disabled={true}
/>

With Disabled Options

Individual options can be disabled by setting disabled: true on the option object. Disabled options are visible but cannot be selected.

const options = [
  { value: '1', label: 'Option 1' },
  { value: '2', label: 'Option 2 (Unavailable)', disabled: true },
  { value: '3', label: 'Option 3' },
];

<WbDropdown
  options={options}
  placeholder="Select option"
  onChange={(values) => setSelected(values)}
/>

Controlled Component Example

Here's a complete example showing how to use the dropdown as a controlled component with React state.

import { useState } from 'react';
import { WbDropdown } from 'works-buddy;

function CategoryFilter() {
  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);

  const categoryOptions = [
    { value: 'electronics', label: 'Electronics' },
    { value: 'clothing', label: 'Clothing' },
    { value: 'books', label: 'Books' },
    { value: 'home', label: 'Home & Garden' },
    { value: 'sports', label: 'Sports', disabled: true },
  ];

  const handleChange = (values: string[]) => {
    setSelectedCategories(values);
    console.log('Selected categories:', values);
  };

  return (
    <div>
      <label>Filter by Category</label>
      <WbDropdown
        options={categoryOptions}
        value={selectedCategories}
        placeholder="Select categories"
        width={283}
        onChange={handleChange}
      />
      {selectedCategories.length > 0 && (
        <p>Selected: {selectedCategories.join(', ')}</p>
      )}
    </div>
  );
}

Width Options

Shadow Utilities

CSS utility classes for applying consistent shadow effects.

Usage

WbShadow provides CSS classes to apply box shadows. Import the CSS and add classes to any element.

<div className="wbshadow-blur-4">Light shadow</div>
<div className="wbshadow-blur-25">Medium shadow</div>
<div className="wbshadow-blur-45">Heavy shadow</div>

Available Classes

Class Reference

All shadows use the brand purple color (#735DFF) at 25% opacity.

Select Component

Single-select dropdown with status variants and multiple width options.

Props API

Basic Usage

const [selected, setSelected] = useState(""); 
const options = [
  { value: '1', label: 'Option 1' },
  { value: '2', label: 'Option 2' },
  { value: '3', label: 'Option 3' },
];

<WbSelect
  options={options}
  value={selected}
  placeholder="Select option"
  onChange={(value) => setSelected(value)}
/>

Status Variants

<WbSelect status="default" options={options} />
<WbSelect status="success" options={options} />
<WbSelect status="error" options={options} />
<WbSelect status="warning" options={options} />
<WbSelect status="info" options={options} />

Width Options

<WbSelect width="xs" options={options} />
<WbSelect width="sm" options={options} />
<WbSelect width="md" options={options} />
<WbSelect width="lg" options={options} />
<WbSelect width="xl" options={options} />

AuthForm Component

Complete authentication form with login/signup fields, social providers, and customizable layout.

Props API

AuthField Type

Sign In Form

import { useState } from 'react';
import { WbAuthForm, WbIconUser, WbIconGoogle, WbIconFacebook, WbIconTwitter } from 'works-buddy';
import 'works-buddy/style';

export default function SignInForm() {
  const [username, setUsername] = useState('[email protected]');
  const [password, setPassword] = useState('');
  const [remember, setRemember] = useState(false);

  return (
    <WbAuthForm
      icon={<WbIconUser />}
      title="Sign In"
      subtitle="Welcome back Adarsh Singh!"
      fields={[
        {
          name: 'username',
          label: 'User Name',
          type: 'email',
          value: username,
          onChange: (e) => setUsername(e.target.value),
        },
        {
          name: 'password',
          label: 'Password',
          type: 'password',
          value: password,
          onChange: (e) => setPassword(e.target.value),
          rightLink: {
            text: 'Forgot password?',
            onClick: () => alert('Navigate to forgot password'),
          },
        },
      ]}
      showRememberPassword
      rememberPasswordChecked={remember}
      onRememberPasswordChange={setRemember}
      showSocialLogin
      socialProviders={[
        { icon: <WbIconGoogle />, onClick: () => alert('Google'), ariaLabel: 'Google' },
        { icon: <WbIconFacebook />, onClick: () => alert('Facebook'), ariaLabel: 'Facebook' },
        { icon: <WbIconTwitter />, onClick: () => alert('Twitter'), ariaLabel: 'Twitter' },
      ]}
      submitButtonLabel="Sign in"
      onSubmit={(e) => {
        e.preventDefault();
        alert('Sign in: ' + username);
      }}
      footerText="Dont have an account?"
      footerLinkText="Sign Up"
      onFooterLinkClick={() => alert('Navigate to sign up')}
    />
  );
}

Additional Props

Sign Up Form

import { useState } from 'react';
import { WbAuthForm, WbIconUserPlus, WbIconGoogle, WbIconFacebook, WbIconTwitter } from 'works-buddy';
import 'works-buddy/style';

export default function SignUpForm() {
  const [fullName, setFullName] = useState('Adarsh Singh');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');

  return (
    <WbAuthForm
      icon={<WbIconUserPlus />}
      title="Sign up"
      subtitle="Join us by creating a free account !"
      fields={[
        {
          name: 'fullName',
          label: 'Full Name',
          type: 'text',
          value: fullName,
          onChange: (e) => setFullName(e.target.value),
        },
        {
          name: 'password',
          label: 'Password',
          type: 'password',
          value: password,
          onChange: (e) => setPassword(e.target.value),
        },
        {
          name: 'confirmPassword',
          label: 'Confirm Password',
          type: 'password',
          value: confirmPassword,
          onChange: (e) => setConfirmPassword(e.target.value),
        },
      ]}
      showSocialLogin
      socialProviders={[
        { icon: <WbIconGoogle />, onClick: () => alert('Google'), ariaLabel: 'Google' },
        { icon: <WbIconFacebook />, onClick: () => alert('Facebook'), ariaLabel: 'Facebook' },
        { icon: <WbIconTwitter />, onClick: () => alert('Twitter'), ariaLabel: 'Twitter' },
      ]}
      submitButtonLabel="Create Account"
      onSubmit={(e) => {
        e.preventDefault();
        if (password !== confirmPassword) {
          alert('Passwords do not match!');
          return;
        }
        alert('Account created for: ' + fullName);
      }}
      footerText="Dont have an account?"
      footerLinkText="Sign in"
      onFooterLinkClick={() => alert('Navigate to sign in')}
    />
  );
}

Forgot Password Form

import { useState } from 'react';
import { WbAuthForm, WbIconChat } from 'works-buddy';
import 'works-buddy/style';

export default function ForgotPasswordForm() {
  const [newPassword, setNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [remember, setRemember] = useState(false);

  return (
    <WbAuthForm
      icon={<WbIconChat />}
      title="Forgot Password"
      subtitle="Hello  Adarsh Singh!"
      fields={[
        {
          name: 'newPassword',
          label: 'New Password',
          type: 'password',
          value: newPassword,
          onChange: (e) => setNewPassword(e.target.value),
        },
        {
          name: 'confirmPassword',
          label: 'Confirm Password',
          type: 'password',
          value: confirmPassword,
          onChange: (e) => setConfirmPassword(e.target.value),
        },
      ]}
      showRememberPassword
      rememberPasswordChecked={remember}
      onRememberPasswordChange={setRemember}
      submitButtonLabel="Continue"
      onSubmit={(e) => {
        e.preventDefault();
        if (newPassword !== confirmPassword) {
          alert('Passwords do not match!');
          return;
        }
        alert('Password reset successful!');
      }}
    />
  );
}

Complete Example — All Three Forms

A single copy-paste runnable file with Sign In, Sign Up, and Forgot Password. No external libraries, routing, or icon packages needed.

import { useState } from 'react';
import {
  WbAuthForm,
  WbIconUser,
  WbIconUserPlus,
  WbIconChat,
  WbIconGoogle,
  WbIconFacebook,
  WbIconTwitter,
} from 'works-buddy';
import 'works-buddy/style';

/* ── Shared social-provider list ── */

const socialProviders = [
  { icon: <WbIconGoogle />, onClick: () => alert('Google'), ariaLabel: 'Google' },
  { icon: <WbIconFacebook />, onClick: () => alert('Facebook'), ariaLabel: 'Facebook' },
  { icon: <WbIconTwitter />, onClick: () => alert('Twitter'), ariaLabel: 'Twitter' },
];

/* ── Page type ── */

type Page = 'signin' | 'signup' | 'forgot';

/* ── Main component ── */

export default function AuthExample() {
  const [page, setPage] = useState<Page>('signin');

  // Sign In state
  const [username, setUsername] = useState('[email protected]');
  const [signInPassword, setSignInPassword] = useState('');
  const [remember, setRemember] = useState(false);

  // Sign Up state
  const [fullName, setFullName] = useState('Adarsh Singh');
  const [signUpPassword, setSignUpPassword] = useState('');
  const [signUpConfirm, setSignUpConfirm] = useState('');

  // Forgot Password state
  const [newPassword, setNewPassword] = useState('');
  const [forgotConfirm, setForgotConfirm] = useState('');
  const [forgotRemember, setForgotRemember] = useState(false);

  if (page === 'signin') {
    return (
      <WbAuthForm
        icon={<WbIconUser />}
        title="Sign In"
        subtitle="Welcome back Adarsh Singh!"
        fields={[
          {
            name: 'username',
            label: 'User Name',
            type: 'email',
            value: username,
            onChange: (e) => setUsername(e.target.value),
          },
          {
            name: 'password',
            label: 'Password',
            type: 'password',
            value: signInPassword,
            onChange: (e) => setSignInPassword(e.target.value),
            rightLink: {
              text: 'Forgot password?',
              onClick: () => setPage('forgot'),
            },
          },
        ]}
        showRememberPassword
        rememberPasswordChecked={remember}
        onRememberPasswordChange={setRemember}
        showSocialLogin
        socialProviders={socialProviders}
        submitButtonLabel="Sign in"
        onSubmit={(e) => {
          e.preventDefault();
          alert('Sign in: ' + username);
        }}
        footerText="Dont have an account?"
        footerLinkText="Sign Up"
        onFooterLinkClick={() => setPage('signup')}
      />
    );
  }

  if (page === 'signup') {
    return (
      <WbAuthForm
        icon={<WbIconUserPlus />}
        title="Sign up"
        subtitle="Join us by creating a free account !"
        fields={[
          {
            name: 'fullName',
            label: 'Full Name',
            type: 'text',
            value: fullName,
            onChange: (e) => setFullName(e.target.value),
          },
          {
            name: 'password',
            label: 'Password',
            type: 'password',
            value: signUpPassword,
            onChange: (e) => setSignUpPassword(e.target.value),
          },
          {
            name: 'confirmPassword',
            label: 'Confirm Password',
            type: 'password',
            value: signUpConfirm,
            onChange: (e) => setSignUpConfirm(e.target.value),
          },
        ]}
        showSocialLogin
        socialProviders={socialProviders}
        submitButtonLabel="Create Account"
        onSubmit={(e) => {
          e.preventDefault();
          if (signUpPassword !== signUpConfirm) {
            alert('Passwords do not match!');
            return;
          }
          alert('Account created for: ' + fullName);
        }}
        footerText="Dont have an account?"
        footerLinkText="Sign in"
        onFooterLinkClick={() => setPage('signin')}
      />
    );
  }

  // page === 'forgot'
  return (
    <WbAuthForm
      icon={<WbIconChat />}
      title="Forgot Password"
      subtitle="Hello  Adarsh Singh!"
      fields={[
        {
          name: 'newPassword',
          label: 'New Password',
          type: 'password',
          value: newPassword,
          onChange: (e) => setNewPassword(e.target.value),
        },
        {
          name: 'confirmPassword',
          label: 'Confirm Password',
          type: 'password',
          value: forgotConfirm,
          onChange: (e) => setForgotConfirm(e.target.value),
        },
      ]}
      showRememberPassword
      rememberPasswordChecked={forgotRemember}
      onRememberPasswordChange={setForgotRemember}
      submitButtonLabel="Continue"
      onSubmit={(e) => {
        e.preventDefault();
        if (newPassword !== forgotConfirm) {
          alert('Passwords do not match!');
          return;
        }
        alert('Password reset successful!');
        setPage('signin');
      }}
    />
  );
}

Changelog

Version history and release notes for WorksBuddy.

v0.2.0 (Current)

Component Library Expansion - February 2026

• ✨ Input component with validation states
• ✨ Select component with single and multi-select
• ✨ Dropdown component with checkbox options
• ✨ Checkbox component with indeterminate state
• ✨ Radio button component
• ✨ Toggle/Switch component
• ✨ Tabs component
• ✨ Stepper component
• ✨ Pagination component
• ✨ Popup/Modal component
• ✨ Avatar component with fallback support
• ✨ Badge component with variants
• ✨ Alert component
• ✨ DataTable component
• ✨ AuthForm component
• ✨ Typography system
• ✨ Card component
• ✨ Progress bar component
• ✨ Navigation components (Top Nav, Bottom Nav)
• ✨ Dashboard layout component
• 📚 Interactive documentation with live examples

v0.1.0

Initial Release - January 2025

• ✨ Button component with fill, stroke, and text variants
• ✨ All 5 sizes: giant, large, medium, small, tiny
• ✨ Full keyboard accessibility support
• ✨ CSS variable theming system
• ✨ Comprehensive design tokens
• ✨ TypeScript support
• 📚 Complete documentation

Upcoming

• Date picker component
• Time picker component
• File upload component
• Toast/Notification component
• Accordion component
• Breadcrumb component
• Additional color themes

Support & Feedback

Get help using WorksBuddy or share feedback to help us improve.

Documentation

Most questions are answered in this documentation. Use the sidebar navigation to find specific topics.

GitHub Issues

Report bugs or request features on GitHub:

• GitHub Issues
• GitHub Discussions

Common Issues

Styles not applying

Problem: WorksBuddy components appear unstyled.

Solution: Ensure you imported the CSS file:

import 'works-buddy/style';

Type errors

Problem: TypeScript errors when using components.

Solution: Ensure you have the correct React version (18+) and TypeScript is configured properly.

Focus outline not visible

Problem: Focus outline is not showing on buttons.

Solution: Check that you imported the CSS and no global styles are overriding the focus outline.

Getting Help

When reporting issues, include:

• Minimal code example
• WorksBuddy version
• React version
• Browser and OS
• Expected vs actual behavior