A set of beautiful React components for developing chayns® applications.





GitHub Stars



Last Commit

6d ago








Type Definitions




Please use the new package chayns-components instead. See for a migration guide.



A set of beautiful React components for developing chayns® applications.


First you should install the chayns-components package into your project:

# Yarn
yarn add chayns-components

npm install chayns-components

The styles to our components are provided via the chayns-css library and some of the components also rely on the chayns-js API, so you should include these in your HTML:

<!-- CSS styles -->

<!-- JS api -->
<script src=""></script>

Components Overview

The following components are part of this package:

Accordion ›Accordions are collapsible sections that are toggled by interacting with a permanently visible header.
AmountControl ›The AmountControl is a three-segment control used to increase or decrease an incremental value.
AnimationWrapper ›The AnimationWrapper provides an eye-catching initial animation to its children.
Badge ›Badges are small, circular containers used to decorate other components with glancable information.
Bubble ›A floating bubble that is primarily used to power the ContextMenu and Tooltip components.
Button ›Buttons initiate actions, can include a title or an icon and come with a set of predefined styles.
Calendar ›An interactive grid calendar that can highlight specified dates.
Checkbox ›Checkboxes allow users to complete tasks that involve making choices such as selecting options. Can be styled as a switch, a visual toggle between two mutually exclusive states — on and off.
ColorPicker ›Lets a user choose a color for text, shapes, marking tools, and other elements.
ColorScheme ›Adjusts the color scheme for all child components.
ComboBox ›A button with a dropdown that contains a scrollable list of distinct values from which people can choose.
ContextMenu ›Gives people access to additional functionality related to onscreen items without cluttering the interface.
DateInfo ›Formats a date or date range to be easily readable and reveals the absolute date on hover.
EmojiInput ›A text input that allows emojis to be put in.
ExpandableContent ›A collapsible section that reveals its children with a height transition.
FileInput ›Accepts specified file types via dialog or drag and drop.
FilterButton ›A chip-like component that is used to filter lists. Usually used in a group of 2 or more.
FormattedInput ›A text input that automatically formats its input with a formatter. Since this component is based on the Input-component, it takes any of the Input-components props, which are not listed here. This component only works as an uncontrolled component, meaning that it does not take a value-prop.
Gallery ›An image gallery that displays up to four images by default. Also supports reordering and deletion of images and blurred image previews for images loaded from
Icon ›Displays a FontAwesome icon.
ImageAccordion ›An accordion that has a big image and appears in a grid. Should be used inside of an ImageAccordionGroup.
ImageAccordionGroup ›Groups several ImageAccordion components together, so only one of them can be open at a time.
Input ›A text input that can be validated and decorated with different designs.
List ›The wrapper for the ListItem-component to create lists.
ListItem ›The items in a list to display related data in a structured format. Should be used inside of a List component.
OpeningTimes ›An input for opening times.
PersonFinder ›An autocomplete search for persons that can be customized to work with arbitrary data.
PositionInput ›A location input with a map and text input. This requires the Google Maps JavaScript API with the places library enabled. You can find more information about the Maps API here.
ProgressBar ›An animated progress bar that can show an actions progress or an indeterminate state like a loading spinner.
RadioButton ›A radio button that allows to select one of multiple options.
RfidInput ›A component to take in an RFID signal.
ScrollView ›A scrollable container with a custom scrollbar that looks great on every device.
SearchBox ›An autocomplete input to search through a list of entries.
SelectButton ›A choose button that opens a selection dialog when clicked.
SelectItem ›A radio button that expands its content when selected. Should be used inside of a SelectList.
SelectList ›A vertical list of radio buttons that reveal content when selected.
SetupWizard ›A set of steps the user has to go through sequentially.
SetupWizardItem ›An item that represents one step in a SetupWizard.
SharingBar ›A context menu for sharing a link and some text on various platforms.
Signature ›A component to let the user subscribe
Slider ›A horizontal track with a thumb that can be moved between a minimum and a maximum value.
SliderButton ›A linear set of buttons which are mutually exclusive.
SmallWaitCursor ›A small circular loading indicator.
TagInput ›A text input that allows values to be grouped as tags.
TextArea ›A multiline text input that can automatically grow with its content.
TextString ›Loads text strings from our database and displays them. Handles replacements and changing the string via CTRL + Click (only internal).
Tooltip ›Wraps a child component and displays a message when the child is hovered or clicked on. Allows to be shown imperatively by calling .show() or .hide() on its reference.
VerificationIcon ›

Utility Functions

We also provide a set of common utility functions:

imageUploadFunction to upload images to
isTobitEmployeeGet the information if user is an tobit employee
createLinksCreates a string with links from a string with URLs
removeHtmlRemoves HTML Tags from a string
ColorUtilsUtility functions to convert color values (hex, rgb, hsv)
equalizerUtility functions to equalize the width of html elements


If you want to contribute to chayns-components, check out the file.

Rate & Review

Great Documentation0
Easy to Use0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Unwelcoming Community0