Introduction to components

The @arkyn/components package is a modern and flexible React component library designed to accelerate the development of consistent and accessible user interfaces.

Installation

To start using Arkyn components in your project, you need to install two essential dependencies:

bash

bun add @arkyn/components @arkyn/shared

Configuration

After installing the dependencies, you need to configure your project to use the Arkyn component styles and CSS variables. Follow these steps:

1. Import the styles

In the root file of your application (usually main.tsx, index.tsx, root.tsx or App.tsx), import the component styles:

tsx

import "@arkyn/components/dist/style.css";

2. Configure CSS variables

Create a CSS file (e.g., globals.css, app.css or variables.css) and add the following CSS variables that are used by the library:

css

:root {
  /* background */
  --background: #f1f5f9;
  --background-foreground: #ffffff;

  /* modal, drawer, popover... */
  --card: #ffffff;
  --card-foreground-primary: #f8fafc;
  --card-foreground-secondary: #f1f5f9;
  --card-foreground-third: #e2e8f0;

  /* skeleton */
  --skeleton: #f8fafc;
  --skeleton-foreground: #f1f5f9;

  /* text */
  --text-heading: #0f172a;
  --text-body: #475569;
  --text-muted: #94a3b8;

  /* border */
  --border: #e2e8f0;

  /* tooltip */
  --tooltip-text: #f1f5f9;
  --tooltip-background: #0f172a;

  /* spotlight */
  --spotlight-primary: 17, 109, 220; /* #116ddc */
  --spotlight-secondary: 248, 250, 252; /* #f8fafc */
  --spotlight-success: 16, 185, 129; /* #10b981 */
  --spotlight-danger: 244, 63, 94; /* #f43f5e */
  --spotlight-info: 14, 165, 233; /* #0ea5e9 */
  --spotlight-warning: 249, 115, 22; /* #f97316 */

  /* toast */
  --toast-success: 16, 185, 129; /* #10B981 */
  --toast-danger: 225, 29, 72; /* #E11D48 */
  --toast-info: 14, 165, 233; /* #0EA5E9 */
  --toast-warning: 251, 146, 60; /* #FB923C */
}

You can customize these variables to match your application's design system. Make sure to import this CSS file into your application's root file as well.

Next steps

After completing the installation and configuration, you'll be ready to start using Arkyn components in your project. Explore the specific sections for each component category to learn about their functionality and usage examples.

On this page