Racine is Sprout’s library of global, reusable React components. See the getting started guide to learn more or browse the components.
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.
Breadcrumbs are used for navigating content in parent-child relationships within pages or overlays. They provide context for where users are in a nested hierarchy.
The Card component is a low-level primitive used to create clickable regions of content.
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.
A date picker enables users to select a single date or range of dates in order to filter data for a particular time period.
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.
Listboxes allow a user to select a value or multiple values from a custom-styled dropdown.
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.
Skeleton loaders create perceived performance and reduce user frustration around load times.
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.
Toasts are messages containing confirmations, notifications, and acknowledgments that require minimal user interaction.
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.
A Token Input is a specialized text input that tracks entered values and displays them to the user as tokens.