celestial

50Y Component Libraries

Introduction

Welcome to the celestial component library! This library is part of the 50Y project and aims to provide a collection of reusable components for building modern web applications.

Features

• Modular and Reusable: Each component in this library is designed to be modular and reusable, allowing you to easily integrate them into your projects.
• Consistent Design: All components follow a consistent design language, ensuring a cohesive and professional look and feel across your application.
• Responsive: The components are built with responsiveness in mind, ensuring that they adapt well to different screen sizes and devices.
• Customizable: You can easily customize the components to match your project's branding and style requirements.

Installation

To install the celestial component library, you can use your preferred package manager. Here's an example using npm:

npm install @50y/celestial

Usage

Once installed, you can import and use the components in your project. Here's an example of how to import a button component:

import { Button } from "@50y/celestial";

// Use the Button component in your code
<Button label="Click me" onClick={handleClick} />;

Make sure to refer to the documentation for each component to learn about its props and usage details.

import "@50y/celestial/dist/cjs/index.css";

Make sure to import styles too in order for components to be styled properly

Documentation

For detailed documentation on each component, please refer to the celestial component library documentation.

License

The celestial component library is released under the ISC License. See the LICENSE file for more information.

Theme integration

To use different base colors, use ThemeProvider from Celestial

// top level component or layout
import { ThemeProvider } from "@50y/celestial";

<ThemeProvider theme={{
  primary: "",
  'primary-hover': "",
  'primary-disabled': "",
  'primary-pressed': "",
  'text-default': "",
  'icon-hover': "",
  'icon-pressed': "",
  'font-family': "Mono"
}}>
{/** your components */}
</ThemeProvider>

To add additional extendable theme elements, you will have to add them to the ThemeContext.tsx types component and also add default values in index.css. These values can then be used in tailwind.config.ts as "var(--primary-color)".

// index.css
:root {
  --primary: #ff1c24ff;
  --primary-color: "your color value"
  --secondary: #171717ff;
}

// tailwind.config.ts
"interactive-secondary-idle": "var(--interactive-secondary-idle)",