nxt-component

Generate Next.js Component

Create a fully typed Next.js + Tailwind component based on the name provided in $ARGUMENTS.

Parse $ARGUMENTS:

• First word → component name (PascalCase). If not PascalCase, convert it.
• Second word (optional) → custom output path. If not provided, detect automatically.

Step 1 — Detect Project Conventions

Search for existing component files:

Glob: {components,src/components}/**/*.{tsx,jsx}

Read 2–3 existing component files and detect:

Function style:

• export default function Name() → use named function declaration
• const Name = () => or export const Name → use arrow function
• Default to arrow function if no components found

Folder structure:

• If components are in individual folders: components/Button/Button.tsx + components/Button/index.ts → use folder structure
• If components are flat files: components/Button.tsx → use single file

Import style:

• Check how className is used — plain strings or cn()/clsx()/twMerge() utility
• If cn or clsx is used, import and use it in the new component

Output path:

• If second argument given → use that path
• If src/components/ exists → use src/components/
• If components/ exists → use components/
• Otherwise → create components/ at project root

Step 2 — Check for Tailwind Config

Read tailwind.config.ts or tailwind.config.js if present:

• Note any custom colors, spacing, or font tokens to prefer in the component

Step 3 — Generate Component

Generate the component following the detected conventions. The component must:

• Accept a className prop for external style overrides
• Use TypeScript interface for props (never type, always interface)
• Include children prop if it makes sense for the component name (e.g. Button, Card, Modal)
• Use semantic HTML elements (e.g. <button> for Button, <section> for Section)
• Export the props interface alongside the component

Template (arrow function, single file):

import { cn } from "@/lib/utils" // only if cn utility detected

interface {ComponentName}Props {
  className?: string
  children?: React.ReactNode
  // additional props based on component name
}

export const {ComponentName} = ({ className, children, ...props }: {ComponentName}Props) => {
  return (
    <div className={cn("", className)} {...props}>
      {children}
    </div>
  )
}