theme-ui/components

gatsby-theme-terminal also supports the full set of theme-ui/components and below is how you use them.

If you'd like to see the default theme .js that file can be found in here

Box

<Box p={4} color="white" bg="primary">
  Beep
</Box>

Flex

<Flex>
  <Box p={2} bg='primary' sx={{ flex: '1 1 auto' }}>
    Flex
  </Box>
  <Box p={2} bg='muted'>
    Box
  </Box>
</Flex>

Grid

<Grid
  gap={2}
  columns={[2, '1fr 2fr']}>
  <Box bg='primary'>Box</Box>
  <Box bg='muted'>Box</Box>
</Grid>

Buttons

<Button>primary</Button>
<Button variant='secondary'>secondary</Button>
<Button variant='success'>success</Button>
<Button variant='error'>error</Button>
<Button variant='ghost' />

Text

<Text>Hello</Text>
<Text as="p" >Hello</Text>
<Text as="p">Hello <Link href='www.example.com'>www.example.com</Link></Text>
<Text variant='styles.small'>Hello</Text>

Hello

Hello www.example.com

Heading

<Heading as='h1' variant='styles.h1'>h1</Heading>
<Heading as='h2 'variant='styles.h2'>h2</Heading>
<Heading as='h3 'variant='styles.h3'>h3</Heading>
<Heading as='h4 'variant='styles.h4'>h4</Heading>
<Heading as='h5 'variant='styles.h5'>h5</Heading>
<Heading as='h6 'variant='styles.h6'>h6</Heading>

h1

h2

h3

h4

h5

h6

Link

<Link href='#!'>Hello</Link>

Image

<Image
  src='https://placekitten.com/g/400/400'
/>

Card

<Card
  sx={{
    maxWidth: 400,
  }}>
  <Image src='https://placekitten.com/g/800/600' />
  <Box p={3}>
  <Heading variant='styles.h4'>Heading</Heading>
  <Text>Text</Text>
  </Box>
</Card>

Heading

Text

Forms

<Box
  as='form'
>
<Label htmlFor='input'>Input</Label>
<Input
  name='username'
  mb={3}
/>
<Label mb={3}>
  <Checkbox />
  Checkbox
</Label>
<Label mb={3}>
  <Radio name='radio' /> Radio A
</Label>
<Label mb={3}>
  <Radio name='radio' /> Radio B
</Label>
<Label htmlFor='select'>Select</Label>
<Select name='select' mb={3}>
  <option>Beep</option>
  <option>Boop</option>
  <option>Blip</option>
</Select>
<Label htmlFor='textarea'>Text Area</Label>
<Textarea
  name='textarea'
  rows='6'
  mb={3}
/>
</Box>

Label

<Label htmlFor='input'>Label</Label>

Input

<Input name='username'/>

Select

<Select
  defaultValue='Hello'>
  <option>Hello</option>
  <option>Hi</option>
  <option>Beep</option>
  <option>Boop</option>
</Select>

Textarea

<Textarea
  defaultValue='Hello'
  rows={8}
/>

Radio

<Label mb={1}>
  <Radio
    name='dark-mode'
    value='true'
    defaultChecked={true}
  />
  Dark Mode
</Label>
<Label mb={1}>
  <Radio
    name='dark-mode'
    value='false'
  />
  Light Mode
</Label>

Checkbox

<Label>
  <Checkbox />
  Checkbox
</Label>

Slider

<Slider defaultValue={25} />

Field

<Field label='Email' name='email' defaultValue='' />

Progress

<Progress max={1} value={1/2}> 50% </Progress>
<Progress max={1} value={1/2} variant='styles.progress.secondary'> 50% </Progress>
<Progress max={1} value={1/2} variant='styles.progress.success'> 50% </Progress>
<Progress max={1} value={1/2} variant='styles.progress.error'> 50% </Progress>

Donut

<Donut value={1/2}/>
<Donut value={1/2} variant='styles.donut.secondary'/>
<Donut value={1/2} variant='styles.donut.success'/>
<Donut value={1/2} variant='styles.donut.error'/>

Spinner

<Spinner />
<Spinner variant='styles.spinner.secondary'/>
<Spinner variant='styles.spinner.success'/>
<Spinner variant='styles.spinner.error'/>

Avatar

<Avatar
  src='https://placekitten.com/g/50/50'
/>

Badge

Badges need a variant, the default can't be styled at the moment

<Badge variant='primary'>
  Beep boop, this is an badge!
</Badge>
<Badge variant='secondary'>
  Beep boop, this is an badge!
</Badge>
<Badge variant='success'>
  Beep boop, this is an badge!
</Badge>
<Badge variant='error'>
  Beep boop, this is an badge!
</Badge>

Alert

<Alert variant='primary' mb={2}>
  Beep boop, this is an alert!
</Alert>
<Alert variant='secondary' mb={2}>
  Beep boop, this is an alert!
</Alert>
<Alert variant='success' mb={2}>
  Beep boop, this is an alert!
</Alert>
<Alert variant='error'>
  Beep boop, this is an alert!
</Alert>

Divider

<Divider />

Embed

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

AspectRatio

<AspectRatio ratio={16/9}>
  <Image
    src='https://placekitten.com/g/1200/1200'
    sx={{
      objectFit: 'cover',
    }}
  />
</AspectRatio>

AspectImage

<AspectImage
  ratio={4/3}
  src='https://placekitten.com/g/1200/1200'
/>

Container

<Container
  p={4}
  bg='surface'>
  Centered container
</Container>

NavLink

<Flex as='nav'>
  <NavLink href='#!' p={2}>
    Home
  </NavLink>
  <NavLink href='#!' p={2}>
    Blog
  </NavLink>
  <NavLink href='#!' p={2}>
    About
  </NavLink>
</Flex>

Message

<Message variant='primary' mb={2}>
  This is just a message for someone to read
</Message>
<Message variant='secondary' mb={2}>
  This is just a message for someone to read
</Message>
<Message variant='success' mb={2}>
  This is just a message for someone to read
</Message>
<Message variant='error' mb={2}>
  This is just a message for someone to read
</Message>

Close

<Close />

IconButton

<IconButton
  aria-label='Toggle dark mode'>
  <svg
    xmlns='http://www.w3.org/2000/svg'
    viewBox='0 0 24 24'
    width='24'
    height='24'
    fill='currentcolor'>
    <circle
      r={11}
      cx={12}
      cy={12}
      fill='none'
      stroke='currentcolor'
      strokeWidth={2}
    />
  </svg>
</IconButton>

MenuButton

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