UI Tailwind Library

A custom UI library built with React, TypeScript, and Tailwind CSS.

Installation

Step 1: Create a React App

If you don’t already have a React project, create one using Create React App (CRA):

npx create-react-app my-app --template typescript
cd my-app

Step 2: Install ui-tailwind-library

Install ui-tailwind-library in your project:

npm install ui-tailwind-library

then install lucide-react for the icons

npm install lucide-react

For more details about lucide-react, visit the official lucide-react documentation.

Step 3: Set Up Tailwind CSS

If Tailwind CSS is not already configured in your project, follow these steps:

1. Install Tailwind CSS
   Run the following command to install tailwind

   npm install -D tailwindcss tailwindcss-animate

2. Initialize Tailwind CSS
   Run the following command to generate a tailwind.config.js file:

   npx tailwindcss init

3. Update Tailwind Config
   Modify the content field in tailwind.config.js to include your project files and your theme:

   module.exports = {
     content: ["./src/**/*.{js,jsx,ts,tsx}"],
     theme: {
       extend: {
         boxShadow: {
           10: "2px 4px 8px 0 rgba(0, 0, 0, 5%)",
         },
         colors: {
           border: "hsl(var(--border))",
           input: "hsl(var(--input))",
           ring: "hsl(var(--ring))",
           background: "hsl(var(--background))",
           foreground: "hsl(var(--foreground))",
           primary: {
             50: "#e9f9f0",
             75: "#a3e6c2",
             100: "#7ddba9",
             200: "#44cc84",
             300: "#1ec16b",
             400: "#15874b",
             500: "#127641",
             DEFAULT: "hsl(var(--primary))",
             foreground: "hsl(var(--primary-foreground))",
           },
           secondary: {
             50: "#eaf5ff",
             75: "#a8d5fe",
             100: "#85c4fe",
             200: "#50aafd",
             300: "#2c99fd",
             400: "#1f6bb1",
             500: "#1b5d9a",
             DEFAULT: "hsl(var(--secondary))",
             foreground: "hsl(var(--secondary-foreground))",
           },
           danger: {
             50: "#ffe6e6",
             75: "#ff9696",
             100: "#fe6b6b",
             200: "#fe2b2b",
             300: "#fe0000",
             400: "#b20000",
             500: "#9b0000",
             DEFAULT: "hsl(var(--danger))",
           },
           success: {
             50: "#eaf6ec",
             75: "#a7dbb3",
             100: "#82cc93",
             200: "#4db665",
             300: "#28a745",
             400: "#1c7530",
             500: "#18662a",
             DEFAULT: "hsl(var(--success))",
           },
           warning: {
             50: "#fff9e7",
             75: "#ffe59b",
             100: "#ffda71",
             200: "#ffcb34",
             300: "#ffc00a",
             400: "#b38607",
             500: "#9c7506",
             DEFAULT: "hsl(var(--warning))",
           },
           neutral: {
             0: "#ffffff",
             10: "#fafafb",
             20: "#f5f6f6",
             30: "#ebecee",
             40: "#dfe1e3",
             50: "#c1c5c9",
             60: "#b2b7bb",
             70: "#a6abb1",
             80: "#979da3",
             90: "#888f96",
             100: "#7a8189",
             200: "#6b737c",
             300: "#5c656f",
             400: "#505a64",
             500: "#414c57",
             600: "#34404c",
             700: "#23303d",
             800: "#142230",
             900: "#081625",
             DEFAULT: "hsl(var(--neutral))",
           },
           destructive: {
             DEFAULT: "hsl(var(--destructive))",
             foreground: "hsl(var(--destructive-foreground))",
           },
           muted: {
             DEFAULT: "hsl(var(--muted))",
             foreground: "hsl(var(--muted-foreground))",
           },
           accent: {
             DEFAULT: "hsl(var(--accent))",
             foreground: "hsl(var(--accent-foreground))",
           },
           popover: {
             DEFAULT: "hsl(var(--popover))",
             foreground: "hsl(var(--popover-foreground))",
           },
           card: {
             DEFAULT: "hsl(var(--card))",
             foreground: "hsl(var(--card-foreground))",
           },
         },
         keyframes: {
           "fade-in": {
             "0%": { opacity: "0" },
             "100%": { opacity: "1" },
           },
           "fade-out": {
             "0%": { opacity: "1" },
             "100%": { opacity: "0" },
           },
           "zoom-in": {
             "0%": { transform: "scale(0.95)", opacity: "0" },
             "100%": { transform: "scale(1)", opacity: "1" },
           },
           "zoom-out": {
             "0%": { transform: "scale(1)", opacity: "1" },
             "100%": { transform: "scale(0.95)", opacity: "0" },
           },
           "slide-in-from-top": {
             "0%": { transform: "translateY(-8px)", opacity: "0" },
             "100%": { transform: "translateY(0)", opacity: "1" },
           },
           "slide-in-from-bottom": {
             "0%": { transform: "translateY(8px)", opacity: "0" },
             "100%": { transform: "translateY(0)", opacity: "1" },
           },
           "slide-in-from-left": {
             "0%": { transform: "translateX(-8px)", opacity: "0" },
             "100%": { transform: "translateX(0)", opacity: "1" },
           },
           "slide-in-from-right": {
             "0%": { transform: "translateX(8px)", opacity: "0" },
             "100%": { transform: "translateX(0)", opacity: "1" },
           },
         },
         animation: {
           "fade-in": "fade-in 0.2s ease-out",
           "fade-out": "fade-out 0.2s ease-out",
           "zoom-in": "zoom-in 0.2s ease-out",
           "zoom-out": "zoom-out 0.2s ease-out",
           "slide-in-from-top": "slide-in-from-top 0.2s ease-out",
           "slide-in-from-bottom": "slide-in-from-bottom 0.2s ease-out",
           "slide-in-from-left": "slide-in-from-left 0.2s ease-out",
           "slide-in-from-right": "slide-in-from-right 0.2s ease-out",
         },
       },
     },
     plugins: [require("tailwindcss-animate")],
   };

