Components

Components

A comprehensive collection of accessible, customizable React components built with TypeScript and vanilla-extract.

Component Library

Layout

  • Box - The foundation of our layout system with access to all design tokens
  • Text - Polymorphic text component for consistent typography

Buttons & Actions

  • Button - Flexible button with variants, sizes, and icon support
  • IconButton - Square button designed specifically for icons

Forms

  • Checkbox - Styled checkbox with indeterminate state support
  • FormField - Wrapper for form controls with labels and error messages
  • Input - Text input with multiple variants and states
  • Radio - Styled radio button for single selections
  • Select - Dropdown select with consistent styling
  • Switch - Toggle switch for binary choices

Icons & Media

  • Icon - Flexible icon component with built-in gallery

Features

🎨 Consistent Design

All components follow the Vanilla Design System tokens for colors, spacing, typography, and more.

🦾 TypeScript First

Full TypeScript support with comprehensive type definitions and IntelliSense.

♿ Accessible

Built with accessibility in mind - proper ARIA attributes, keyboard navigation, and screen reader support.

🎭 Polymorphic

Many components support the as prop for rendering different HTML elements while maintaining type safety.

🌗 Theme Support

All components work seamlessly with light and dark themes.

📱 Responsive

Components include responsive props and adapt to different screen sizes.

Getting Started

npm install @beauginbey/vanilla-components
import { Button, Box, Text } from '@beauginbey/vanilla-components';
 
function App() {
  return (
    <Box p={4}>
      <Text as="h1" size="3xl" weight="bold" mb={4}>
        Welcome to Vanilla
      </Text>
      <Button variant="solid">
        Get Started
      </Button>
    </Box>
  );
}

Design Principles

  1. Composability - Components are designed to work together seamlessly
  2. Flexibility - Extensive customization through props and variants
  3. Performance - Zero runtime CSS-in-JS with vanilla-extract
  4. Developer Experience - Intuitive APIs with excellent TypeScript support
  5. Accessibility - WCAG compliant with proper semantic HTML

Resources

  • Design Tokens - Learn about the design tokens that power our components
  • Theming - Customize components with themes
  • Colors - Explore the color system
  • Examples - See components in action
Getting StartedTheme