Get Started
Coral helps developers create products efficiently and consistently via compatible components and guidelines.

Installation

Before we start, create a file .npmrc next to package.json and fill in with:
Then, install Coral package by running:
Coral has peer dependency of styled-components, you need to install it separately:

What's in Coral?

Customizability

With Coral's low-level component abstraction, you can have limitless customization even for complex components like selects and pickers. It's also possible to create your own reusable components to replace some default parts in Coral components.
Each component also practises control prop pattern where applicable. This allows you to override any internal state, making it very flexible for any possible use cases.

Accessibility

All components are created with comprehensive support for screen-reader and keyboard navigation, following the guidelines specified in WAI-ARIA Authoring Practices.
By leveraging semantic HTML tags and appropriate accessibility roles and attributes, Coral components provide a solid foundation for building inclusive web applications. With Coral, users can easily create accessible and user-friendly interfaces.

Well tested

With coverage above 97%, tested using react-testing-library and screenshot tests, Coral incurred little to no unexpected functional and visual regressions for its users. Numerous edge cases for components which have complex behaviors have been handled as well.
With such comprehensive testing coverage, users can expect a reliable and consistent experience when utilizing this component library in their projects.
Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.

Copyright © 2018-2025 Sea Labs