Collection of theme-ui and external components.
Theme UI
created:3/15/2021
updated:3/15/2021

Components

sort by:

Containers

@component-controls/components
3.4.5

Container box with actions.

created:7 minutes ago
updated:7 minutes ago
source lines:20
comments %:50
theme-ui
0.6.0-alpha.7

Component for maintaining a fluid-width aspect ratio

Aspect Ratio

created:7 minutes ago
updated:7 minutes ago
source lines:34
comments %:0

Collapsible block container with a title. The title creates also an attribute id and an octicon for github style navigation.

Block title

created:7 minutes ago
updated:7 minutes ago
source lines:77
comments %:32
theme-ui
0.6.0-alpha.7

Use the Box component as a layout primitive to add margin, padding, and colors to content.

some text
created:7 minutes ago
updated:7 minutes ago
source lines:29
comments %:14
theme-ui
0.6.0-alpha.7

Card style variants can be defined in the

theme.cards
object. By default the Card component uses the
theme.cards.primary
variant.

Card
created:7 minutes ago
updated:7 minutes ago
source lines:5
comments %:0

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

created:7 minutes ago
updated:7 minutes ago
source lines:17
comments %:41
theme-ui
0.6.0-alpha.7

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.

Container text
created:7 minutes ago
updated:7 minutes ago
source lines:17
comments %:0
theme-ui
0.6.0-alpha.7

Use the Flex component to create flexbox layouts.

Box 1
Box 2
Box 3
created:7 minutes ago
updated:7 minutes ago
source lines:6
comments %:0
theme-ui
0.6.0-alpha.7

CSS grid layout component to arrange direct child elements in a tiled grid layout.

Box
Box
Box
Box
created:7 minutes ago
updated:7 minutes ago
source lines:31
comments %:0

Container component that will fade/outline a label at the bottom

some text
donut component
created:7 minutes ago
updated:7 minutes ago
source lines:15
comments %:53

Action container with built-in collapsible panels

created:7 minutes ago
updated:7 minutes ago
source lines:128
comments %:14

Popover container that is triggered by a click/hover event, using react-popper-tooltip.

created:7 minutes ago
updated:7 minutes ago
source lines:85
comments %:7

Display

theme-ui
0.6.0-alpha.7

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.

some alert text
created:7 minutes ago
updated:7 minutes ago
source lines:22
comments %:0
theme-ui
0.6.0-alpha.7
created:7 minutes ago
updated:7 minutes ago
source lines:19
comments %:0
theme-ui
0.6.0-alpha.7
badge
created:7 minutes ago
updated:7 minutes ago
source lines:23
comments %:0
theme-ui
0.6.0-alpha.7

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.

created:7 minutes ago
updated:7 minutes ago
source lines:28
comments %:4
theme-ui
0.6.0-alpha.7

The Divider component reuses styles from

theme.styles.hr
as its default variant.


created:7 minutes ago
updated:7 minutes ago
source lines:19
comments %:0
theme-ui
0.6.0-alpha.7

Single value SVG donut chart

donut
created:7 minutes ago
updated:7 minutes ago
source lines:40
comments %:0

avatar to be used in an AvatarList container

created:7 minutes ago
updated:7 minutes ago
source lines:129
comments %:19

Avatar list that links to github profiles using rest api

created:7 minutes ago
updated:7 minutes ago
source lines:57
comments %:19

A page header component

header
created:7 minutes ago
updated:7 minutes ago
source lines:7
comments %:57

Displays an information icon with markdown-enabled popup on hover

created:7 minutes ago
updated:7 minutes ago
source lines:37
comments %:30
theme-ui
0.6.0-alpha.7

Styled Box component for callouts and inline messages

Message variants can be defined in the theme.messages object.

This is just a message for someone to read
created:7 minutes ago
updated:7 minutes ago
source lines:20
comments %:0

Progress indicator with a label

3
created:7 minutes ago
updated:7 minutes ago
source lines:23
comments %:22

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 }}
/>
);
};
created:7 minutes ago
updated:7 minutes ago
source lines:48
comments %:13
theme-ui
0.6.0-alpha.7
Loading...
created:7 minutes ago
updated:7 minutes ago
source lines:61
comments %:0

Syntax highlighter component using prism for the actual source display.

