Cerulean Design System

A design system made for convenience without compromising aesthetics.

Cerulean Design System will help you through creating a React based website faster and easier with our ready to use components and minimal configurations.

Getting Started

Install cerulean-design-system

# With npm
npm i @mikhaelesa/cerulean
# With yarn
yarn add @mikhaelesa/cerulean
# With pnpm
pnpm add @mikhaelesa/cerulean

Import CSS to your root jsx or tsx file

// main.tsx
import "@mikhaelesa/cerulean/dist/style.css";

Now use any component in your project

const Home = () => {
	return (
		<>
			<p>
				<Typography>Hello</Typography>
			</p>
			<Button>Click me!</Button>
			<Icon iconName="IcCheck" />
		</>
	);
};

Test out the design system by using any component available and see if it's working

Typography

For typography we use Poppins as our font-family. You can use @fontsource/poppins to activate the fonts.

yarn add @fontsource/poppins

import @fontsource/poppins in your main file

import "@fontsource/poppins/400.css";
import "@fontsource/poppins/500.css";
import "@fontsource/poppins/600.css";
import "@fontsource/poppins/700.css";

Documentation

For now, all component documentation is in each component folder

• Badge Documentation
• Button Documentation
• Checkbox Documentation
• Grid Documentation
• Icon Documentation
• Input Documentation
• Radio Documentation
• Switch Documentation
• Textarea Documentation
• Typography Documentation