@theme-ui/components

npm install @theme-ui/components @emotion/react

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

<Box sx={{ padding: 3, bg: 'muted' }}>
  Content
</Box>

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

<Flex sx={{ alignItems: 'center', gap: 2 }}>
  <div>Item 1</div>
  <div>Item 2</div>
</Flex>

import { Grid } from '@theme-ui/components'

<Grid columns={[1, 2, 3]} gap={3}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Grid>

import { Container } from '@theme-ui/components'

<Container>
  Centered content
</Container>

import { Text } from '@theme-ui/components'

<Text sx={{ fontSize: 2, color: 'text' }}>
  Body text
</Text>

import { Heading } from '@theme-ui/components'

<Heading as="h1">Page Title</Heading>

import { Paragraph } from '@theme-ui/components'

<Paragraph>Body paragraph text.</Paragraph>

import { Link } from '@theme-ui/components'

<Link href="/about">About</Link>

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

<Button variant="primary">Click Me</Button>

import { Input } from '@theme-ui/components'

<Input placeholder="Enter text" />

import { Textarea } from '@theme-ui/components'

<Textarea rows={4} placeholder="Enter text" />

import { Select } from '@theme-ui/components'

<Select>
  <option>Option 1</option>
  <option>Option 2</option>
</Select>

import { Label } from '@theme-ui/components'

<Label htmlFor="email">Email Address</Label>

import { Checkbox } from '@theme-ui/components'

<Checkbox />

import { Radio } from '@theme-ui/components'

<Radio name="option" value="1" />

import { Slider } from '@theme-ui/components'

<Slider min={0} max={100} />

import { Switch } from '@theme-ui/components'

<Switch />

import { Field } from '@theme-ui/components'

<Field label="Email" name="email" />

import { IconButton } from '@theme-ui/components'

<IconButton aria-label="Menu">
  <MenuIcon />
</IconButton>

import { MenuButton } from '@theme-ui/components'

<MenuButton aria-label="Toggle Menu" />

import { Close } from '@theme-ui/components'

<Close onClick={handleClose} />

import { NavLink } from '@theme-ui/components'

<NavLink href="/about">About</NavLink>

import { Card } from '@theme-ui/components'

<Card>
  Card content
</Card>

import { Image } from '@theme-ui/components'

<Image src="photo.jpg" alt="Description" />

import { Avatar } from '@theme-ui/components'

<Avatar src="avatar.jpg" />

import { Badge } from '@theme-ui/components'

<Badge>New</Badge>

import { Alert } from '@theme-ui/components'

<Alert>Important message</Alert>

import { Message } from '@theme-ui/components'

<Message>Information message</Message>

import { Divider } from '@theme-ui/components'

<Divider />

import { Embed } from '@theme-ui/components'

<Embed src="https://www.youtube.com/embed/..." />

import { AspectRatio } from '@theme-ui/components'

<AspectRatio ratio={16/9}>
  Content
</AspectRatio>

import { AspectImage } from '@theme-ui/components'

<AspectImage ratio={4/3} src="photo.jpg" />

import { Progress } from '@theme-ui/components'

<Progress max={100} value={75} />

import { Donut } from '@theme-ui/components'

<Donut value={0.75} />

import { Spinner } from '@theme-ui/components'

<Spinner />

import {
  // Layout
  Box,
  Flex,
  Grid,
  Container,
  
  // Typography
  Text,
  Heading,
  Paragraph,
  Link,
  
  // Forms
  Button,
  Input,
  Textarea,
  Select,
  Label,
  Checkbox,
  Radio,
  Slider,
  Switch,
  Field,
  
  // Interactive
  IconButton,
  MenuButton,
  Close,
  NavLink,
  
  // Display
  Card,
  Image,
  Avatar,
  Badge,
  Alert,
  Message,
  Divider,
  
  // Media
  Embed,
  AspectRatio,
  AspectImage,
  
  // Feedback
  Progress,
  Donut,
  Spinner,
} from '@theme-ui/components'

<Box sx={{ 
  color: 'primary',
  padding: 3,
  fontSize: [1, 2, 3],
  bg: 'muted'
}} />

<Button variant="primary">Primary Button</Button>
<Button variant="secondary">Secondary Button</Button>

<Grid columns={[1, 2, 3]} gap={[2, 3, 4]}>
  {/* Content */}
</Grid>

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