A typescript react component library following the Cronos branding standards
npm install @rarcifa/cronos-design-systemA 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
To use the Cronos Design System Library in your project, run:
``bash`
npm i @rarcifa/cronos-design-system
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() {
Some content here
;
}
``Includes Variant, Size, Color, FontWeight, TextAlign for standardizing the values across the components.
Contributions are welcome! Please read our contributing guidelines before submitting pull requests.
This project is licensed under the MIT License