Once a React project is created, you can follow given steps to configure FlaminUI in Your project.
Install dependencies
1npm i framer-motion clsx tailwind-merge tw-mergeAdd utility file
Create a file at @/lib/cn.ts with the follwing content
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 TypeScript
Add the following content in your typescript configuration
tsconfig.json
1{
2 "compilerOptions": {
3 "lib": ["dom", "dom.iterable", "esnext"],
4 "allowJs": true,
5 "skipLibCheck": true,
6 "strict": true,
7 "noEmit": true,
8 "esModuleInterop": true,
9 "module": "esnext",
10 "moduleResolution": "bundler",
11 "resolveJsonModule": true,
12 "isolatedModules": true,
13 "jsx": "preserve",
14 "incremental": true,
15 "plugins": [
16 {
17 "name": "next"
18 }
19 ],
20 "baseUrl": "./",
21 "paths": {
22 "@/*": ["./*"],
23 "@components/*": ["lib/components/*"],
24 "@lib/*": ["lib/*"],
25 "@types/*": ["lib/types/*"],
26 "@src/*":["components/*"]
27 },
28 "target": "ES5",
29 },
30 "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "theme.config.tsx","next.config.js","**/*.mdx"],
31 "exclude": ["node_modules"]
32}Start Using
You're all set to use FlaminUI in your porject, Now you may refer to components docs for more information.