- Accordion
- Alert Dialog
- Avatar
- Badge
- Banner
- BreadcrumbSOON
- Button
- Button Group
- Calendar
- Callout
- Card
- Checkbox
- CodeblockSOON
- Color Picker
- Container
- Control Group
- Dialog
- Dropdown
- File Uploader
- FlexBox
- FormSOON
- Grid View
- IconSOON
- ImageSOON
- Input
- Link
- List
- MenuSOON
- PaginationSOON
- Popover
- Progress
- Radio
- Section
- Select
- Separator
- Skeleton
- SliderSOON
- SpinnerSOON
- Switch
- Table
- Tabs
- Tag
- Textarea
- ToastSOON
- Tooltip
Getting started
An accessible design system for React.Joining the Sweetness
SugarcoatUI is a React-based design system that layers on three core concepts: accessibility, micro-interactions, and exceptional experience for both users and developers.
Accessibility
Staying true to our promise of universal sweetness, SugarcoatUI, as much as possible, follows the WCAG guidelines to the letter. We leverage the robustness of accessible default themes and components to ensure a tasteful experience for all users.
Micro-interactions
We believe in making the web more delightful. SugarcoatUI is whipped up with that in mind, enabling delicious micro-interactions and animations within its components. And yes, we respect those who prefer a reduced motion and have made provisions to ensure the same level of sweetness.
UX & DX
With SugarcoatUI, we consider good user experience the sugar in our recipe. That's why we do everything we can to optimize it. But we didn't forget the chefs behind the scenes! We've baked in a solid API and component structure to ensure a great developer experience as well.
More than a lib
SugarcoatUI is not just a design system. It's a full-stack dessert, equipped with tools you'll need for developing world-class React applications. Dive into our Getting Started guide for more information about the full range of our offerings.