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.
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.
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.
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.
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.