Skip to main content

Components Overview

BuildGrid UI provides 44 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​

44
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

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

Navigation & Actions​

Components for user navigation and interactive actions.

Button

Interactive buttons with multiple variants and states

formaction

Navigation Menu

Hierarchical navigation with dropdowns

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

Dialog

Modal dialogs and overlays

overlaymodal

Accordion

Collapsible content sections with smooth animations

layoutnavigation

Collapsible

Expandable content sections

layoutnavigation

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

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