@fr8/ui - React UI Library

A basic typesafe UI Library built by using

• React
• Typescript
• radix-ui (shadcn/ui)
• Lucide React (icons)
• TailwindCSS
• Storybook

Built With

• Vite Library Mode

When it is time to bundle your library for distribution, use the build.lib config option. Make sure to also externalize any dependencies that you do not want to bundle into your library

Getting Started

We leverage Storybook as a showcase of the various components implemented by this library. To launch Storybook run:

npm i
npm run build
npm run storybook

Instructions for users (Developers)

Add @fr8/ui to your project

npm install @fr8/ui

Install Tailwind CSS

• Tailwind

npm install -D tailwindcss postcss autoprefixer
npm i tailwindcss-animatecss
npx tailwindcss init

Create a postcss.config.js and past below code in your root directory

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Copy the below code and paste in tailwind.config.js in your root directory

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    /* according to your project folders src, app ...*/
    "./app/**/*.{ts,tsx}",
    // "./src/**/*.{ts,tsx}",
    /* For tailwind support to @fr8/uil library */
    "./node_modules/@fr8/ui/dist/**/*.{js,cjs}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        subline: "hsl(var(--subline))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        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))",
          hover: "hsl(var(--card-hover))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      boxShadow: {
        t: "0 -1px 3px rgba(0,0,0,0.05)",
        "t-sm": "0 -2px 5px rgba(0,0,0,0.05)",
        l: "-1px 0 3px rgba(0,0,0,0.05)",
        "l-sm": "-2px 0 5px rgba(0,0,0,0.05)",
      },
      fontFamily: {
        Inter: ["Inter", "sans-serif"],
      },
      fontSize: {
        DEFALUT: "var(--text-base)",
        xs: "var(--text-xs)",
        sm: "var(--text-sm)",
        base: "var(--text-base)",
        lg: "var(--text-lg)",
        xl: "var(--text-xl)",
        "2xl": "var(--text-2xl)",
        "3xl": "var(--text-3xl)",
        "4xl": "var(--text-4xl)",
        "5xl": "var(--text-5xl)",
        "6xl": "var(--text-6xl)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
        loading: {
          "0%": { transform: "translateX(-100%)" },
          "100%": { transform: "translateX(100%)" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        loading: "loading 2s linear infinite",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
};

CSS Configuration

Paste below css code inside your main css file (file name up to you) remix we use app/root.css

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

@layer base {
  :root {
    /** sadcn/ui variables */
    --background: 210 8% 97%;
    --foreground: 200 14% 13%;
    --subline: 215 15% 50%;

    --card: 0 0% 100%;
    --card-hover: 210 40% 97%;
    --card-foreground: 200 14% 13%;

    --popover: 0 0% 100%;
    --popover-foreground: 200 14% 13%;

    --primary: 215 100% 22%;
    --primary-foreground: 0 0% 100%;

    --secondary: 215 100% 50%;
    --secondary-foreground: 0 0% 100%;

    --muted: 206 20% 97%;
    --muted-foreground: 216 16% 47%;

    --accent: 210 40% 97%;
    --accent-foreground: 215 100% 22%;

    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;

    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 200 14% 13%;
    --white: 0 0% 100%;
    --black: 0 0% 0%;

    --radius: 0.5rem;
    --font-family: [ "Inter", "sans-serif"];
    /** sadcn/ui variables End ----- */

    /* This text config is for applications 
    * like Book, Loads, Grow mobile app
    * -------------------------------- */

    /* 11px */
    --text-xs: 0.685rem;
    /* 12px */
    --text-sm: 0.75rem;
    /* 13px */
    --text-base: 0.825rem;
    /* 14px */
    --text-lg: 0.875rem;
    /* 16px */
    --text-xl: 1rem;
    /* 18px */
    --text-2xl: 1.125rem;
    /* 20px */
    --text-3xl: 1.25rem;
    /* 22px */
    --text-4xl: 1.375rem;
    /* 24px */
    --text-5xl: 1.5rem;
    /* 26px */
    --text-6xl: 1.625rem;
  }

  .dark {
    /** sadcn/ui variables dark theme */
    --background: 224 66% 6%;
    --foreground: 210 40% 96%;
    --subline: 215 15% 55%;

    --card: 220 47% 10%;
    --card-hover: 222 47% 13%;
    --card-foreground: 210 20% 90%;

    --popover: 222 84% 7%;
    --popover-foreground: 210 40% 98%;

    --primary: 215 100% 45%;
    --primary-foreground: 215 100% 96%;

    --secondary: 200 100% 55%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217 32% 17%;
    --muted-foreground: 215 20% 65%;

    --accent: 217 32% 17%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 63% 30%;
    --destructive-foreground: 210 40% 98%;

    --border: 217 32% 17%;
    --input: 217 33% 17%;
    --ring: 212 26% 83%;
  }

  .webPage {
    /*Blow is as per TAILWIND https://tailwindcss.com/docs/font-size 
        * this config is for websites like fr8.in, openfr8.com
        */
    /* 12px */
    --text-xs: 0.75rem;
    /* 14px */
    --text-sm: 0.875rem;
    /* 16px */
    --text-base: 1rem;
    /* 18px */
    --text-lg: 1.125rem;
    /* 20px */
    --text-xl: 1.25rem;
    /* 24px */
    --text-2xl: 1.5rem;
    /* 30px */
    --text-3xl: 1.875rem;
    /* 36px */
    --text-4xl: 2.25rem;
    /* 48px */
    --text-5xl: 3rem;
    /* 60px */
    --text-6xl: 3.75rem;
  }

  .inter {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "slnt" 0;
  }

  * {
    /* default boder color for the whole application*/
    @apply border-border;
  }

  html,
  body {
    @apply inter bg-background text-base font-normal leading-normal text-foreground;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-medium;
  }

  h1,
  h1 > a {
    @apply text-2xl;
  }

  h2,
  h2 > a {
    @apply text-xl;
  }

  h3,
  h3 > a {
    @apply text-lg;
  }

  h4,
  p,
  a {
    @apply text-base;
  }

  h5,
  h5 > a {
    @apply text-sm;
  }
  h6,
  h6 > a {
    @apply text-xs;
  }

  a {
    @apply cursor-pointer text-secondary hover:text-secondary/80 focus:text-secondary/90;
  }
}

@layer components {
  .ripple {
    @apply translate-y-0 bg-center;
    transition: background 500ms;
    -webkit-tap-highlight-color: transparent;
  }
  .ripple:active {
    @apply translate-y-px bg-cover;
    background-color: rgba(0, 0, 0, 0.08);
    transition: background 0ms;
  }
}

Import style to your project

Remix Project -> Add root.css to your app In your app/root.tsx file, import the root.css file.

import styles from "./root.css";

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: styles },
  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
];

Typography

We use Inter the font from google

CDN - https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap

In our Applications we use

• Headings font-medium (500 font weight as bold) - h1, h2, h3, h4, h5, h6
• Body copy font-normal (400 font weight as regular)

if need, you can use semibold (600) or bold (700)

To support Inter webfont follow the below instructions

/* For Remix */
export const links: LinksFunction = () => [
    //...existing css imports,
    {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap',
    },
]