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
<Gridgap={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
Hello<Link href='#!'>Hello</Link>
Image
<Imagesrc='https://placekitten.com/g/400/400'/>
Card
<Cardsx={{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
<Boxas='form'><Label htmlFor='input'>Input</Label><Inputname='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><Textareaname='textarea'rows='6'mb={3}/></Box>
Label
<Label htmlFor='input'>Label</Label>
Input
<Input name='username'/>
Select
<SelectdefaultValue='Hello'><option>Hello</option><option>Hi</option><option>Beep</option><option>Boop</option></Select>
Textarea
<TextareadefaultValue='Hello'rows={8}/>
Radio
<Label mb={1}><Radioname='dark-mode'value='true'defaultChecked={true}/>Dark Mode</Label><Label mb={1}><Radioname='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
<Avatarsrc='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
<Embedsrc="https://www.youtube.com/embed/GNCd_ERZvZM"/>
AspectRatio
<AspectRatio ratio={16/9}><Imagesrc='https://placekitten.com/g/1200/1200'sx={{objectFit: 'cover',}}/></AspectRatio>
AspectImage
<AspectImageratio={4/3}src='https://placekitten.com/g/1200/1200'/>
Container
<Containerp={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
<IconButtonaria-label='Toggle dark mode'><svgxmlns='http://www.w3.org/2000/svg'viewBox='0 0 24 24'width='24'height='24'fill='currentcolor'><circler={11}cx={12}cy={12}fill='none'stroke='currentcolor'strokeWidth={2}/></svg></IconButton>
MenuButton
<MenuButtonaria-label='Toggle Menu'/>