Cronos Design System

A comprehensive library of Cronos React components designed to facilitate rapid and consistent UI development for cronos branded web applications. This package includes a variety of customizable components, such as Buttons, Typography, and Cards, alongside utility types and enums for a seamless development experience.

!npm

Installation

To use the Cronos Design System Library in your project, run:

``bash
npm i @rarcifa/cronos-design-system
`

Usage

Import and use the components in your React app:

`jsx
import React from 'react';
import {
Button,
Typography,
Card,
Variant,
Size,
Color,
FontWeight,
TextAlign,
} from '@rarcifa/cronos-design-system';

function MyApp() {


;
}
`

Components

$3

A customizable button component.

Props:

- variant: Button variant (primary, secondary, dark, active).
- size: Size of the button (sm, md, lg).
- rounded: If true, applies rounded corners.
- ...and more.

#### Example Usage

`jsx
import { Button, Variant, Size } from '@rarcifa/cronos-design-system';

function MyButton() {
variant={Variant.Primary}
size={Size.Lg}
onClick={() => console.log('Clicked')}
>
Click Me
;
}
`

$3

A component for displaying text.

Props:

- size: Size of the text (sm, md, lg).
- fontWeight: Font weight (bold, medium, default).
- color: Text color (dark, light, default).
- ...and more.

#### Example Usage

`jsx
import {
Typography,
Size,
Color,
FontWeight,
} from '@rarcifa/cronos-design-system';

function MyTypography {

Hello World

};
`

$3

A container component for grouping related content.

Props:

- children: Content of the card.

#### Example Usage

`jsx
import { Card } from '@rarcifa/cronos-design-system';

function MyCard() {




;
}
``

$3

Includes Variant, Size, Color, FontWeight, TextAlign for standardizing the values across the components.

Contributing

Contributions are welcome! Please read our contributing guidelines before submitting pull requests.

License

This project is licensed under the MIT License