Introduction

Learn about Sugarcoat UI and its core principles

Sugarcoat UI is a modern React component library designed for building beautiful, accessible web applications.

Core Principles#

Accessibility First#

All components are built on top of BaseUI primitives, ensuring proper keyboard navigation, screen reader support, and ARIA attributes out of the box.

Type-Safe#

Full TypeScript support with comprehensive type definitions for all components and their props.

Customizable#

Powered by Panda CSS, components can be easily customized through:

  • Variant props (size, color, etc.)
  • CSS overrides using the css() function
  • Theme customization

Modern Architecture#

Built with modern React patterns:

  • Server Components support
  • React 18+ features
  • Tree-shakeable exports

Technology Stack#

TechnologyPurpose
React 18+UI framework
BaseUIAccessible primitives
Panda CSSStyling engine
TypeScriptType safety

Next Steps#

Customize Theme
Build your own sugarcoat/ui theme
PresetLime / Violet / Slate
Brand ColorLime
Accent ColorViolet
Gray ScaleSlate
Border RadiusLg