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>
Beep

Flex

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

Grid

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

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

Hello www.example.com

Hello

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>
Hello

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>
50%
50%
50%
50%

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'/>
Loading...Loading...Loading...Loading...

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>
Beep boop, this is an badge!
Beep boop, this is an badge!
Beep boop, this is an badge!
Beep boop, this is an 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>
Beep boop, this is an alert!
Beep boop, this is an alert!
Beep boop, this is an alert!
Beep boop, this is an 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>
Centered 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>
This is just a message for someone to read
This is just a message for someone to read
This is just a message for someone to read
This is just a message for someone to read

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