UI Elements

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

<Button>Click me</Button>

{
  appearance: 'none',
  display: 'inline-block',
  textAlign: 'center',
  lineHeight: 'inherit',
  textDecoration: 'none',
  fontSize: 'inherit',
  px: 3,
  py: 2,
  color: 'white',
  bg: 'primary',
  border: 0,
  borderRadius: 4
}

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

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

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

<Link href="https://theme-ui.com">External Link</Link>
<Link href="/docs" sx={{ color: 'primary' }}>Docs</Link>

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

<NavLink href="/" className="active">Home</NavLink>

{
  color: 'inherit',
  textDecoration: 'none',
  fontWeight: 'bold',
  display: 'inline-block',
  '&:hover, &:focus, &.active': {
    color: 'primary'
  }
}

<Flex as="nav" sx={{ gap: 3 }}>
  <NavLink href="/">Home</NavLink>
  <NavLink href="/about">About</NavLink>
  <NavLink href="/contact">Contact</NavLink>
</Flex>

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

<Card>
  <Heading>Card Title</Heading>
  <Text>Card content</Text>
</Card>

<Card p={4} bg="muted">
  <Heading mb={2}>Feature Card</Heading>
  <Paragraph>Description of the feature</Paragraph>
  <Button mt={3}>Learn More</Button>
</Card>

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

<Badge>New</Badge>

{
  display: 'inline-block',
  verticalAlign: 'baseline',
  fontSize: 0,
  fontWeight: 'bold',
  whiteSpace: 'nowrap',
  px: 1,
  borderRadius: 2,
  color: 'white',
  bg: 'primary'
}

<Badge>New</Badge>
<Badge variant="secondary">Beta</Badge>
<Badge sx={{ bg: 'accent' }}>Hot</Badge>

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

<Alert>This is an alert message</Alert>

{
  display: 'flex',
  alignItems: 'center',
  px: 3,
  py: 2,
  fontWeight: 'bold',
  color: 'white',
  bg: 'primary',
  borderRadius: 4
}

<Alert variant="primary">Info message</Alert>
<Alert variant="success">Success message</Alert>
<Alert variant="error">Error message</Alert>

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

<Avatar src="/avatar.jpg" />

{
  borderRadius: 9999
}

<Avatar src="/user.jpg" size={64} />
<Avatar src="/profile.jpg" size={32} />

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

<Spinner />

{
  color: 'primary',
  overflow: 'visible'
}

<Spinner />
<Spinner size={64} />
<Spinner size={32} strokeWidth={2} />
<Spinner title="Loading content" duration={1000} />

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

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

{
  display: 'block',
  width: '100%',
  height: '4px',
  margin: 0,
  padding: 0,
  overflow: 'hidden',
  appearance: 'none',
  color: 'primary',
  bg: 'gray',
  borderRadius: 9999,
  border: 'none'
}

<Progress max={100} value={50} />
<Progress max={100} value={75} sx={{ color: 'success' }} />

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

<Donut value={0.75} />

{
  color: 'primary'
}

<Donut value={0.75} title="75% complete" />
<Donut value={60} min={0} max={100} size={96} />
<Donut value={0.5} sx={{ color: 'success' }} />

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

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

{
  appearance: 'none',
  display: 'inline-flex',
  alignItems: 'center',
  justifyContent: 'center',
  padding: 1,
  width: 32,
  height: 32,
  color: 'inherit',
  bg: 'transparent',
  border: 'none',
  borderRadius: 4
}

<IconButton aria-label="Settings">
  <SettingsIcon />
</IconButton>

<IconButton size={48} aria-label="Close">
  <CloseIcon />
</IconButton>

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

<Close />

<Close onClick={handleClose} />
<Close size={24} />

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

<Message>This is an informational message</Message>

{
  padding: 3,
  paddingLeft: (t) => t.space[3] - t.space[1],
  borderLeftWidth: (t) => t.space[1],
  borderLeftStyle: 'solid',
  borderLeftColor: 'primary',
  borderRadius: 4,
  bg: 'highlight'
}

<Message>Info message with left border</Message>
<Message variant="warning">Warning message</Message>

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

<Divider />

{
  color: 'gray',
  m: 0,
  my: 2,
  border: 0,
  borderBottom: '1px solid'
}

<Divider />
<Divider my={4} />
<Divider sx={{ borderColor: 'primary' }} />

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

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

{
  maxWidth: '100%',
  height: 'auto'
}

<Image src="/photo.jpg" alt="Photo" />
<Image src="/banner.jpg" sx={{ borderRadius: 4 }} />

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

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

<Embed src="https://www.youtube.com/embed/dQw4w9WgXcQ" />
<Embed src="https://player.vimeo.com/video/..." ratio={4/3} />

<Container py={4}>
  <Flex sx={{ justifyContent: 'space-between', alignItems: 'center', mb: 4 }}>
    <Heading>Dashboard</Heading>
    <Button>New Item</Button>
  </Flex>
  
  <Alert mb={3}>Welcome back! You have 3 new notifications.</Alert>
  
  <Grid columns={[1, 2, 3]} gap={4}>
    <Card p={4}>
      <Flex sx={{ alignItems: 'center', mb: 3 }}>
        <Avatar src="/user.jpg" size={48} />
        <Box ml={3}>
          <Heading as="h3">John Doe</Heading>
          <Badge>Admin</Badge>
        </Box>
      </Flex>
      <Divider />
      <Progress max={100} value={75} my={3} />
      <Text>Profile completion: 75%</Text>
    </Card>
    
    <Card p={4}>
      <Heading as="h3" mb={3}>Activity</Heading>
      <Donut value={0.65} size={96} />
    </Card>
    
    <Card p={4}>
      <Flex sx={{ justifyContent: 'space-between', mb: 3 }}>
        <Heading as="h3">Status</Heading>
        <IconButton aria-label="Refresh">
          <RefreshIcon />
        </IconButton>
      </Flex>
      <Spinner />
    </Card>
  </Grid>
</Container>