Containers
Container box with actions.
Collapsible block container with a title. The title creates also an attribute id and an octicon for github style navigation.
Use the Box component as a layout primitive to add margin, padding, and colors to content.
Card style variants can be defined in the
theme.cards
object.
By default the Card component uses the theme.cards.primary
variant.Animated expand/collapse container component, using react-animate-height.
Centered, max-width layout component
Container variants can be defined in the
theme.layout
object.
The Container component uses theme.layout.container
as its default variant style.CSS grid layout component to arrange direct child elements in a tiled grid layout.
Container component that will fade/outline a label at the bottom
Action container with built-in collapsible panels
Popover container that is triggered by a click/hover event, using react-popper-tooltip.
Display
Component for displaying messages, notifications, or other application state.
Alert variants can be defined in
theme.alerts
.
The Alert component uses theme.alerts.primary
as its default variant.Button with close (×) icon.
The Close component renders as a element by default. Pass any button attributes as props to the component.
Close component variants can be defined in the theme.buttons object. The Close component uses theme.buttons.close as its default variant style.
The Divider component reuses styles from
theme.styles.hr
as its default variant.avatar to be used in an AvatarList container
Avatar list that links to github profiles using rest api
A page header component
Displays an information icon with markdown-enabled popup on hover
Styled Box component for callouts and inline messages
Message variants can be defined in the theme.messages object.
Progress indicator with a label
Syntax highliting source code component. Uses prism for the actual source display.
export const sample = () => {const [state, setState] = React.useState(false);return (<BooleanEditorname="prop"onChange={(name, newVal) => setState(newVal)}prop={{ type: ControlTypes.BOOLEAN, value: state }}/>);};
Syntax highlighter component using prism for the actual source display.
import { Button } from 'theme-ui';
Table component using react-table to display the data. Can be grouped, filtered, sorted. Themed with theme-ui for consistency.
Name | User Name | Street | City | Zip Code |
---|---|---|---|---|
Edison Keebler | Danielle_Pollich | Jayde Rapids | Montanaborough | 20635 |
London Runolfsson | Audreanne.Sanford | Towne Cliff | Langoshport | 65133 |
Sebastian Gleason | Johnathan.Klocko58 | Haley Drives | South Kiannaberg | 58169 |
Gladys Baumbach | Darien.Gutmann | Anastasia Points | West Graycemouth | 33850 |
Ms. Jaunita Lubowitz | Kody.McClure | Lindgren Inlet | Grimesshire | 27558-3367 |
Jacques Bernhard | Nichole_Kozey4 | Ramona Station | Gunnerland | 64856 |
Dr. Rylee DuBuque | Lewis.Vandervort7 | Kelly Landing | Lake Gabe | 98806 |
Nettie Runte | Johnny.Marquardt30 | Larson Square | Hannaton | 81636 |
Isabell Feil Jr. | Rafaela.Gusikowski4 | Kaya Mountain | Kemmerbury | 01459 |
Jillian Hoeger | Annamae.Maggio23 | Darlene Course | Earlenebury | 70931 |
Melyssa Herman | Verona_Wiza | Zulauf Circle | Corkeryland | 52057-0050 |
Urban Towne | Kayleigh_Hauck | Bechtelar Extensions | Ruthshire | 49065 |
Hazle Hansen | Hassie_Tillman73 | Reichel Street | West Audreymouth | 53056-1765 |
Jamarcus Stroman | Orval13 | Hobart Park | West Rahul | 60010 |
Ms. Melany Senger | Henderson.Kihn | Lia Village | DuBuqueview | 93383 |
Granville Mann | Christine.Bahringer10 | Hilpert Landing | North Autumnside | 87215-3190 |
Delia Feeney | Greyson13 | Purdy Fords | Zoilaside | 96503 |
Mr. Johanna Turcotte | Dameon76 | Mante Junctions | North Roxane | 17884-9473 |
Renee Erdman | Ben.Hammes | Treutel Inlet | Port Maiabury | 21650 |
Graham Brown | Eloise.Schumm35 | Alia Port | Port Brandt | 80217-7245 |
A container component to display text in a colored box, with a semi-transparent background.
Displays a value with a small label
zoom effect using transform
Input
Form checkbox input component
Checkbox variants can be defined in
theme.forms
and the
component uses the theme.forms.checkbox
variant by default.Transparent button for SVG icons
IconButton variants can be defined in the
theme.buttons
object.
By default the IconButton component will use styles defined in theme.buttons.icon
.Input variants can be defined in
theme.forms
and the component uses the theme.forms.input
variant by default.Label variants can be defined in
theme.forms
and the component uses the theme.forms.label
variant by default.MenuButton variants can be defined in the
theme.buttons
object.
By default the MenuButton component will use styles defined in theme.buttons.menu
.Popover multiselect displaying checkboxes to select/unselect.
Form radio input component
Radio variants can be defined in
theme.forms
and the
component uses the theme.forms.radio variant
by default.an input component combined with a popover, can be used for incremental search.
Select variants can be defined in
theme.forms
and the component uses the theme.forms.select
variant by default.Range input element
Slider variants can be defined in the
theme.forms
object.
The Slider component uses theme.forms.slider
as its default variant style.Form switch component
Switch variants can be defined in
theme.forms
and the component uses the theme.forms.switch
variant by default.Primitive typographic component.
Text style variants can be defined in the theme.text object.
Form textarea component
Textarea variants can be defined in
theme.forms
and the component uses the theme.forms.textarea
variant by default.Toggle components can be used to edit boolean values. Uses react-switch component.
Media
Responsive iframe for video embeds.
Embed variants can be defined anywhere in the theme object.
Image component with a title if available
Navigation
A strip of actions to be attached to a container. The action items contain the labels and click event handlers. Actions can accept an order prop, and can also overwrite default actions.
Anchor link to an external url, adds the default
target="_blank" rel="noopener noreferrer"
props.Link variants can be defined in the
theme.links
object.
By default the Link component will use styles defined in theme.styles.a
.Configurable anchor link with a LinkContext. Also checks if the link is intrenal to the site/app or external.
h1-h6 heading component that generates automatically a github-style anchor to navigate to a section on hover.
Link component for use in navigation
NavLink variants can be defined in the
theme.links
object.
By default the NavLink component will use styles defined in theme.links.nav
.Pagination component to navigate previous/next page
Collapsible side bar component
Tabs component with react-tabs and theme-ui styling.
- panel 1
- panel 2
Hierarchical collapsible tree structure
Typography
Markdown content with custom components - for example
<p />
is with smaller margin than regular markdown content.Some description markdown
Primitive heading component, defaults to
Text style variants can be defined in the theme.text object. The Heading component uses theme.text.heading as its default variant style.
heading text
Markdown display component to compile and display markdown at run-time. Uses markdown-to-jsx internally.
h2
level heading with faded text and font-weight 400.Subtitle text
Utilities
Theme-ui dark/light mode toggle.
Container component to enclose items that will provide copy functionality on click.
some text.
click to copy