Installation

To use the components from our UI library, you'll need to set up Tailwind CSS and install the classnames package. Follow the steps below to get started.

1. Install Tailwind CSS (if you haven't already)

Tailwind CSS is a utility-first CSS framework that we use for styling our components. Follow these steps to install Tailwind CSS:

Using npm:

npm install tailwindcss postcss autoprefixer

Using yarn:

yarn add tailwindcss postcss autoprefixer

2. Configure Tailwind CSS

Once installed, you'll need to set up a Tailwind configuration file. Create a tailwind.config.js file in the root of your project and paste the following content:

// tailwind.config.js

import type { Config } from "tailwindcss";

const config: Config = {
    content: [
        // Add paths to your project's directories here
    ],
    darkMode: 'class', 
    theme: {
        extend: {
            colors: {
                background: 'var(--color-background)',
                text: 'var(--color-text)',
                primary: 'var(--color-primary)',
                secondary: 'var(--color-secondary)',
                accent: 'var(--color-accent)',
                border: 'var(--color-border)',
                link: 'var(--color-link)',
            },
        },
    },
    variants: {
        extend: {
            backgroundColor: ['dark'],
            textColor: ['dark'],
            borderColor: ['dark'],
            boxShadow: ['dark'],
        },
    },
    plugins: [],
};

export default config;

3. Create a CSS File

In your project, create a CSS file (e.g., globals.css) and add the following content:

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --color-background: var(--color-background-light);
    --color-text: var(--color-text-light);
    --color-text-color-secondary: var(--color-text-lighter);
    --color-primary: var(--color-primary-light);
    --color-secondary: var(--color-secondary-light);
    --color-accent: var(--color-accent-light);
    --color-border: var(--color-border-light);
    --color-link: var(--color-link-light);

    --color-background-light: #ffffff;
    --color-text-light: #212529;
    --color-text-lighter: #495057;
    --color-primary-light: #007bff;
    --color-secondary-light: #f4f4f6;
    --color-accent-light: #ffc107;
    --color-border-light: #e9ecef;
    --color-link-light: #007bff;

    --color-background-dark: #1a1a1a;
    --color-text-dark: #f8f9fa;
    --color-text-darker: #ced4da;
    --color-primary-dark: #0d6efd;
    --color-secondary-dark: #262628;
    --color-accent-dark: #ffc107;
    --color-border-dark: #495057;
    --color-link-dark: #66b2ff;
}

[data-theme="dark"],
.dark {
    --color-background: var(--color-background-dark);
    --color-text: var(--color-text-dark);
    --color-text-color-secondary: var(--color-text-darker);
    --color-primary: var(--color-primary-dark);
    --color-secondary: var(--color-secondary-dark);
    --color-accent: var(--color-accent-dark);
    --color-border: var(--color-border-dark);
    --color-link: var(--color-link-dark);
}

@layer utilities {
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .animate-checkmark {
        animation: draw-checkmark-in 0.3s ease forwards;
    }

    @keyframes draw-checkmark-in {
        0% {
            stroke-dasharray: 0 24;
        }

        100% {
            stroke-dasharray: 24 0;
        }
    }

    .animate-in {
        animation: fadeIn 0.2s ease forwards;
    }

    @keyframes fadeIn {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }

        100% {
            opacity: auto;
            transform: auto
        }
    }
}

4. Install the classnames Package

classnames is a utility for conditionally joining classNames together. Install it using npm or yarn:

Using npm:

npm install classnames

Using yarn:

yarn add classnames