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.

const { inverclick } = require("@inverclick/inverclick-ui/plugin");

/** @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 and Tailwind CSS animate plugin
  plugins: [inverclick, require("tailwindcss-animate")],
};

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:[email protected]&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;
  }
}