components.mdx

import { Message, NavLink, Divider, Container, Box, Button, Card, Text, Image, Slider, Label, Flex, Checkbox, Select, Textarea, Radio, Input, Link, Progress, Badge, Alert, useThemeUI } from "theme-ui"

export const Radii = () => { const { theme } = useThemeUI(); if (typeof theme.radii === 'object') { return ( <React.Fragment>

Borders

<Flex sx={{ flexWrap: "wrap" }}> {Object.keys(theme.radii).map(key => ( <Box key={border_${key}} p={3} m={2} color="text" bg="muted" sx={{ border: "2px solid black", borderRadius: {key}, minWidth: "100px" }}> {key} ))}
</React.Fragment>
); } return null; }

Example components

export const Buttons = () => { const { theme } = useThemeUI(); if (typeof theme.buttons === 'object') { return ( <React.Fragment>

Buttons

<Flex sx={{ flexWrap: "wrap" }}> {Object.keys(theme.buttons).map(key => ( <Button key={button_${key}} variant={key} m={10}> {key} ))}
</React.Fragment>
); } return null; }

---

Form elements

<Box as='form' pb={3} onSubmit={e => e.preventDefault()} sx={{width: '100%', maxWidth: "500px"}}> Username Password Remember me Sound Beep Boop Blip Comment

<Textarea name='comment' rows='6' mb={3} /> Alpha Bravo Charlie Submit --- ## Links Hello export const Badges = () => { const { theme } = useThemeUI(); if (typeof theme.badges === 'object') { return (

Badges

{Object.keys(theme.badges).map(key => ( {key} ))} ); } return null; } export const Alerts = () => { const { theme } = useThemeUI(); if (typeof theme.alerts === 'object') { return (

Alerts

{Object.keys(theme.alerts).map(key => ( {key} ))} ); } return null; } --- ## Navigation Home Blog About --- ## Table

The table header
The table body	with two columns

--- ## Card Cupcake ipsum dolor sit amet chocolate bar. Apple pie macaroon muffin jelly candy cake soufflé muffin croissant. Gummies jelly beans cotton candy fruitcake. Wafer lemon drops soufflé cookie. Sesame snaps fruitcake cheesecake danish toffee marzipan biscuit. ---