Installation

Get up and running with ui.falnix in minutes. We recommend using Next.js for the best developer experience.

Quick Start (Next.js)

Run the following command to create a new Next.js project with everything pre-configured.

npx create-next-app@latest my-app --typescript --tailwind --eslint

Manual Setup

Add the `cn` utility

We use `clsx` and `tailwind-merge` to conditionally render classNames without conflicts.

Terminal

1npm install clsx tailwind-merge

lib/utils.ts

1import { ClassValue, clsx } from "clsx";
2import { twMerge } from "tailwind-merge";
3
4export function cn(...inputs: ClassValue[]) {
5  return twMerge(clsx(inputs));
6}

Configure tailwind.config.ts

tailwind.config.ts

1import type { Config } from "tailwindcss";
2const {
3  default: flattenColorPalette,
4} = require("tailwindcss/lib/util/flattenColorPalette");
5
6const config: Config = {
7  content: [
8    "./src/**/*.{ts,tsx}",
9  ],
10  darkMode: "class",
11  theme: {
12    extend: {
13      animation: {
14        scroll:
15          "scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite",
16        spotlight: "spotlight 2s ease .75s 1 forwards",
17      },
18      keyframes: {
19        scroll: {
20          to: {
21            transform: "translate(calc(-50% - 0.5rem))",
22          },
23        },
24        spotlight: {
25          "0%": {
26            opacity: "0",
27            transform: "translate(-72%, -62%) scale(0.5)",
28          },
29          "100%": {
30            opacity: "1",
31            transform: "translate(-50%,-40%) scale(1)",
32          },
33        },
34      },
35    },
36  },
37  plugins: [addVariablesForColors],
38};
39
40// This plugin adds each Tailwind color as a global CSS variable, e.g. var(--gray-200).
41function addVariablesForColors({ addBase, theme }: any) {
42  let allColors = flattenColorPalette(theme("colors"));
43  let newVars = Object.fromEntries(
44    Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
45  );
46
47  addBase({
48    ":root": newVars,
49  });
50}
51
52export default config;

Note: Some advanced components (like Spotlight) require the animations and color variable plugin config shown above.