import { Button } from 'theme-ui';
created:7 minutes ago
updated:7 minutes ago
source lines:105
comments %:34

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 KeeblerDanielle_PollichJayde RapidsMontanaborough20635
London RunolfssonAudreanne.SanfordTowne CliffLangoshport65133
Sebastian GleasonJohnathan.Klocko58Haley DrivesSouth Kiannaberg58169
Gladys BaumbachDarien.GutmannAnastasia PointsWest Graycemouth33850
Ms. Jaunita LubowitzKody.McClureLindgren InletGrimesshire27558-3367
Jacques BernhardNichole_Kozey4Ramona StationGunnerland64856
Dr. Rylee DuBuqueLewis.Vandervort7Kelly LandingLake Gabe98806
Nettie RunteJohnny.Marquardt30Larson SquareHannaton81636
Isabell Feil Jr.Rafaela.Gusikowski4Kaya MountainKemmerbury01459
Jillian HoegerAnnamae.Maggio23Darlene CourseEarlenebury70931
Melyssa HermanVerona_WizaZulauf CircleCorkeryland52057-0050
Urban TowneKayleigh_HauckBechtelar ExtensionsRuthshire49065
Hazle HansenHassie_Tillman73Reichel StreetWest Audreymouth53056-1765
Jamarcus StromanOrval13Hobart ParkWest Rahul60010
Ms. Melany SengerHenderson.KihnLia VillageDuBuqueview93383
Granville MannChristine.Bahringer10Hilpert LandingNorth Autumnside87215-3190
Delia FeeneyGreyson13Purdy FordsZoilaside96503
Mr. Johanna TurcotteDameon76Mante JunctionsNorth Roxane17884-9473
Renee ErdmanBen.HammesTreutel InletPort Maiabury21650
Graham BrownEloise.Schumm35Alia PortPort Brandt80217-7245
created:7 minutes ago
updated:7 minutes ago
source lines:278
comments %:21

A container component to display text in a colored box, with a semi-transparent background.

some text
created:7 minutes ago
updated:7 minutes ago
source lines:46
comments %:43

Displays a value with a small label

date created01/01/2020
created:7 minutes ago
updated:7 minutes ago
source lines:18
comments %:56

zoom effect using transform

created:7 minutes ago
updated:7 minutes ago
source lines:23
comments %:26

Input

theme-ui
0.6.0-alpha.7

Primitive button component with variants

created:7 minutes ago
updated:7 minutes ago
source lines:27
comments %:0
theme-ui
0.6.0-alpha.7

Form checkbox input component

Checkbox variants can be defined in

theme.forms
and the component uses the
theme.forms.checkbox
variant by default.

created:7 minutes ago
updated:7 minutes ago
source lines:80
comments %:0
theme-ui
0.6.0-alpha.7
created:7 minutes ago
updated:7 minutes ago
source lines:22
comments %:0
theme-ui
0.6.0-alpha.7

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
.

created:7 minutes ago
updated:7 minutes ago
source lines:30
comments %:0
theme-ui
0.6.0-alpha.7

Input variants can be defined in

theme.forms
and the component uses the
theme.forms.input
variant by default.

created:7 minutes ago
updated:7 minutes ago
source lines:25
comments %:0
theme-ui
0.6.0-alpha.7

Label variants can be defined in

theme.forms
and the component uses the
theme.forms.label
variant by default.

created:7 minutes ago
updated:7 minutes ago
source lines:17
comments %:0
theme-ui
0.6.0-alpha.7

MenuButton variants can be defined in the

theme.buttons
object. By default the MenuButton component will use styles defined in
theme.buttons.menu
.

created:7 minutes ago
updated:7 minutes ago
source lines:30
comments %:3

Popover multiselect displaying checkboxes to select/unselect.

created:7 minutes ago
updated:7 minutes ago
source lines:40
comments %:25
theme-ui
0.6.0-alpha.7
created:7 minutes ago
updated:7 minutes ago
source lines:34
comments %:0
theme-ui
0.6.0-alpha.7

Form radio input component

Radio variants can be defined in

theme.forms
and the component uses the
theme.forms.radio variant
by default.

created:7 minutes ago
updated:7 minutes ago
source lines:78
comments %:1

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

created:7 minutes ago
updated:7 minutes ago
source lines:182
comments %:23
theme-ui
0.6.0-alpha.7

Select variants can be defined in

theme.forms
and the component uses the
theme.forms.select
variant by default.

created:7 minutes ago
updated:7 minutes ago
source lines:50
comments %:0
theme-ui
0.6.0-alpha.7

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.

created:7 minutes ago
updated:7 minutes ago
source lines:41
comments %:0
theme-ui
0.6.0-alpha.7

Form switch component

Switch variants can be defined in

theme.forms
and the component uses the
theme.forms.switch
variant by default.

created:7 minutes ago
updated:7 minutes ago
source lines:71
comments %:0
theme-ui
0.6.0-alpha.7

Primitive typographic component.

Text style variants can be defined in the theme.text object.

Hello
created:7 minutes ago
updated:7 minutes ago
source lines:7
comments %:0
theme-ui
0.6.0-alpha.7

Form textarea component

Textarea variants can be defined in

theme.forms
and the component uses the
theme.forms.textarea
variant by default.

created:7 minutes ago
updated:7 minutes ago
source lines:25
comments %:0

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

created:7 minutes ago
updated:7 minutes ago
source lines:36
comments %:33

Media

theme-ui
0.6.0-alpha.7

Image component constrained by as aspect ratio.

created:7 minutes ago
updated:7 minutes ago
source lines:19
comments %:0
theme-ui
0.6.0-alpha.7

Responsive iframe for video embeds.

Embed variants can be defined anywhere in the theme object.

created:7 minutes ago
updated:7 minutes ago
source lines:55
comments %:5
theme-ui
0.6.0-alpha.7

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

created:7 minutes ago
updated:7 minutes ago
source lines:17
comments %:0

Image component with a title if available

alt textsome image title
created:7 minutes ago
updated:7 minutes ago
source lines:20
comments %:15

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.

created:7 minutes ago
updated:7 minutes ago
source lines:62
comments %:21

Anchor link to an external url, adds the default

target="_blank" rel="noopener noreferrer"
props.

created:7 minutes ago
updated:7 minutes ago
source lines:6
comments %:67
theme-ui
0.6.0-alpha.7

Link variants can be defined in the

theme.links
object. By default the Link component will use styles defined in
theme.styles.a
.

created:7 minutes ago
updated:7 minutes ago
source lines:7
comments %:0

Configurable anchor link with a LinkContext. Also checks if the link is intrenal to the site/app or external.

created:7 minutes ago
updated:7 minutes ago
source lines:14
comments %:21

h1-h6 heading component that generates automatically a github-style anchor to navigate to a section on hover.

LinkHeading text

created:7 minutes ago
updated:7 minutes ago
source lines:56
comments %:7
theme-ui
0.6.0-alpha.7

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
.

created:7 minutes ago
updated:7 minutes ago
source lines:20
comments %:0

Pagination component to navigate previous/next page

created:7 minutes ago
updated:7 minutes ago
source lines:42
comments %:24

Collapsible side bar component

  • item 1
  • item 2
  • item 3
created:7 minutes ago
updated:7 minutes ago
source lines:43
comments %:30

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

panel 1
created:7 minutes ago
updated:7 minutes ago
source lines:35
comments %:37

Hierarchical collapsible tree structure

created:7 minutes ago
updated:7 minutes ago
source lines:185
comments %:2

Typography

Markdown content with custom components - for example

<p />
is with smaller margin than regular markdown content.

Some description markdown

created:7 minutes ago
updated:7 minutes ago
source lines:15
comments %:33
theme-ui
0.6.0-alpha.7

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

created:7 minutes ago
updated:7 minutes ago
source lines:18
comments %:0

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

Header H1

Header H2

Header H3

Header H4

Header H5

some text

@theme-ui

created:7 minutes ago
updated:7 minutes ago
source lines:18
comments %:67

h2
level heading with faded text and font-weight 400.

Subtitle text

created:7 minutes ago
updated:7 minutes ago
source lines:15
comments %:60

Utilities

Theme-ui dark/light mode toggle.

created:7 minutes ago
updated:7 minutes ago
source lines:40
comments %:10

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

some text.

click to copy

created:7 minutes ago
updated:7 minutes ago
source lines:58
comments %:16