Paprika typeface
Icon component is a graphic to represent something else
Design tokens generated as scss + js
Helpers and includes for styled-components
JavaScript and React helper utilities
Heading component provides different level of headings with various stylings such as divides, underline, light or hidden.
L10n component can be used in one of two ways: Translating Paprika components, or Translating your own components.
The package of IBM’s typeface, IBM Plex
Spinner component tells the user that the app is doing something.
Great flexibility to present a pattern where the user has to interact with an output component in order to trigger an input component
Tag can be both static UI labels or removable components. Static Tag is mostly used to show an item’s status. A removable Tag should be used to add or group objects.
The DateInput component allows users to enter and display a date.
Checkbox component displays a checkbox and label text beside it. When clicked it displays a checkmark. It can also have an indeterminate state which can be used to group checkboxes.
Toast component is a controlled or uncontrolled component that provides a easy way to commmunicate to users regarding success, warning, info, and error messages.
Popover component renders an overlay of content anchored to a trigger button (or specific positioning element). It can be triggered by click (or keypress), by hover (or keyboard focus – as a tooltip), or programatically
Raw button component, for performing an action on the page you’re viewing.
Roboto typeface
Confirmation component allows user to confirm or cancel action
Switch component for turning a setting on or off.
The Counter component is a decorative element that usually displays the count of a specific object.
The Link component produces a standard anchor tag that navigates to another URL.
The Input component is a standard text input with some enhancements that can be used as a controlled or uncontrolled component.
Avatar component represents an object or entity and displays initials or icon.
Button component, for performing an action on the page you’re viewing.