MAXICO TOP TIER COMPONENTS

start by running the script

npx @services-maxiphy/maxico@latest

The current version includes the following components:

Then sync your existing globals.css and tailwind config with the corresponding files:

Tailwind config

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: "var(--primary)",
        secondary: "#73b7fb",
        "primary-text": "#181826",
        "secondary-text": "#4D4D4D",
        "tertiary-text": "#ffffff",
        "muted-text": "#EAEAEF",
        white: "#ffffff",
        black: "#000000",
        stroke: "#cccccc",
        muted: "#6B7280",
        "input-bg": "#EAEAEF",
        danger: "#D83535",
        "danger-light": "#F4CCCC",
      },
      borderRadius: {
        input: "0.5rem",
        checkbox: "0.25rem",
      },
      minHeight: {
        checkbox: "1.25rem",
      },
      width: {
        checkbox: "1.25rem",
      },
      height: {
        checkbox: "1.25rem",
      },
      minWidth: {
        checkbox: "1.25rem",
      },
      fontSize: {
        "2xs": [
          "0.625rem",
          {
            lineHeight: "150%",
            letterSpacing: "0em",
            fontWeight: "400",
          },
        ],
        "2xs-md": [
          "0.625rem",
          {
            lineHeight: "150%",
            letterSpacing: "0em",
            fontWeight: "400",
          },
        ],
        xs: [
          "0.75rem",
          {
            lineHeight: "150%",
            letterSpacing: "0em",
            fontWeight: "400",
          },
        ],
        "xs-md": [
          "0.75rem",
          {
            lineHeight: "150%",
            letterSpacing: "0em",
            fontWeight: "400",
          },
        ],
        sm: [
          "0.8rem",
          {
            lineHeight: "150%",
            letterSpacing: "0em",
            fontWeight: "400",
          },
        ],
        "sm-md": [
          "0.875rem",
          {
            lineHeight: "150%",
            letterSpacing: "0em",
            fontWeight: "400",
          },
        ],
        base: [
          "0.9rem",
          {
            lineHeight: "150%",
            letterSpacing: "0em",
            fontWeight: "400",
          },
        ],
        "base-md": [
          "1rem",
          {
            lineHeight: "150%",
            letterSpacing: "0em",
            fontWeight: "400",
          },
        ],
        18: [
          "1rem",
          {
            lineHeight: "150%",
            letterSpacing: "0em",
            fontWeight: "400",
          },
        ],
        "18-md": [
          "1.125rem",
          {
            lineHeight: "150%",
            letterSpacing: "0em",
            fontWeight: "400",
          },
        ],
        lg: [
          "1.2rem",
          {
            lineHeight: "150%",
            letterSpacing: "0em",
            fontWeight: "400",
          },
        ],
        "lg-md": [
          "1.375rem",
          {
            lineHeight: "150%",
            letterSpacing: "0em",
            fontWeight: "400",
          },
        ],
        xl: [
          "1.375rem",
          {
            lineHeight: "150%",
            letterSpacing: "0em",
            fontWeight: "400",
          },
        ],
        "xl-md": [
          "1.5rem",
          {
            lineHeight: "150%",
            letterSpacing: "0em",
            fontWeight: "400",
          },
        ],
        "2xl": [
          "1.5rem",
          {
            lineHeight: "150%",
            letterSpacing: "0em",
            fontWeight: "400",
          },
        ],
        "2xl-md": [
          "1.75rem",
          {
            lineHeight: "150%",
            letterSpacing: "0em",
            fontWeight: "400",
          },
        ],
        "3xl": [
          "1.875rem",
          {
            lineHeight: "150%",
            letterSpacing: "0em",
            fontWeight: "400",
          },
        ],
        "3xl-md": [
          "2rem",
          {
            lineHeight: "150%",
            letterSpacing: "0em",
            fontWeight: "400",
          },
        ],
        "4xl": [
          "2.3rem",
          {
            lineHeight: "150%",
            letterSpacing: "0em",
            fontWeight: "400",
          },
        ],
        "4xl-md": [
          "2.5rem",
          {
            lineHeight: "150%",
            letterSpacing: "0em",
            fontWeight: "400",
          },
        ],
      },
    },
  },
  plugins: [require("@tailwindcss/aspect-ratio")],
};

globals.css

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

:root {
  --primary: #000000;
}
input {
  all: unset;
}
textarea {
  all: unset;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

.p-datepicker-title {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 1rem;
}
.p-highlight {
  background-color: var(--primary);
  color: white;
}

::-webkit-scrollbar-button {
  display: none;
}
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 1rem;
}
::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 1rem;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

.custom-dashed-border {
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%23181826FF' stroke-width='1' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
  border-radius: 8px;
}

.modalFadeAndSlideIn {
  animation: modalFadeAndSlideIn 300ms ease-out forwards !important;
}
.modalFadeIn {
  animation: modalFadeIn 300ms ease-out forwards !important;
}

.modalFadeAndSlideOut {
  animation: modalFadeAndSlideOut 300ms ease-out forwards;
}
.modalFadeOut {
  animation: modalFadeOut 300ms ease-out forwards;
}

.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hidden {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

@keyframes modalFadeAndSlideIn {
  0% {
    transform: translateY(20px);
    opacity: 0;
    pointer-events: auto;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
    pointer-events: auto;
  }
}

@keyframes modalFadeIn {
  0% {
    opacity: 0;
    pointer-events: auto;
  }
  100% {
    opacity: 1;
    pointer-events: auto;
  }
}

@keyframes modalFadeAndSlideOut {
  0% {
    pointer-events: none;
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
  }
}

@keyframes modalFadeOut {
  0% {
    pointer-events: none;
    opacity: 1;
  }
  100% {
    opacity: 0;
    pointer-events: none;
  }
}