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.
Form Field controls the layout of form elements alongside their labels and errors.
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.
Messages are how we display user generated content provided by our network partners in app.
Modals are used to overlay content above an 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.
The Stack component is a low-level primitive used to layout items in a horizontal or vertical stack, with even spacing between the items.
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.