@inverclick/inverclick-ui

Inverclick UI

Inverclick UI is a React component library that uses shadcn/ui and Tailwind CSS underhood.

Installation

Install Tailwind CSS

Componentes are styled using shadcn/ui and Tailwind CSS. You need to install Tailwind CSS.

Follow the Tailwind CSS installation instructions.

Install shadcn/ui peer dependencies

pnpm add tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react

And other peer dependencies

pnpm add @midudev/tailwind-animations

Install Inverclick UI

pnpm add @inverclick/inverclick-ui

Modify Tailwind CSS configuration

Track the library components in order to compile their styles, modify tailwind.config.js as follows.

import { inverclick } from "@inverclick/inverclick-ui/plugin";
import tailwindAnimations from "@midudev/tailwind-animations";
import tailwindAnimate from "tailwindcss-animate";

/** @type {import("tailwindcss").Config} */
export default {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@inverclick/inverclick-ui/dist/**/*.{js,ts,jsx,tsx}", // Add this path
  ],
  // Use Inverclick Tailwind CSS plugin, Tailwind CSS animate and Tailwind animations plugins
  plugins: [inverclick, tailwindAnimate, tailwindAnimations],
};

The Inverclick CSS plugin configure the tokens used by shadcn/ui, this plugin requires the theme as CSS variables. Import the theme at the root of the application.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./app.tsx";

import "@inverclick/inverclick-ui/theme.css";
import "./index.css";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Install Geist font from Google Fonts and modify Tailwind layers

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap"
  rel="stylesheet"
/>

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

@layer base {
  * {
    @apply border-border;
  }

  body {
    font-family: "Geist", sans-serif;
    @apply bg-background text-foreground;
  }
}

IMPORTANT! Some components require to install some peer dependencies

This is the list of components and its peer dependencies:

Formik components

Formik components require formik, optionally yup for schema validation.

Formik components that require translations, require i18next and react-i18next. Formik components that do not require translations can be identified by the suffix NT (Not translation).

When using Formik components that require translations, setup the translation logic by calling just once setupYupLocale from @inverclick/inverclick-ui/schema-validation/yup and setting up translations file following the structure defined in setupYupLocale, for example:

{
  "errors": {
    "string": {
      "length": "El campo debe tener exactamente {{length}} caracteres",
      "min": "El campo debe tener al menos {{min}} caracteres",
      "max": "El campo debe tener como máximo {{max}} caracteres"
    }
  }
}

Toaster/Sonner component

Sonner component require sonner and next-themes.

Input OTP

Input OTP component require input-otp.

Combobox and Command components

Combobox and Command components require cmdk.

Calendar and Date picker components

Calendar and Date picker components require date-fns and react-day-picker.

Carousel component

Carousel component requires embla-carousel-react.

Resizable component

Resizable component requires react-resizable-panels.

Phone input component

Phone input component requires react-phone-number-input