webster

Accordion component with collapsible sections. Use for FAQs, nested content, or expandable details sections.

Button component with variants, sizes, loading states, and icon support. Use when creating clickable actions, forms, or navigation buttons.

Calendar component for date and month selection. Use when building date pickers, scheduling interfaces, or date range selectors.

Carousel component for image/content sliders with navigation controls. Use for image galleries, hero sections, or content that scrolls horizontally.

Checkbox component for boolean or multi-select inputs. Use when building forms with boolean toggles or multiple selection lists.

Dropdown menu component with trigger and content pattern. Use when building selectable menus, action menus, or nested navigation.

Icon-only button component for actions. Use for toolbars, navigation bars, or compact action buttons without text.

Image component with lazy loading, dark mode support, and error handling. Use for displaying images with optimized loading.

Loading spinner component for async operation states. Use during data fetching, form submissions, or any async operation.

Modal dialog component with animations and overlay. Use when building dialogs, confirmations, or focused interactions that require user attention.

Number input component with increment/decrement controls. Use for numeric values, quantities, or any numeric input with stepper controls.

Popover and tooltip component for floating content. Use for contextual information, tooltips, or overflow menus.

Progress bar component for showing completion status. Use for file uploads, multi-step forms, loading states, or task progress.

Radio button component for single selection from mutually exclusive options. Use when user must choose exactly one option from a list.

Select dropdown component for single selection from options. Use when user needs to choose one option from a list of predefined choices.

Slider component for selecting values from a range. Use for price ranges, volume controls, or any continuous value selection.

Table component with header, body, footer, rows, and cells for tabular data display. Use when displaying structured data, lists, or reports.

Tab navigation component for organizing content into switchable panels. Use when building settings pages, dashboards, or content that needs categorization.

Tag and Pill components for labels, badges, and status indicators. Use for categories, status labels, or inline metadata.

Text area component for multi-line text input. Use for descriptions, comments, messages, or any long-form text entry.

Text input component with validation, icons, error states, and multiple variants. Use when building forms, search inputs, or text entry fields.

Toast notification component for temporary feedback messages. Use for success confirmations, error alerts, warnings, and informational notices.

Toggle switch component for binary on/off states. Use for settings, preferences, boolean options, or feature toggles.

Comprehensive React UI component library by Groww. Use for building consistent, accessible web applications with pre-built components. Contains atoms (Button, Input, CheckBox, etc.) and molecules (Calendar, Carousel, etc.).

Design system color tokens and semantic color variables. Use for consistent color usage across applications with automatic dark mode support.

Responsive grid system with 12-column layout for desktop, tablet, and mobile. Use when building page layouts, responsive designs, or any column-based structure.

Shimmer/placeholder loading animations for skeleton screens. Use for loading states, content placeholders, or skeleton UI during data fetching.

Complete Mint CSS design system with grid, typography, colors, utilities, and theming. Use for building consistent, responsive, and accessible web applications with a complete CSS framework.

Light and dark theme system with CSS variables. Use for theming support in applications with automatic theme switching.

Typography system with font families, sizes, and token classes. Use for consistent text styling across the application.

Utility CSS classes for common styling needs like positioning, layout, spacing, and display. Use for rapid prototyping and consistent utility styling.

Z-index scale and layering system for proper element stacking. Use for managing modal overlays, dropdowns, popups, and other layered elements.