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" />