Components Overview

​

Installation

npm install @theme-ui/components

yarn add @theme-ui/components

​

Importing Components

import { Button, Box, Flex } from '@theme-ui/components'

import * as Components from '@theme-ui/components'

​

Component Categories

​

Layout Components

• Box - The foundational component with system props for styling
• Flex - Flexbox container
• Grid - CSS Grid layout component
• Container - Centered, max-width container

​

Typography Components

• Text - Generic text element
• Heading - Heading component (h1-h6)
• Paragraph - Paragraph element

​

Form Components

• Input - Text input
• Textarea - Multi-line text input
• Select - Dropdown select
• Label - Form label
• Checkbox - Checkbox input with custom icon
• Radio - Radio input with custom icon
• Switch - Toggle switch
• Slider - Range slider
• Field - Labeled form field wrapper

​

UI Elements

• Button - Button element
• Link - Anchor link
• NavLink - Navigation link
• Card - Container card
• Badge - Inline badge
• Alert - Alert message box
• Avatar - User avatar image
• Spinner - Loading spinner
• Progress - Progress bar
• Donut - Donut chart
• IconButton - Icon button
• Close - Close button
• Message - Message callout
• Divider - Horizontal divider
• Embed - Responsive iframe embed
• Image - Image element

​

Theme-Aware Styling

<Box
  sx={{
    bg: 'primary',
    color: 'white',
    p: 3,
    borderRadius: 4,
  }}
>
  Themed Box
</Box>

​

Component Variants

// Button variants from theme.buttons
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>

// Card variants from theme.cards
<Card variant="compact">Compact Card</Card>

​

System Props

<Box
  m={2}        // margin
  p={3}        // padding
  bg="primary" // background
  color="white"
>
  Content
</Box>

​

Accessibility

• Semantic HTML elements by default
• Proper ARIA attributes where needed
• Keyboard navigation support
• Screen reader friendly

​

TypeScript Support

import { ButtonProps, BoxProps } from '@theme-ui/components'

const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />
}