index
@component-controls/components is an ecclectic collection of theme-ui-based components that are used throughout component-controls.- prism for source code syntax highlighting, rendered with prism-react-renderer.
- markdown-to-jsx to transform markdown to JSX at runtime.
- react-table to display tabular data.
- octicons for icons used in the components.
- react-tabs for tabs and multi-page components.
- react-popper-tooltip for popups and tooltips.
- react-animate-height for collapsible components.
- @theme-ui/presets for custom theming.
- react-switch for toggle/boolean inputs.
$ npm install @component-controls/components --save
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.
Container component that will fade/outline a label at the bottom
Action container with built-in collapsible panels
Display
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
A container component to display label/value pairs, where the value is colord. Similar design to github shields.
export const sample = () => {const [state, setState] = React.useState(false);return (<BooleanEditorname="prop"onChange={(name, newVal) => setState(newVal)}prop={{ type: ControlTypes.BOOLEAN, value: state }}/>);};
import { Button } from 'theme-ui';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 |
A container component to display text in a colored box, with a semi-transparent background.
Image component with a title if available
some image title
Displays a value with a small label
zoom effect using transform
Input
Popover multiselect displaying checkboxes to select/unselect.
an input component combined with a popover, can be used for incremental search.
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.
target="_blank" rel="noopener noreferrer" props.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
- panel 1
- panel 2
Hierarchical collapsible tree structure
Typography
<p /> is with smaller margin than regular markdown content.Some description markdown
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