virastack 0.0.1 → 1.0.1

package/templates/tanstack/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+allowBuilds:
+  esbuild: true
+  lightningcss: true

package/templates/tanstack/public/llms.txt

@@ -0,0 +1,86 @@
+# ViraStack Start — TanStack Start Edition
+
+> Premium TanStack Start + 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 TanStack Router file-based routing with type-safe loaders, nested layouts, and SSR via TanStack Start. 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: TanStack Start, TanStack Router, React 19, Tailwind CSS 4, TypeScript (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` (`VITE_*` public vars)
+- Tooling: ESLint 9, Prettier 3, Husky, Knip, Commitlint, Changesets, Vite 8
+- 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, test runner, CSP
+
+## Docs
+- [Repository (GitHub)](https://github.com/virastack/start): CLI and templates
+- [README](https://github.com/virastack/start/tree/main/templates/tanstack): 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/): ViraStack
+
+## Key Files & Entry Points
+- [`src/routes/__root.tsx`](https://github.com/virastack/start/blob/main/templates/tanstack/src/routes/__root.tsx): Root route, document shell, providers, SEO head
+- [`src/routes/index.tsx`](https://github.com/virastack/start/blob/main/templates/tanstack/src/routes/index.tsx): Home route → `<LandingPage />`
+- [`src/routes/robots[.]txt.ts`](https://github.com/virastack/start/blob/main/templates/tanstack/src/routes/robots%5B.%5Dtxt.ts): Dynamic robots.txt from `siteConfig`
+- [`src/routes/sitemap[.]xml.ts`](https://github.com/virastack/start/blob/main/templates/tanstack/src/routes/sitemap%5B.%5Dxml.ts): Dynamic sitemap from `siteConfig`
+- [`src/routes/site[.]webmanifest.ts`](https://github.com/virastack/start/blob/main/templates/tanstack/src/routes/site%5B.%5Dwebmanifest.ts): Dynamic web manifest from `siteConfig`
+- [`src/start.ts`](https://github.com/virastack/start/blob/main/templates/tanstack/src/start.ts): Global request middleware (baseline security headers)
+- [`src/router.tsx`](https://github.com/virastack/start/blob/main/templates/tanstack/src/router.tsx): Router factory + TanStack Query SSR integration
+- [`src/env.ts`](https://github.com/virastack/start/blob/main/templates/tanstack/src/env.ts): Zod-validated environment schema (`VITE_*` public vars)
+- [`src/config/site.config.ts`](https://github.com/virastack/start/blob/main/templates/tanstack/src/config/site.config.ts): Site config (name, URL, links)
+- [`src/config/seo.config.ts`](https://github.com/virastack/start/blob/main/templates/tanstack/src/config/seo.config.ts): Default SEO meta helpers
+- [`src/lib/api.ts`](https://github.com/virastack/start/blob/main/templates/tanstack/src/lib/api.ts): Native `fetch` wrapper with retry & typed `ApiError`
+- [`src/lib/query-client.ts`](https://github.com/virastack/start/blob/main/templates/tanstack/src/lib/query-client.ts): QueryClient factory & defaults
+- [`src/providers/Providers.tsx`](https://github.com/virastack/start/blob/main/templates/tanstack/src/providers/Providers.tsx): App-wide providers (Theme, Nuqs, Toaster)
+- [`vite.config.ts`](https://github.com/virastack/start/blob/main/templates/tanstack/vite.config.ts): Vite + TanStack Start + Tailwind
+
+## Landing Feature (demo — delete when building)
+Canonical tree under `src/features/landing/`. Home route composes `LandingPage`.
+
+- [`src/features/landing/index.ts`](https://github.com/virastack/start/blob/main/templates/tanstack/src/features/landing/index.ts): Public export (`LandingPage`)
+- [`src/features/landing/components/LandingPage.tsx`](https://github.com/virastack/start/blob/main/templates/tanstack/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/tanstack/src/features/landing/components/Hero.tsx): Hero section
+- [`src/features/landing/components/Features.tsx`](https://github.com/virastack/start/blob/main/templates/tanstack/src/features/landing/components/Features.tsx): Feature grid
+- [`src/features/landing/components/Showcase.tsx`](https://github.com/virastack/start/blob/main/templates/tanstack/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/tanstack/src/features/landing/components/UsersDemo.tsx): TanStack Query + `nuqs` demo
+- [`src/features/landing/components/CartDemo.tsx`](https://github.com/virastack/start/blob/main/templates/tanstack/src/features/landing/components/CartDemo.tsx): Zustand demo
+- [`src/features/landing/components/ProjectFormDemo.tsx`](https://github.com/virastack/start/blob/main/templates/tanstack/src/features/landing/components/ProjectFormDemo.tsx): RHF + Zod demo
+
+Quick start: delete `src/features/landing`, replace `src/routes/index.tsx`, keep `components/layout` if you still want chrome.
+
+## UI & Shared Layers
+- [`src/components/ui`](https://github.com/virastack/start/tree/main/templates/tanstack/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/tanstack/src/components/layout): Header / Footer (reusable; Header accepts optional `links`)
+- [`src/components/shared`](https://github.com/virastack/start/tree/main/templates/tanstack/src/components/shared): Cross-feature components (ThemeToggle, NotFound, DefaultCatchBoundary)
+- [`src/hooks`](https://github.com/virastack/start/tree/main/templates/tanstack/src/hooks), [`src/stores`](https://github.com/virastack/start/tree/main/templates/tanstack/src/stores), [`src/schemas`](https://github.com/virastack/start/tree/main/templates/tanstack/src/schemas): Shared barrels (promote via Rule of Three)
+- [`src/helpers`](https://github.com/virastack/start/tree/main/templates/tanstack/src/helpers): Shared helpers
+- [`src/styles/tailwind.css`](https://github.com/virastack/start/blob/main/templates/tanstack/src/styles/tailwind.css): Tailwind v4 entry + design tokens
+- Assets: [`public/logo.webp`](https://github.com/virastack/start/blob/main/templates/tanstack/public/logo.webp), [`public/og.png`](https://github.com/virastack/start/blob/main/templates/tanstack/public/og.png), [`public/favicon.ico`](https://github.com/virastack/start/blob/main/templates/tanstack/public/favicon.ico)
+
+## Customization & Imports
+- Search the project for `FIXME:` (site config, 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
+- [TanStack Start Docs](https://tanstack.com/start/latest): Routing, SSR, server functions
+- [TanStack Router](https://tanstack.com/router/latest): File-based routing, loaders, type safety
+- [React](https://react.dev/): Modern React APIs
+- [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/tanstack/src/components/shared/DefaultCatchBoundary.tsx

@@ -0,0 +1,36 @@
+import type { ErrorComponentProps } from "@tanstack/react-router";
+import { Link, rootRouteId, useMatch, useRouter } from "@tanstack/react-router";
+
+import { Button } from "@/components/ui/button";
+
+export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
+  const router = useRouter();
+  const isRoot = useMatch({
+    strict: false,
+    select: (state) => state.id === rootRouteId,
+  });
+
+  console.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={() => router.invalidate()}>Try again</Button>
+        {isRoot ? (
+          <Button variant="outline" nativeButton={false} render={<Link to="/" />}>
+            Go home
+          </Button>
+        ) : (
+          <Button variant="outline" onClick={() => window.history.back()}>
+            Go back
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/tanstack/src/components/shared/NotFound.tsx

@@ -0,0 +1,18 @@
+import { Link } from "@tanstack/react-router";
+
+import { Button } from "@/components/ui/button";
+
+export 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 to="/" />}>
+        Go home
+      </Button>
+    </div>
+  );
+}

package/templates/tanstack/src/components/shared/Pending.tsx

@@ -0,0 +1,13 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+/** Route-level pending UI (TanStack equivalent of Next.js `loading.tsx`). */
+export function Pending() {
+  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/tanstack/src/components/shared/ThemeToggle.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { MoonIcon, SunIcon } from "lucide-react";
+import { useIsClient } from "usehooks-ts";
+
+import { useTheme } from "@/providers/ThemeProvider";
+
+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/tanstack/src/components/ui/avatar.tsx

@@ -0,0 +1,52 @@
+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 (
+    <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/tanstack/src/components/ui/button.tsx

@@ -0,0 +1,47 @@
+import type { ComponentProps } from "react";
+
+import { Button as BaseButton } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+import 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/tanstack/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/tanstack/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/tanstack/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/tanstack/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}
+    />
+  );
+}

package/templates/tanstack/src/components/ui/label.tsx

@@ -0,0 +1,17 @@
+import type { ComponentProps } from "react";
+
+import { cn } from "@/lib/utils";
+
+export function Label({ className, ...props }: ComponentProps<"label">) {
+  return (
+    <label
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none",
+        "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/templates/tanstack/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+
+import { cn } from "@/lib/utils";
+
+export function Skeleton({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-accent", className)}
+      {...props}
+    />
+  );
+}

package/templates/tanstack/src/components/ui/table.tsx

@@ -0,0 +1,94 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+      <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
+    </div>
+  ),
+);
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className,
+    )}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
+));
+TableCaption.displayName = "TableCaption";
+
+export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption };