A next-generation tool to create blazing-fast documentation sites
API
created:3/5/2021
updated:3/5/2021

index

Overview

@component-controls/components is an ecclectic collection of theme-ui-based components that are used throughout component-controls.
Third-party libraries used:

Installation

$ npm install @component-controls/components --save

Cross-usage

You can view a table with the cross-usage of the included components

Components

sort by:

Containers

ActionContainer
avatar of atanasster
@component-controls/components
3.13.1
commits:
11
created:1 year ago
updated:2 months ago
loc
20
comments
50%
passed
6
coverage
83%

Container box with actions.

created:1 year ago
updated:2 weeks ago
loc
75
comments
33%
passed
16
coverage
50%

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

Block title

created:1 year ago
updated:2 months ago
loc
17
comments
41%
passed
10
coverage
50%
Animated expand/collapse container component, using react-animate-height.
created:8 months ago
updated:2 months ago
loc
15
comments
53%
passed
2
coverage
100%

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

some text
donut component
created:1 year ago
updated:2 months ago
loc
128
comments
14%
passed
6
coverage
38%

Action container with built-in collapsible panels

created:1 year ago
updated:2 months ago
loc
85
comments
7%
passed
10
coverage
17%
Popover container that is triggered by a click/hover event, using react-popper-tooltip.

Display

created:2 weeks ago
updated:1 week ago
loc
49
comments
43%
passed
10
coverage
44%
some text
created:2 months ago
updated:2 weeks ago
loc
136
comments
18%
passed
10
coverage
50%

avatar to be used in an AvatarList container

avatar of Atanas Stoyanov
created:2 months ago
updated:2 months ago
loc
57
comments
19%
passed
4
coverage
80%

Avatar list that links to github profiles using rest api

avatar of martin-stoyanov
avatar of atanasster
created:11 months ago
updated:11 months ago
loc
7
comments
57%
passed
2
coverage
100%

A page header component

header
created:2 months ago
updated:2 weeks ago
loc
43
comments
26%
passed
10
coverage
43%

Displays an information icon with markdown-enabled popup on hover

created:5 months ago
updated:2 months ago
loc
23
comments
22%
passed
10
coverage
100%

Progress indicator with a label

3
created:2 weeks ago
updated:2 weeks ago
loc
71
comments
24%
passed
26
coverage
81%

A container component to display label/value pairs, where the value is colord. Similar design to github shields.

some text
1.0.0
created:1 year ago
updated:5 months ago
loc
48
comments
13%
passed
14
coverage
33%
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:1 year ago
updated:2 months ago
loc
105
comments
34%
passed
12
coverage
55%
Syntax highlighter component using prism for the actual source display.
import { Button } from 'theme-ui';
created:1 year ago
updated:1 week ago
loc
281
comments
20%
passed
24
coverage
64%
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
created:1 year ago
updated:3 weeks ago
loc
46
comments
43%
passed
12
coverage
71%

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

some text
created:10 months ago
updated:2 weeks ago
loc
20
comments
15%
passed
10
coverage
75%

Image component with a title if available

alt textsome image title
Value
avatar of martin-stoyanov
avatar of atanasster
created:10 months ago
updated:2 months ago
loc
18
comments
56%
passed
10
coverage
75%

Displays a value with a small label

date created01/01/2020
created:1 year ago
updated:2 months ago
loc
23
comments
26%
passed
2
coverage
33%

zoom effect using transform

Input

created:8 months ago
updated:2 months ago
loc
40
comments
25%
passed
2
coverage
25%

Popover multiselect displaying checkboxes to select/unselect.

created:10 months ago
updated:2 weeks ago
loc
183
comments
23%
passed
8
coverage
9%

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

created:1 year ago
updated:2 weeks ago
loc
37
comments
32%
passed
10
coverage
60%
Toggle components can be used to edit boolean values. Uses react-switch component.

Navigation

created:1 year ago
updated:2 months ago
loc
62
comments
21%
passed
20
coverage
88%

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:1 year ago
updated:2 months ago
loc
6
comments
67%
passed
10
coverage
100%
Anchor link to an external url, adds the default
target="_blank" rel="noopener noreferrer"
props.
created:11 months ago
updated:2 months ago
loc
14
comments
21%
passed
2
coverage
50%

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

created:10 months ago
updated:1 week ago
loc
70
comments
6%
passed
10
coverage
25%

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

LinkHeading text

created:11 months ago
updated:2 months ago
loc
42
comments
24%
passed
6
coverage
100%

Pagination component to navigate previous/next page

created:11 months ago
updated:5 months ago
loc
43
comments
30%
passed
16
coverage
50%

Collapsible side bar component

  • item 1
  • item 2
  • item 3
created:1 year ago
updated:2 months ago
loc
35
comments
37%
passed
8
coverage
100%
Tabs component with react-tabs and theme-ui styling.
panel 1
created:5 months ago
updated:2 weeks ago
loc
187
comments
2%
passed
12
coverage
56%

Hierarchical collapsible tree structure

Typography

created:7 months ago
updated:7 months ago
loc
15
comments
33%
passed
2
coverage
67%
Markdown content with custom components - for example
<p />
is with smaller margin than regular markdown content.

Some description markdown

created:1 year ago
updated:2 months ago
loc
18
comments
67%
passed
4
coverage
100%
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:1 year ago
updated:11 months ago
loc
15
comments
60%
passed
10
coverage
100%
h2
level heading with faded text and font-weight 400.

Subtitle text

Utilities

created:11 months ago
updated:2 months ago
loc
40
comments
10%
passed
2
coverage
0%

Theme-ui dark/light mode toggle.

created:7 months ago
updated:2 weeks ago
loc
57
comments
16%
passed
2
coverage
0%

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

some text.

click to copy