Skip to main content

Components Overview

BuildGrid UI provides 54 carefully crafted components that form the foundation of modern React applications. Each component is designed with accessibility, performance, and developer experience in mind.

Quick Stats​

54
Components
100%
TypeScript
WCAG
Accessible

Component Categories​

Form Elements​

Essential input components for building interactive forms and user interfaces.

Input

Text input fields with multiple sizes and types

formtext

Textarea

Multi-line text input with auto-resize

formtext

Select

Dropdown selection with search and grouping

formselection

Checkbox

Multi-selection input with indeterminate state

formselection

Radio Group

Single selection from multiple options

formselection

Switch

Toggle switches for boolean values

formtoggle

Label

Form labels with accessibility features

formaccessibility

Advanced Inputs​

Specialized input components for complex data types and enhanced user experience.

Autocomplete

Input with intelligent suggestions and completion

formsearch

Multi Select

Multiple selection dropdown with search

formselection

Tag Input

Input for creating and managing tags

formtags

Currency Input

Formatted input for monetary values

formnumber

Password Input

Secure password input with visibility toggle

formsecurity

Number Stepper

Numeric input with increment/decrement controls

formnumber

Input OTP

One-time password and PIN code input with grouped slots

formsecurity

Adaptive Input

Smart input that adapts to different data types

forminput

Date Picker

Date and date range selection with calendar popover

formdate

Slider

Range input for numeric values

formrange

Toggle

Toggle buttons for state changes

formtoggle

Toggle Group

Grouped toggle buttons for multiple selections

formselection

Navigation & Actions​

Components for user navigation and interactive actions.

Button

Interactive buttons with multiple variants and states

formaction

Button Group

Visually connected groups of related buttons

formaction

Navigation Menu

Hierarchical navigation with dropdowns

navigationmenu

Breadcrumb

Hierarchical path navigation with ellipsis support

navigationlayout

Menubar

Application-style horizontal menu bar with submenus

navigationmenu

Context Menu

Right-click contextual menus with checkboxes and submenus

navigationmenu

Tabs

Tabbed content navigation

navigationlayout

Pagination

Page navigation for large datasets

navigationdata

Dropdown Menu

Contextual menus and action lists

navigationmenu

Command

Command palette for quick actions and navigation

navigationsearch

Feedback & Status​

Components for providing user feedback and displaying status information.

Alert

Display important messages and notifications

feedbacknotification

Alert Dialog

Modal dialogs for confirmations and alerts

overlaymodal

Toaster

Toast notifications and alerts

feedbacknotification

Progress

Progress bars and loading indicators

feedbackloading

Spinner

Loading spinners and activity indicators

loadingfeedback

Skeleton

Loading placeholders for content

loadingplaceholder

Layout & Structure​

Components for organizing and structuring your application layout.

Card

Flexible content containers with header and footer

layoutcontainer

Separator

Visual dividers for content sections

layoutdivider

Sheet

Slide-out panels and drawers

overlaypanel

Drawer

Mobile-friendly bottom and side sheets with drag handle

overlaypanel

Dialog

Modal dialogs and overlays

overlaymodal

Resizable

Drag-to-resize panel groups, horizontal and vertical

layoutpanel

Scroll Area

Cross-browser custom scrollbars for overflow content

layoutscroll

Aspect Ratio

Maintain consistent width-to-height ratios for media

layoutmedia

Accordion

Collapsible content sections with smooth animations

layoutnavigation

Collapsible

Expandable content sections

layoutnavigation

Popover

Floating content containers

overlaytooltip

Display & Media​

Components for displaying content, media, and user information.

Avatar

User profile pictures with fallback options

displayuser

Badge

Small status indicators and labels

displaystatus

Typography

Semantic text components: headings, body, blockquote, code, list

displaytext

Kbd

Styled keyboard key and shortcut display

displaytext

Hover Card

Rich preview cards triggered on hover

overlaydisplay

Calendar

Date picker and calendar component

formdate

Carousel

Image and content slider with navigation

displaymedia

Table

Data tables with sorting and styling

datadisplay

Tooltip

Contextual help and information overlays

overlayhelp

Getting Started​

To start using components, install BuildGrid UI and import the components you need:

npm install buildgrid-ui
import { Button, Input, Card } from 'buildgrid-ui'

function MyComponent() {
  return (
    <Card>
      <Card.Header>
        <Card.Title>Example Form</Card.Title>
      </Card.Header>
      <Card.Content>
        <Input placeholder="Enter your name" />
      </Card.Content>
      <Card.Footer>
        <Button>Submit</Button>
      </Card.Footer>
    </Card>
  )
}

Design Principles​

All BuildGrid UI components follow these core principles:

  • Accessibility First - WCAG compliant with full keyboard navigation
  • TypeScript Native - Complete type safety and IntelliSense support
  • Customizable - Flexible styling with Tailwind CSS
  • Consistent - Unified design language across all components
  • Performance - Optimized for production use
  • Developer Experience - Intuitive APIs and comprehensive documentation

Need Help?​

  • 📖 Browse individual component documentation in the sidebar
  • 🎨 View live examples in our Storybook
  • 💬 Join discussions on GitHub
  • 🐛 Report issues on GitHub Issues