@cronos-labs/cronos-design-system

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.

Installation

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

npm i @rarcifa/cronos-design-system

Usage

Import and use the components in your React app:

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

function MyApp() {
  <div>
    <Typography size={Size.Md} color={Color.Dark} fontWeight={FontWeight.Bold}>
      Hello World
    </Typography>
    <Button
      variant={Variant.Primary}
      size={Size.Lg}
      onClick={() => console.log('Clicked')}
    >
      Click Me
    </Button>
    <Card>
      <Typography>Card Content</Typography>
    </Card>
  </div>;
}

Components

Button

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

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

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

Typography

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

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

function MyTypography {
  <Typography size={Size.Md} fontWeight={FontWeight.Bold} color={Color.Dark}>
    Hello World
  </Typography>
};

Card

A container component for grouping related content.

Props:

• children: Content of the card.

Example Usage

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

function MyCard() {
  <Card>
    <div>Some content here</div>
  </Card>;
}

Enums and Types

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