npm package: @inverclick/inverclick-ui
Description: Inverclick UI is a React component library that uses shadcn/ui and Tailwind CSS underhood.
Latest version: 1.11.12

# 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.](https://tailwindcss.com/docs/installation/framework-guides)

### Install shadcn/ui peer dependencies

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

And other peer dependencies

```bash
pnpm add @midudev/tailwind-animations
```

### Install Inverclick UI

```bash
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.

```js
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.

```tsx
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

```html
<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"
/>
```

```css
@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:

```json
{
  "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`