4. Include Tailwind in Your CSS
   Add the following lines to your main CSS file (e.g., src/index.css):

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

   and Add your colors in your CSS file

   @layer base {
     :root {
       --background: 0 0% 100%;
       --foreground: 222.2 84% 4.9%;
   
       --card: 0 0% 100%;
       --card-foreground: 222.2 84% 4.9%;
   
       --popover: 0 0% 100%;
       --popover-foreground: 222.2 84% 4.9%;
   
       /* --primary: 222.2 47.4% 11.2%; */
       --primary: 148 75% 43%;
       --primary-foreground: 210 40% 98%;
   
       --secondary: 209 99% 58%;
       --secondary-foreground: 222.2 47.4% 11.2%;
   
       --danger: 0 75% 43%; /* Bright red */
       --danger-foreground: 0 40% 98%; /* Light red/white for contrast */
   
       --success: 120 75% 43%; /* Bright green */
       --success-foreground: 120 40% 98%; /* Light green/white for contrast */
   
       --warning: 0 75% 43%;
       --neutral: 210 40% 96.1%;
       --muted: 210 40% 96.1%;
       --muted-foreground: 215.4 16.3% 46.9%;
   
       --accent: 210 40% 96.1%;
       --accent-foreground: 222.2 47.4% 11.2%;
   
       --destructive: 0 84.2% 60.2%;
       --destructive-foreground: 210 40% 98%;
   
       --border: 214.3 31.8% 91.4%;
       --input: 214.3 31.8% 91.4%;
       --ring: 222.2 84% 4.9%;
   
       --radius: 0.5rem;
     }
     .dark {
       --background: 222.2 84% 4.9%;
       --foreground: 210 40% 98%;
   
       --card: 222.2 84% 4.9%;
       --card-foreground: 210 40% 98%;
   
       --popover: 222.2 84% 4.9%;
       --popover-foreground: 210 40% 98%;
   
       /* --primary: 210 40% 98%; */
       --primary: 148 75% 43%;
       --primary-foreground: 222.2 47.4% 11.2%;
   
       --secondary: 217.2 32.6% 17.5%;
       --secondary-foreground: 210 40% 98%;
       --danger: 0 75% 43%; /* Bright red */
       --danger-foreground: 0 40% 98%; /* Light red/white for contrast */
   
       --success: 120 75% 43%; /* Bright green */
       --success-foreground: 120 40% 98%; /* Light green/white for contrast */
   
       --warning: 0 75% 43%;
       --neutral: 210 40% 96.1%;
   
       --muted: 217.2 32.6% 17.5%;
       --muted-foreground: 215 20.2% 65.1%;
   
       --accent: 217.2 32.6% 17.5%;
       --accent-foreground: 210 40% 98%;
   
       --destructive: 0 62.8% 30.6%;
       --destructive-foreground: 210 40% 98%;
   
       --border: 217.2 32.6% 17.5%;
       --input: 217.2 32.6% 17.5%;
       --ring: 212.7 26.8% 83.9%;
     }
   }

For more detailed instructions, visit the official Tailwind CSS documentation.

Step 4: Start Your Project

Run your development server to verify everything is set up correctly:

npm start

Usage

Once the library and Tailwind CSS is configured, you can start using and customize the components with tailwind classes on your needs in your React project. For example:

import { Button } from "my-ui-library";

export default function App() {
  return (
    <Button variant="primary" size="large">
      Click Me
    </Button>
  );
}

Notes

• Ensure Tailwind CSS is properly configured in your project, or the components will not render correctly.
• If you encounter any issues, check your Tailwind CSS setup and refer to the Tailwind CSS documentation.

License

MIT