Component Library

Design System Components

Production-ready React components built with accessibility, performance, and developer experience in mind

50+

Components

100%

Accessible

TypeScript

Type Safe

Tree

Shakeable

Quick Start

1. Install the package

Terminal

npm install @aerosnap/components

2. Import and use components

React Component

import { Button, Card, Typography } from '@aerosnap/components'

function App() {
  return (
    <Card className="p-6">
      <Typography variant="h2" className="mb-4">
        Welcome to AEROSNAP
      </Typography>
      <Button variant="primary">
        Get Started
      </Button>
    </Card>
  )
}

Component Categories

Organized by function and use case for easy discovery

Foundation

Core design elements and tokens

Colors

High Usage

Comprehensive color system with semantic tokens

Example Usage

// Primary colors
const colors = {
  primary: {
    50: '#f0f9ff',
    500: '#3b82f6',
    900: '#1e3a8a'
  },
  semantic: {
    success: '#10b981',
    warning: '#f59e0b',
    error: '#ef4444'
  }
}

Typography

High Usage

Responsive typography scale and components

Example Usage

<Typography variant="h1" className="mb-4">
  Heading Level 1
</Typography>
<Typography variant="body" color="muted">
  Body text with muted color
</Typography>

Spacing

High Usage

Consistent spacing system based on 8px grid

Example Usage

const spacing = {
  xs: '0.5rem',   // 8px
  sm: '0.75rem',  // 12px
  md: '1rem',     // 16px
  lg: '1.5rem',   // 24px
  xl: '2rem',     // 32px
}

Layout

Structural components for page organization

Container

High Usage

Responsive container with max-width constraints

Example Usage

<Container maxWidth="lg" className="px-4">
  <div>Content goes here</div>
</Container>

Grid

High Usage

Flexible CSS Grid system with responsive breakpoints

Example Usage

<Grid container spacing={3}>
  <Grid item xs={12} md={6}>
    <Card>Item 1</Card>
  </Grid>
  <Grid item xs={12} md={6}>
    <Card>Item 2</Card>
  </Grid>
</Grid>

Stack

Medium Usage

One-dimensional layout component with automatic spacing

Example Usage

<Stack direction="row" spacing={2} align="center">
  <Button variant="primary">Primary</Button>
  <Button variant="secondary">Secondary</Button>
</Stack>

Interactive

User input and action components

Button

High Usage

Versatile button component with multiple variants

Example Usage

<Button 
  variant="primary" 
  size="lg" 
  disabled={loading}
  onClick={handleClick}
>
  {loading ? <Spinner /> : 'Submit'}
</Button>

Input

High Usage

Form input with validation and accessibility features

Example Usage

<Input
  label="Email Address"
  type="email"
  placeholder="Enter your email"
  error={errors.email}
  required
/>

Select

Medium Usage

Dropdown selection with search and multi-select support

Example Usage

<Select
  options={countries}
  placeholder="Select country"
  searchable
  multiple
  onChange={handleChange}
/>

Display

Components for presenting information

Card

High Usage

Flexible content container with elevation

Example Usage

<Card variant="elevated" className="p-6">
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
  </CardHeader>
  <CardContent>
    Content goes here
  </CardContent>
</Card>

Modal

Medium Usage

Overlay dialog with backdrop and focus management

Example Usage

<Modal open={isOpen} onClose={handleClose}>
  <ModalHeader>
    <ModalTitle>Confirmation</ModalTitle>
  </ModalHeader>
  <ModalBody>
    Are you sure you want to continue?
  </ModalBody>
</Modal>

Toast

Medium Usage

Non-intrusive notification system

Example Usage

// Usage with hook
const { toast } = useToast()

toast({
  title: 'Success!',
  description: 'Your changes have been saved.',
  variant: 'success'
})

Design Tokens

Consistent design values that power our component system

Colors

primary

#3b82f6

secondary

#64748b

success

#10b981

warning

#f59e0b

error

#ef4444

Typography

Font Family

Inter, system-ui, sans-serif

Font Sizes

Aa0.75rem

Aa0.875rem

Aa1rem

Aa1.125rem

Aa1.25rem

Spacing

0.5rem

0.75rem

1rem

1.5rem

2rem

3rem

Component Usage Analytics

Most popular components across AEROSNAP projects

Button

92%

Input

87%

Card

78%

Modal

65%

Typography

89%

Grid

73%

Ready to Build Amazing UIs?

Start using our component library today and accelerate your development

Explore Storybook Design Principles