Installation:

npm install launchpad-react-lib

Copy Tailwind Configuration

import type { Config } from 'tailwindcss'

const config: Config = {
    content: [
        './pages/**/*.{js,ts,jsx,tsx,mdx}',
        './components/**/*.{js,ts,jsx,tsx,mdx}',
        './app/**/*.{js,ts,jsx,tsx,mdx}',
        './node_modules/launchpad-react-lib/components/*.tsx', // for the components
    ],
    theme: {
        extend: {
            colors: {
                'btn-primary': 'var(--btn-primary)',
                'btn-primary-hover': 'var(--btn-primary-hover)',
                'btn-disabled': 'var(--btn-disabled)',
                'btn-disabled-text': 'var(--btn-disabled-text)',

                'tab-brand-100': 'var(--tab-brand-100)',
                'tab-brand-100-hover': 'var(--tab-brand-100-hover)',
                'tab-brand-200': 'var(--tab-brand-200)',
                'tab-brand-300': 'var(--tab-brand-300)',
                'tab-brand-200-hover': 'var(--tab-brand-200-hover)',

                'input-brand-border': 'var(--input-brand-border)',
                'input-brand-error': 'var(--input-brand-error)',
                'input-brand-placeholder': 'var(--input-brand-placeholder)',
                'input-brand-active-border': 'var(--input-brand-active-border)',
                'input-brand-bg-disabled': 'var(--input-brand-bg-disabled)',

                'dropdown-hover': 'var(--dropdown-hover)',
                'dropdown-border': 'var(--dropdown-border)',
                'dropdown-placeholder': 'var(--dropdown-placeholder)',
                'dropdown-brand-100': 'var(--dropdown-brand-100)',
                'dropdown-error': 'var(--dropdown-error)',
            },
        },
    },
    plugins: [],
}
export default config

Copy Global CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --btn-primary: #12518c;
    --btn-primary-hover: #1e73bf;
    --btn-disabled: #a6b8cc;
    --btn-disabled-text: #576b7c;

    --tab-brand-100: #12518c;
    --tab-brand-100-hover: #1e73bf;
    --tab-brand-200: #eff0f4;
    --tab-brand-200-hover: #dde2e9;
    --tab-brand-300: #979797;

    --input-brand-border: #e5e5e5;
    --input-brand-error: #ff0000;
    --input-brand-placeholder: #a9a9a9;
    --input-brand-active-border: #12518c;
    --input-brand-bg-disabled: #f7f7f8;

    --dropdown-hover: #d9e5f3;
    --dropdown-border: #e5e5e5;
    --dropdown-placeholder: #a9a9a9;
    --dropdown-brand-100: #12518c;
    --dropdown-error: #ff0000;
}

body {
    font-family: 'Poppins';
}

@layer base {
    h1 {
        @apply text-2xl lg:text-3xl xl:text-4xl;
    }
    h2 {
        @apply text-xl lg:text-2xl xl:text-[32px];
    }
    h3 {
        @apply text-lg lg:text-xl xl:text-2xl;
    }
    h4,
    h5,
    h6 {
        @apply text-base lg:text-lg;
    }
    body {
        @apply text-sm lg:text-base;
    }
}

To Preview Components with Documentation

1. Clone the Project

git clone https://github.com/CodersLaunchpad/Launchpad_react_lib.git

2. Install the neccessary dependencies

npm i

2. Run the storybook

npm run storybook