Container box with actions.

Component for maintaining a fluid-width aspect ratio

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

theme.cards.primary

Card

Animated expand/collapse container component, using react-animate-height.

Use the Flex component to create flexbox layouts.

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.

The Divider component reuses styles from

theme.styles.hr

Single value SVG donut chart

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

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 (
    <BooleanEditor
      name="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.

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

Primitive button component with variants

Input variants can be defined in

theme.forms

theme.forms.input

Label variants can be defined in

theme.forms

theme.forms.label

MenuButton variants can be defined in the

theme.buttons

theme.buttons.menu

Popover multiselect displaying checkboxes to select/unselect.

an input component combined with a popover, can be used for incremental search.

Select variants can be defined in

theme.forms

theme.forms.select

Toggle components can be used to edit boolean values. Uses react-switch component.

Image component constrained by as aspect ratio.

Image style variants can be defined in the theme.images object.

Image component with a title if available

some image title

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"

Link variants can be defined in the

theme.links

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.

Pagination component to navigate previous/next page

Collapsible side bar component

Tabs component with react-tabs and theme-ui styling.

Hierarchical collapsible tree structure

Markdown content with custom components - for example

<p />

Markdown display component to compile and display markdown at run-time. Uses markdown-to-jsx internally.

@theme-ui

h2

Theme-ui dark/light mode toggle.

Container component to enclose items that will provide copy functionality on click.