@tioelvis/next-template 1.0.3

package/README.md

@@ -0,0 +1,42 @@
+# UI Project Generator
+
+A **command-line tool** to scaffold a modern **Next.js + TailwindCSS** project with optional prebuilt UI components and hooks — inspired by [shadcn/ui](https://ui.shadcn.com/).
+
+> ⚠️ This tool does **not** aim to replace or take credit for [shadcn/ui]. It is simply a utility for convenience and faster setup in personal and internal projects. All UI components are sourced directly from shadcn.
+
+---
+
+## 🔌 React Query Included
+
+React Query ([`@tanstack/react-query`](https://tanstack.com/query/latest)) is pre-configured for efficient and scalable data fetching:
+
+- ✅ Includes a `QueryClient` setup in `src/providers/query-provider.tsx`
+- ✅ Wraps the application with `QueryClientProvider` (already wired in your layout)
+- ✅ Enables usage of `useQuery`, `useMutation`, and other React Query hooks out of the box
+
+## ✨ Features
+
+- 🔧 Choose a **project name** and **package manager** (`npm` or `pnpm`)
+- 🎨 Select UI components to include (e.g., Accordion, Alert, Button)
+- ⚡ Automatically sets up:
+  - A **Next.js + TailwindCSS** project
+  - Preselected **UI components** and **hooks**
+  - Project structure under `src/` (with `components/ui`, `hooks`, `lib`, etc.)
+  - **React Query** integration with [`@tanstack/react-query`](https://tanstack.com/query/latest)
+  - All required dependencies and devDependencies
+
+---
+
+## 🛠️ Usage
+
+Using npm:
+
+```bash
+npx @tioelvis/next-template
+```
+
+Using pnpm:
+
+```bash
+pnpx @tioelvis/next-template
+```

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@tioelvis/next-template",
+  "version": "1.0.3",
+  "description": "CLI to scaffold a Next.js + Tailwind project using shadcn/ui components",
+  "type": "module",
+  "bin": {
+    "next-template": "./src/main.js"
+  },
+  "keywords": [
+    "cli",
+    "nextjs",
+    "shadcn",
+    "tailwind",
+    "ui",
+    "project-generator",
+    "scaffolding"
+  ],
+  "author": {
+    "name": "Ti0Elvis",
+    "email": "elvis.veramijares@gmail.com"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Ti0Elvis/next-template"
+  },
+  "dependencies": {
+    "chalk": "^5.4.1",
+    "prompts": "^2.4.2"
+  }
+}

package/src/lib/constants.js

@@ -0,0 +1,28 @@
+export const DEPENDENCIES = [
+  "@tanstack/react-query",
+  "axios",
+  "class-variance-authority",
+  "clsx",
+  "cookies-next",
+  "date-fns",
+  "lucide-react",
+  "next",
+  "next-auth",
+  "next-themes",
+  "react",
+  "react-dom",
+  "tailwind-merge",
+];
+
+export const DEV_DEPENDENCIES = [
+  "@eslint/eslintrc",
+  "@tailwindcss/postcss",
+  "@types/node",
+  "@types/react",
+  "@types/react-dom",
+  "eslint",
+  "eslint-config-next",
+  "tailwindcss",
+  "tw-animate-css",
+  "typescript",
+];

package/src/lib/utils.js

@@ -0,0 +1,141 @@
+import fs from "node:fs";
+import chalk from "chalk";
+import path from "node:path";
+import prompts from "prompts";
+import { execSync } from "node:child_process";
+
+export async function get_prompts() {
+  const responses = await prompts([
+    {
+      type: "text",
+      name: "project_name",
+      message: "What is your project named?",
+      validate: (e) => {
+        if (e === undefined || e.trim() === "") {
+          return chalk.red("⚠️ The name is required");
+        }
+
+        if (!/^[a-zA-Z0-9-_]+$/.test(e.trim())) {
+          return chalk.red(
+            "⚠️ Use only letters, numbers, dashes, and underscores."
+          );
+        }
+
+        return true;
+      },
+    },
+    {
+      type: "select",
+      name: "package_manager",
+      message: "Which package manager would you want to use?",
+      choices: [
+        { title: "npm", value: "npm" },
+        { title: "pnpm", value: "pnpm" },
+      ],
+    },
+    {
+      type: "multiselect",
+      name: "components",
+      message: "Which components do you want to install?",
+      instructions: false,
+      choices: [{ title: "Accordion", value: "accordion" }],
+    },
+    {
+      onCancel: () => {
+        console.log(chalk.yellow("\n👋 Exiting..."));
+        process.exit(0);
+      },
+    },
+  ]);
+
+  return responses;
+}
+
+export function copy_template_files(src, project_path) {
+  try {
+    const entries = fs.readdirSync(src, { withFileTypes: true });
+
+    for (const entry of entries) {
+      const src_path = path.join(src, entry.name);
+      const dest_path = path.join(project_path, entry.name);
+
+      if (entry.isDirectory()) {
+        fs.mkdirSync(dest_path, { recursive: true });
+        copy_template_files(src_path, dest_path);
+      } else {
+        fs.copyFileSync(src_path, dest_path);
+      }
+    }
+  } catch (error) {
+    throw error;
+  }
+}
+
+export function copy_components_files(src, project_path, components) {
+  try {
+    components.forEach((e) => {
+      const component_path = path.resolve(src, `${e}.tsx`);
+      const dest_path = path.resolve(project_path, "src", "components", "ui");
+
+      if (fs.existsSync(component_path) === false) {
+        throw new Error(`Component ${e} not found`);
+      }
+
+      if (fs.existsSync(dest_path) === false) {
+        fs.mkdirSync(dest_path, { recursive: true });
+      }
+
+      fs.copyFileSync(component_path, path.join(dest_path, `${e}.tsx`));
+    });
+  } catch (error) {
+    throw error;
+  }
+}
+
+export function copy_hooks_files(
+  src,
+  components_path,
+  project_path,
+  components
+) {
+  const map = {};
+
+  try {
+    components.forEach((e) => {
+      const hook = map[e];
+      const component_path = path.resolve(components_path, `${e}.tsx`);
+
+      if (fs.existsSync(component_path) === false) {
+        throw new Error(`Component ${e} not found`);
+      }
+
+      if (hook === undefined) {
+        console.warn(`No hook mapping found for component ${e}, skipping.`);
+        return;
+      }
+
+      const hook_path = path.resolve(src, `${hook}.ts`);
+      const dest_path = path.resolve(project_path, "src", "hooks");
+
+      if (fs.existsSync(hook_path) === false) {
+        throw new Error(`Hook ${hook} not found for component ${e}`);
+      }
+
+      if (fs.existsSync(dest_path) === false) {
+        fs.mkdirSync(dest_path, { recursive: true });
+      }
+
+      fs.copyFileSync(hook_path, path.join(dest_path, `${hook}.ts`));
+    });
+  } catch (error) {
+    throw error;
+  }
+}
+
+export function run(cmd, cwd) {
+  try {
+    execSync(cmd, { cwd, stdio: "inherit" });
+  } catch (error) {
+    throw error;
+  }
+}

package/src/main.js

@@ -0,0 +1,107 @@
+#!/usr/bin/env node
+import {
+  copy_components_files,
+  copy_hooks_files,
+  copy_template_files,
+  get_prompts,
+  run,
+} from "./lib/utils.js";
+import fs from "node:fs";
+import chalk from "chalk";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { DEPENDENCIES, DEV_DEPENDENCIES } from "./lib/constants.js";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// Manage Ctrl+C command
+process.on("SIGINT", () => {
+  console.log(chalk.yellow("\n👋 Exiting..."));
+  process.exit(0);
+});
+
+async function main() {
+  let project_path = "";
+
+  try {
+    const { project_name, package_manager, components } = await get_prompts();
+
+    // Creating folder and copying files
+    project_path = path.resolve(project_name);
+
+    if (fs.existsSync(project_path)) {
+      console.error(chalk.red("❌  A folder with that name already exists"));
+      process.exit(1);
+    }
+
+    console.log(
+      chalk.blue("📁 Creating project in:"),
+      chalk.bold(project_name)
+    );
+
+    fs.mkdirSync(project_path, { recursive: true });
+    const template_path = path.join(__dirname, "template");
+    const components_path = path.join(__dirname, "ui", "components");
+    const hooks_path = path.join(__dirname, "ui", "hooks");
+
+    copy_template_files(template_path, project_path);
+    copy_components_files(components_path, project_path, components);
+    copy_hooks_files(hooks_path, components_path, project_path, components);
+
+    // Initialize package.json
+    console.log(chalk.cyan("📦 Initializing and configure package.json..."));
+
+    const package_json = {
+      name: project_name,
+      version: "1.0.0",
+      private: true,
+      scripts: {
+        dev: "next dev --turbopack",
+        build: "next build",
+        start: "next start",
+        lint: "next lint",
+      },
+    };
+
+    const package_json_path = path.join(project_path, "package.json");
+    fs.writeFileSync(package_json_path, JSON.stringify(package_json, null, 2));
+
+    // Install dependencies
+    console.log(chalk.cyan("⬇️ Installing dependencies..."));
+
+    components.forEach((e) => {
+      const component_path = path.resolve(components_path, `${e}.json`);
+
+      if (fs.existsSync(component_path) === false) {
+        throw new Error(`Component ${e} not found`);
+      }
+
+      const json = JSON.parse(fs.readFileSync(component_path, "utf-8"));
+
+      json.forEach((e) => {
+        DEPENDENCIES.push(e);
+      });
+    });
+
+    if (package_manager === "npm") {
+      run(`npm install ${DEPENDENCIES.join(" ")}`, project_path);
+      run(`npm install ${DEV_DEPENDENCIES.join(" ")} -D`, project_path);
+    }
+
+    if (package_manager === "pnpm") {
+      run(`pnpm add ${DEPENDENCIES.join(" ")}`, project_path);
+      run(`pnpm add ${DEV_DEPENDENCIES.join(" ")} -D`, project_path);
+    }
+
+    console.log(chalk.green("\n✅ Project created successfully! 🚀"));
+    process.exit(0);
+  } catch (error) {
+    console.error(chalk.red("❌ Internal error"), error.message);
+    if (fs.existsSync(project_path) === true) {
+      fs.rmSync(project_path, { recursive: true, force: true });
+    }
+    process.exit(1);
+  }
+}
+
+main();

package/src/template/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package/src/template/eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

package/src/template/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/src/template/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

package/src/template/postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;

package/src/template/src/app/globals.css

@@ -0,0 +1,123 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.65rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/src/template/src/app/layout.tsx

@@ -0,0 +1,36 @@
+import "./globals.css";
+import type { Metadata } from "next";
+import { Roboto } from "next/font/google";
+import { QueryProvider } from "@/providers/query.provider";
+import { ThemeProvider } from "@/providers/theme.provider";
+
+const roboto = Roboto({
+  subsets: ["latin"],
+  weight: ["500", "600", "700", "800"],
+});
+
+export const metadata: Metadata = {
+  title: "Untitled",
+};
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export default function Layout({ children }: Readonly<Props>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={roboto.className}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange>
+          <QueryProvider>
+            <main className="w-full min-h-[calc(100vh-4rem)]">{children}</main>
+          </QueryProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

package/src/template/src/app/page.tsx

@@ -0,0 +1,5 @@
+import { Fragment } from "react";
+
+export default function Page() {
+  return <Fragment>Hello world</Fragment>;
+}

package/src/template/src/lib/constants.ts

@@ -0,0 +1 @@
+export const API = process.env.NEXT_PUBLIC_API;

package/src/template/src/lib/custom-axios-error.ts

@@ -0,0 +1,29 @@
+import { isAxiosError } from "axios";
+
+export class CustomAxiosError extends Error {
+  constructor(error: unknown) {
+    let message = "";
+
+    if (isAxiosError(error) === true) {
+      const status = error.response?.status ?? 500;
+      const p = error.response?.data?.message;
+
+      if (status === 401 || status === 403) {
+        message = "Access denied";
+      } else if (p !== undefined) {
+        message =
+          Array.isArray(p?.message) === true ? p.message[0] : p.message ?? p;
+      } else {
+        message = "Server error";
+      }
+    } else if (error instanceof Error) {
+      message = error.message;
+    } else {
+      message = "Unknown error";
+    }
+
+    super(message);
+    this.name = "CustomAxiosError";
+    Object.setPrototypeOf(this, CustomAxiosError.prototype);
+  }
+}

package/src/template/src/lib/request.ts

@@ -0,0 +1,10 @@
+import axios from "axios";
+import { API } from "@/lib/constants";
+
+export const request = axios.create({
+  withCredentials: true,
+  baseURL: API,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});

package/src/template/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { twMerge } from "tailwind-merge";
+import { clsx, type ClassValue } from "clsx";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/template/src/providers/query.provider.tsx

@@ -0,0 +1,12 @@
+"use client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const client = new QueryClient();
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export function QueryProvider({ children }: Readonly<Props>) {
+  return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+}

package/src/template/src/providers/theme.provider.tsx

@@ -0,0 +1,8 @@
+"use client";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+type Props = React.ComponentProps<typeof NextThemesProvider>;
+
+export function ThemeProvider({ children, ...props }: Readonly<Props>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

package/src/template/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/src/ui/components/accordion.json

@@ -0,0 +1 @@
+["@radix-ui/react-accordion"]

package/src/ui/components/accordion.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring cursor-pointer focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}>
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}>
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/ui/lib/utils.ts

@@ -0,0 +1,6 @@
+import { twMerge } from "tailwind-merge";
+import { clsx, type ClassValue } from "clsx";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/ui/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}