virastack 0.0.1 → 1.0.1

package/templates/nextjs/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+ignoredBuiltDependencies:
+  - sharp
+  - unrs-resolver

package/templates/nextjs/postcss.config.mjs

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

package/templates/nextjs/public/llms.txt

@@ -0,0 +1,96 @@
+# ViraStack Start — Next.js Edition
+
+> Premium Next.js 16 + React 19 + Tailwind CSS 4 boilerplate focused on clean architecture, UI/UX, and agent-ready developer experience. Auth, database/ORM, i18n, and testing are intentionally omitted — bring the solution that fits your project.
+
+Built on the App Router with Server/Client Components, streaming, and the Metadata API. UI primitives use **Base UI** (unstyled, accessible) styled with Tailwind CSS 4 design tokens. State is split by job: TanStack Query for server state, Zustand for client state, `nuqs` for URL state. Forms use React Hook Form + Zod. The home route renders a deletable `features/landing` demo that follows the canonical ViraStack feature tree. **ViraStack AI** (`@virastack/ai`) adds agent rules on scaffold; design skills come from [emilkowalski/skills](https://github.com/emilkowalski/skills) and [make-interfaces-feel-better](https://github.com/jakubkrehel/make-interfaces-feel-better).
+
+- Tech stack: Next.js 16, React 19, Tailwind CSS 4, TypeScript 5 (strict + `noUncheckedIndexedAccess`), Node.js `>=20.9`
+- UI: Base UI, Framer Motion, Sonner, Lucide React, `next-themes`, `class-variance-authority`
+- Data & state: TanStack Query 5, Zustand, `nuqs`
+- Forms: React Hook Form + Zod (+ `@hookform/resolvers`)
+- API: Native `fetch` wrapper in `src/lib/api.ts` (`ApiError` with `message`, `status`, `data`); Axios is optional, not installed
+- Env: Hand-rolled Zod schema in `src/env.ts` (no `@t3-oss/env-nextjs`)
+- Tooling: ESLint 9, Prettier 3, Husky, Knip, Commitlint, Changesets, `@next/bundle-analyzer`
+- Quality scripts: `pnpm typecheck`, `pnpm lint` / `lint:ci`, `pnpm knip`, `pnpm build`
+- ViraStack AI (via `npx @virastack/ai init`): `AGENTS.md`, `CLAUDE.md`, `.cursor/rules/*.mdc`, `docs/*`
+- Not included by default: Auth, DB/ORM, i18n (`next-intl` not installed), test runner, CSP
+
+## Docs
+- [Repository (GitHub)](https://github.com/virastack/start): CLI and templates
+- [README](https://github.com/virastack/start/tree/main/templates/nextjs): Features, structure, and conventions
+- [Architecture guide](https://github.com/virastack/ai/blob/main/templates/core/docs/architecture-guide.md): Placement rules and import conventions
+- [Product docs](https://www.virastack.com/nextjs-boilerplate/): ViraStack Next.js boilerplate
+
+## Key Files & Entry Points
+- [`src/app/layout.tsx`](https://github.com/virastack/start/blob/main/templates/nextjs/src/app/layout.tsx): Root layout, fonts, providers
+- [`src/app/page.tsx`](https://github.com/virastack/start/blob/main/templates/nextjs/src/app/page.tsx): Home route → `<LandingPage />`
+- [`src/app/loading.tsx`](https://github.com/virastack/start/blob/main/templates/nextjs/src/app/loading.tsx): Route-level skeleton
+- [`src/app/error.tsx`](https://github.com/virastack/start/blob/main/templates/nextjs/src/app/error.tsx): Route-level error boundary
+- [`src/app/not-found.tsx`](https://github.com/virastack/start/blob/main/templates/nextjs/src/app/not-found.tsx): 404 boundary
+- [`src/app/global-error.tsx`](https://github.com/virastack/start/blob/main/templates/nextjs/src/app/global-error.tsx): Root error boundary
+- [`src/app/robots.ts`](https://github.com/virastack/start/blob/main/templates/nextjs/src/app/robots.ts): Robots configuration
+- [`src/app/sitemap.ts`](https://github.com/virastack/start/blob/main/templates/nextjs/src/app/sitemap.ts): Sitemap generation
+- [`src/app/manifest.ts`](https://github.com/virastack/start/blob/main/templates/nextjs/src/app/manifest.ts): Web app manifest (titles from `siteConfig`)
+- [`src/proxy.ts`](https://github.com/virastack/start/blob/main/templates/nextjs/src/proxy.ts): Next.js 16 network boundary scaffold (passthrough)
+- [`src/env.ts`](https://github.com/virastack/start/blob/main/templates/nextjs/src/env.ts): Zod-validated environment schema
+- [`src/config/site.config.ts`](https://github.com/virastack/start/blob/main/templates/nextjs/src/config/site.config.ts): Site config (name, URL, links)
+- [`src/config/seo.config.ts`](https://github.com/virastack/start/blob/main/templates/nextjs/src/config/seo.config.ts): Default Metadata object (OG/icons via `/og.png`, `/logo.webp`)
+- [`src/lib/api.ts`](https://github.com/virastack/start/blob/main/templates/nextjs/src/lib/api.ts): Native `fetch` wrapper with retry & typed `ApiError`
+- [`src/lib/query-client.ts`](https://github.com/virastack/start/blob/main/templates/nextjs/src/lib/query-client.ts): QueryClient factory & defaults
+- [`src/providers/Providers.tsx`](https://github.com/virastack/start/blob/main/templates/nextjs/src/providers/Providers.tsx): App-wide providers (Theme, Query, Nuqs, Toaster)
+- [`next.config.ts`](https://github.com/virastack/start/blob/main/templates/nextjs/next.config.ts): Next config + baseline security headers (no CSP by default)
+
+## Landing Feature (demo — delete when building)
+Canonical tree under `src/features/landing/`. Home page composes `LandingPage`.
+
+- [`src/features/landing/index.ts`](https://github.com/virastack/start/blob/main/templates/nextjs/src/features/landing/index.ts): Public export (`LandingPage`)
+- [`src/features/landing/components/LandingPage.tsx`](https://github.com/virastack/start/blob/main/templates/nextjs/src/features/landing/components/LandingPage.tsx): Page composition (Header + sections + Footer)
+- [`src/features/landing/components/Hero.tsx`](https://github.com/virastack/start/blob/main/templates/nextjs/src/features/landing/components/Hero.tsx): Hero section
+- [`src/features/landing/components/Features.tsx`](https://github.com/virastack/start/blob/main/templates/nextjs/src/features/landing/components/Features.tsx): Feature grid
+- [`src/features/landing/components/Showcase.tsx`](https://github.com/virastack/start/blob/main/templates/nextjs/src/features/landing/components/Showcase.tsx): Stack demos host (Query, Zustand, forms, nuqs)
+- [`src/features/landing/components/UsersDemo.tsx`](https://github.com/virastack/start/blob/main/templates/nextjs/src/features/landing/components/UsersDemo.tsx): TanStack Query + `nuqs` demo
+- [`src/features/landing/components/CartDemo.tsx`](https://github.com/virastack/start/blob/main/templates/nextjs/src/features/landing/components/CartDemo.tsx): Zustand demo
+- [`src/features/landing/components/ProjectFormDemo.tsx`](https://github.com/virastack/start/blob/main/templates/nextjs/src/features/landing/components/ProjectFormDemo.tsx): RHF + Zod demo
+- [`src/features/landing/api/get-users.api.ts`](https://github.com/virastack/start/blob/main/templates/nextjs/src/features/landing/api/get-users.api.ts): Feature API function
+- [`src/features/landing/hooks/use-users.ts`](https://github.com/virastack/start/blob/main/templates/nextjs/src/features/landing/hooks/use-users.ts): Feature TanStack Query hook
+- [`src/features/landing/stores/counter.store.ts`](https://github.com/virastack/start/blob/main/templates/nextjs/src/features/landing/stores/counter.store.ts): Feature Zustand store
+- [`src/features/landing/schemas/project.schema.ts`](https://github.com/virastack/start/blob/main/templates/nextjs/src/features/landing/schemas/project.schema.ts): Feature Zod schema
+- [`src/features/landing/data/features.data.tsx`](https://github.com/virastack/start/blob/main/templates/nextjs/src/features/landing/data/features.data.tsx): Feature static data
+- [`src/features/landing/helpers/`](https://github.com/virastack/start/tree/main/templates/nextjs/src/features/landing/helpers): Feature helpers (motion tokens, initials)
+- [`src/features/landing/icons/`](https://github.com/virastack/start/tree/main/templates/nextjs/src/features/landing/icons): Brand SVGs used only by the landing demo
+- [`src/features/landing/types/user.types.ts`](https://github.com/virastack/start/blob/main/templates/nextjs/src/features/landing/types/user.types.ts): Feature types
+
+Quick start: delete `src/features/landing`, replace `src/app/page.tsx`, keep `components/layout` if you still want chrome.
+
+## UI & Shared Layers
+- [`src/components/ui`](https://github.com/virastack/start/tree/main/templates/nextjs/src/components/ui): Base UI primitives (Button, Input, Field, Dialog, Tabs, Skeleton, Label, Avatar, Table)
+- [`src/components/layout`](https://github.com/virastack/start/tree/main/templates/nextjs/src/components/layout): Header / Footer (reusable; Header accepts optional `links`)
+- [`src/components/shared`](https://github.com/virastack/start/tree/main/templates/nextjs/src/components/shared): Cross-feature components (ThemeToggle)
+- [`src/hooks`](https://github.com/virastack/start/tree/main/templates/nextjs/src/hooks), [`src/stores`](https://github.com/virastack/start/tree/main/templates/nextjs/src/stores), [`src/schemas`](https://github.com/virastack/start/tree/main/templates/nextjs/src/schemas): Shared barrels (promote via Rule of Three)
+- [`src/helpers`](https://github.com/virastack/start/tree/main/templates/nextjs/src/helpers): Shared helpers
+- [`src/styles/tailwind.css`](https://github.com/virastack/start/blob/main/templates/nextjs/src/styles/tailwind.css): Tailwind v4 entry + design tokens
+- Assets: [`public/logo.webp`](https://github.com/virastack/start/blob/main/templates/nextjs/public/logo.webp), [`public/og.png`](https://github.com/virastack/start/blob/main/templates/nextjs/public/og.png), [`public/favicon.ico`](https://github.com/virastack/start/blob/main/templates/nextjs/public/favicon.ico)
+
+## Customization & Imports
+- Search the project for `FIXME:` (site config, remote images, auth attachment on the API client).
+- Prefer short path aliases: `@/ui`, `@/hooks`, `@/schemas`, `@/layout` over long forms. Prefer feature-local imports under `@/features/[feature]/…` for demo-scoped code.
+- Default scope is `features/[feature]/` — promote to global `src/` only when a second feature needs it. No cross-feature imports.
+
+## ViraStack AI
+- Install or refresh: `npx @virastack/ai init --force`
+- `AGENTS.md`: Agent operating guide (all agents)
+- `CLAUDE.md`: Claude Code entry point (`@AGENTS.md`)
+- `.cursor/rules/*.mdc`: Scoped coding rules (Cursor auto-loads)
+- `docs/architecture-guide.md`, `docs/MEMORIES.md`: Architecture and project memory
+- Skills: [emilkowalski/skills](https://github.com/emilkowalski/skills) (7 design-engineering skills) + [make-interfaces-feel-better](https://github.com/jakubkrehel/make-interfaces-feel-better)
+- Package: [`@virastack/ai`](https://github.com/virastack/ai)
+
+## External References
+- [Next.js Docs](https://nextjs.org/docs): App Router, Server/Client Components, routing, metadata, images, fonts
+- [React](https://react.dev/): Modern React APIs and RSC foundations
+- [Tailwind CSS v4](https://tailwindcss.com/): Design tokens & utility-first styling
+- [Base UI](https://base-ui.com/): Unstyled, accessible React components
+- [TanStack Query](https://tanstack.com/query/latest): Server-state syncing & caching
+- [nuqs](https://nuqs.dev/): Type-safe URL search param state
+- [Zod](https://zod.dev/): Runtime validation and parsing
+- [ViraStack AI](https://github.com/virastack/ai): Shared agent rules package (`@virastack/ai`)

package/templates/nextjs/src/app/error.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useEffect } from "react";
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div className="mx-auto flex flex-1 flex-col items-center justify-center gap-4 px-6 py-24 text-center">
+      <h1 className="text-2xl font-semibold tracking-tight">Something went wrong</h1>
+      <p className="max-w-md text-sm text-muted-foreground">
+        An unexpected error occurred while rendering this page. You can try again, or head back to
+        the homepage.
+      </p>
+      <div className="flex gap-3">
+        <Button onClick={reset}>Try again</Button>
+        <Button variant="outline" nativeButton={false} render={<Link href="/" />}>
+          Go home
+        </Button>
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/src/app/global-error.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  return (
+    <html lang="en" data-scroll-behavior="smooth">
+      <body className="flex min-h-screen flex-col items-center justify-center gap-4 px-6 text-center">
+        <h1 className="text-2xl font-semibold tracking-tight">A critical error occurred</h1>
+        <p className="max-w-md text-sm text-neutral-500">
+          The application failed to render. Please try again.
+        </p>
+        <button
+          onClick={reset}
+          className="rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-white"
+        >
+          Try again
+        </button>
+      </body>
+    </html>
+  );
+}

package/templates/nextjs/src/app/layout.tsx

@@ -0,0 +1,37 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+
+import { NuqsAdapter } from "nuqs/adapters/next/app";
+
+import { defaultMetadata } from "@/config/seo.config";
+
+import { Providers } from "@/providers";
+
+import "@/styles/tailwind.css";
+
+const inter = Inter({
+  variable: "--font-inter",
+  subsets: ["latin"],
+  display: "swap",
+  preload: true,
+  adjustFontFallback: true,
+});
+
+export const metadata: Metadata = defaultMetadata;
+
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html
+      lang="en"
+      className={`${inter.variable} h-full`}
+      suppressHydrationWarning
+      data-scroll-behavior="smooth"
+    >
+      <body className="flex min-h-full flex-col antialiased" suppressHydrationWarning>
+        <NuqsAdapter>
+          <Providers>{children}</Providers>
+        </NuqsAdapter>
+      </body>
+    </html>
+  );
+}

package/templates/nextjs/src/app/loading.tsx

@@ -0,0 +1,12 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function Loading() {
+  return (
+    <div className="mx-auto flex w-full max-w-3xl flex-1 flex-col items-center gap-4 px-6 py-24">
+      <Skeleton className="h-10 w-2/3" />
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-5/6" />
+      <Skeleton className="mt-6 h-40 w-full" />
+    </div>
+  );
+}

package/templates/nextjs/src/app/manifest.ts

@@ -0,0 +1,22 @@
+import type { MetadataRoute } from "next";
+
+import { siteConfig } from "@/config/site.config";
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: siteConfig.name,
+    short_name: siteConfig.name,
+    description: siteConfig.description,
+    start_url: "/",
+    display: "standalone",
+    background_color: "#ffffff",
+    theme_color: "#ffffff",
+    icons: [
+      {
+        src: "/logo.webp",
+        sizes: "96x96",
+        type: "image/webp",
+      },
+    ],
+  };
+}

package/templates/nextjs/src/app/not-found.tsx

@@ -0,0 +1,18 @@
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+
+export default function NotFound() {
+  return (
+    <div className="mx-auto flex flex-1 flex-col items-center justify-center gap-4 px-6 py-24 text-center">
+      <p className="text-sm font-medium text-muted-foreground">404</p>
+      <h1 className="text-2xl font-semibold tracking-tight">Page not found</h1>
+      <p className="max-w-md text-sm text-muted-foreground">
+        The page you&apos;re looking for doesn&apos;t exist or has been moved.
+      </p>
+      <Button nativeButton={false} render={<Link href="/" />}>
+        Go home
+      </Button>
+    </div>
+  );
+}

package/templates/nextjs/src/app/page.tsx

@@ -0,0 +1,5 @@
+import { LandingPage } from "@/features/landing";
+
+export default function HomePage() {
+  return <LandingPage />;
+}

package/templates/nextjs/src/app/robots.ts

@@ -0,0 +1,13 @@
+import type { MetadataRoute } from "next";
+
+import { siteConfig } from "@/config/site.config";
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: "*",
+      allow: "/",
+    },
+    sitemap: `${siteConfig.url}/sitemap.xml`,
+  };
+}

package/templates/nextjs/src/app/sitemap.ts

@@ -0,0 +1,14 @@
+import type { MetadataRoute } from "next";
+
+import { siteConfig } from "@/config/site.config";
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  return [
+    {
+      url: siteConfig.url,
+      lastModified: new Date(),
+      changeFrequency: "monthly",
+      priority: 1,
+    },
+  ];
+}

package/templates/nextjs/src/components/shared/ThemeToggle.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { MoonIcon, SunIcon } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useIsClient } from "usehooks-ts";
+
+import { Button } from "@/components/ui/button";
+
+export function ThemeToggle() {
+  const { resolvedTheme, setTheme } = useTheme();
+  const isClient = useIsClient();
+
+  if (!isClient) {
+    return <Button variant="outline" size="icon" aria-hidden className="size-8 opacity-0" />;
+  }
+
+  const isDark = resolvedTheme === "dark";
+
+  return (
+    <Button
+      variant="outline"
+      size="icon"
+      className="size-8"
+      aria-label={isDark ? "Switch to light theme" : "Switch to dark theme"}
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+    >
+      {isDark ? <SunIcon className="size-3.5" /> : <MoonIcon className="size-3.5" />}
+    </Button>
+  );
+}

package/templates/nextjs/src/components/ui/avatar.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Avatar = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+      {...props}
+    />
+  ),
+);
+Avatar.displayName = "Avatar";
+
+const AvatarImage = React.forwardRef<
+  HTMLImageElement,
+  React.ImgHTMLAttributes<HTMLImageElement> & {
+    onLoadingStatusChange?: (status: "loading" | "loaded" | "error") => void;
+  }
+>(({ className, src, alt = "", ...props }, ref) => {
+  const [status, setStatus] = React.useState<"loading" | "loaded" | "error">("loading");
+
+  return (
+    // Avatar primitives accept arbitrary remote URLs; next/image needs a configured domain list.
+    // eslint-disable-next-line @next/next/no-img-element -- intentional for flexible avatar sources
+    <img
+      ref={ref}
+      src={src}
+      alt={alt}
+      className={cn("aspect-square h-full w-full", status !== "loaded" && "hidden", className)}
+      onLoad={() => setStatus("loaded")}
+      onError={() => setStatus("error")}
+      {...props}
+    />
+  );
+});
+AvatarImage.displayName = "AvatarImage";
+
+const AvatarFallback = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "flex h-full w-full items-center justify-center rounded-full bg-muted text-xs",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+AvatarFallback.displayName = "AvatarFallback";
+
+export { Avatar, AvatarImage, AvatarFallback };

package/templates/nextjs/src/components/ui/button.tsx

@@ -0,0 +1,46 @@
+import type { ComponentProps } from "react";
+
+import { Button as BaseButton } from "@base-ui/react/button";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+export const buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20",
+        outline:
+          "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export type ButtonProps = ComponentProps<typeof BaseButton> & VariantProps<typeof buttonVariants>;
+
+export function Button({ className, variant, size, ...props }: ButtonProps) {
+  return (
+    <BaseButton
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}

package/templates/nextjs/src/components/ui/dialog.tsx

@@ -0,0 +1,107 @@
+import type { ComponentProps } from "react";
+
+import { XIcon } from "lucide-react";
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+
+import { cn } from "@/lib/utils";
+
+export function Dialog(props: ComponentProps<typeof BaseDialog.Root>) {
+  return <BaseDialog.Root data-slot="dialog" {...props} />;
+}
+
+export function DialogTrigger(props: ComponentProps<typeof BaseDialog.Trigger>) {
+  return <BaseDialog.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+export function DialogClose(props: ComponentProps<typeof BaseDialog.Close>) {
+  return <BaseDialog.Close data-slot="dialog-close" {...props} />;
+}
+
+export function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: ComponentProps<typeof BaseDialog.Popup> & { showCloseButton?: boolean }) {
+  return (
+    <BaseDialog.Portal>
+      <BaseDialog.Backdrop
+        data-slot="dialog-backdrop"
+        className={cn(
+          "fixed inset-0 z-50 bg-black/50",
+          "data-[ending-style]:opacity-0 data-[starting-style]:opacity-0",
+          "transition-opacity duration-150",
+        )}
+      />
+      <BaseDialog.Popup
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4",
+          "rounded-lg border border-border bg-background p-6 shadow-lg",
+          "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
+          "data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+          "transition-all duration-150",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <BaseDialog.Close
+            data-slot="dialog-close"
+            className={cn(
+              "absolute top-4 right-4 rounded-xs opacity-70 transition-opacity outline-none",
+              "hover:opacity-100 focus-visible:ring-[3px] focus-visible:ring-ring/50",
+            )}
+          >
+            <XIcon className="size-4" />
+            <span className="sr-only">Close</span>
+          </BaseDialog.Close>
+        )}
+      </BaseDialog.Popup>
+    </BaseDialog.Portal>
+  );
+}
+
+export function DialogHeader({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+export function DialogFooter({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      {...props}
+    />
+  );
+}
+
+export function DialogTitle({ className, ...props }: ComponentProps<typeof BaseDialog.Title>) {
+  return (
+    <BaseDialog.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+export function DialogDescription({
+  className,
+  ...props
+}: ComponentProps<typeof BaseDialog.Description>) {
+  return (
+    <BaseDialog.Description
+      data-slot="dialog-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}

package/templates/nextjs/src/components/ui/field.tsx

@@ -0,0 +1,24 @@
+import type { ComponentProps } from "react";
+
+import { cn } from "@/lib/utils";
+
+export function FieldDescription({ className, ...props }: ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn("text-sm font-normal text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export function FieldError({ className, ...props }: ComponentProps<"p">) {
+  return (
+    <p
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-sm font-normal text-destructive", className)}
+      {...props}
+    />
+  );
+}

package/templates/nextjs/src/components/ui/index.ts

@@ -0,0 +1,27 @@
+export { Button, buttonVariants, type ButtonProps } from "@/components/ui/button";
+export { FieldDescription, FieldError } from "@/components/ui/field";
+export { Input } from "@/components/ui/input";
+export { Label } from "@/components/ui/label";
+export { Skeleton } from "@/components/ui/skeleton";
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+export { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+export { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";

package/templates/nextjs/src/components/ui/input.tsx

@@ -0,0 +1,23 @@
+import type { ComponentProps } from "react";
+
+import { Input as BaseInput } from "@base-ui/react/input";
+
+import { cn } from "@/lib/utils";
+
+export function Input({ className, ...props }: ComponentProps<typeof BaseInput>) {
+  return (
+    <BaseInput
+      data-slot="input"
+      className={cn(
+        "flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none",
+        "placeholder:text-muted-foreground",
+        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+        "file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}