Racine is Sprout’s library of global, reusable React components. See the getting started guide to learn more or browse the components.
Alert is a banner-like element used to communicate actionable events or supplemental information.
Badge is a decorative indicator used to either call attention to a related item or for communicating non-actionable, supplemental information.
The Box component is a low-level primitive used for layout purposes. It can be used to create grid layouts, apply padding or margin, and more.
Character Counter is a flexible utility component used to tally the remaining number of text characters available for input.
Chart Legend is a stand-alone utility that can be used to add a legend to chart components.
The collapsible component is a utility for creating regions of content that can expand/collapse with a simple animation.
Drawer is used to overlay content on top of the interface. They are intended to capture the user’s attention in order to inform or shift focus to a pertinent task.
Empty states are moments designed to prevent confusion when the primary contents of a page cannot be displayed.
Image is a wrapper for the native image tag with support for events and fallback images.
Indicator is a non-actionable ornament that can be used to draw a user’s attention to an area of the UI.
Input is a themed version of the native form field that enables a user to interact and input data.
Label is a themed version of the native label element that can be paired with other form components like Input, Textarea, Radio and Checkbox.
This component is styled to resemble a hyperlink and semantically renders an anchor or button.
Loader is used to notify a user that data is being retrieved or processed behind the scenes.
Loader buttons are used to display a loading indicator inside of a button.
Modal is used to overlay content on top of the interface. They are intended to capture the user’s attention in order to inform or shift focus to a pertinent task.
Numeral is a primitive component used to format numbers according to our number formatting guidelines.
Segmented controls are used for quickly selecting between a small set of mutually exclusive options.
Textarea is a themed version of the native textarea element with an enhanced API for formatting and accessibility.
Token is used to denote selected options in a workflow. Tokens are typically picked using select menus and advanced input fields and can be dismissible or static.