better-ts-stack 1.1.3 → 2.0.0

package/templates/frontend/nextjs/app/page.tsx.hbs

@@ -1,97 +1,97 @@
-import Link from "next/link";
-
-import { ArrowRight } from "lucide-react";
-
-import { buttonVariants } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { cn } from "@/lib/utils";
-
-const featureList = [
-  "Next.js 16 App Router",
-  "React 19 and TypeScript",
-  "Tailwind CSS v4",
-  {{#if useAuth}}"Better Auth-ready session flow",{{/if}}
-  {{#if (eq database "prisma")}}"Prisma database tooling",{{/if}}
-  {{#if (eq database "drizzle")}}"Drizzle database tooling",{{/if}}
-];
-
-export default function Home() {
-  return (
-    <main className="min-h-screen bg-background text-foreground">
-      <div className="mx-auto flex min-h-screen max-w-6xl flex-col justify-center gap-12 px-6 py-16 sm:px-10 lg:px-12">
-        <section className="grid gap-10 lg:grid-cols-[1.2fr_0.8fr] lg:items-center">
-          <div className="space-y-6">
-            <span className="inline-flex w-fit items-center rounded-full border border-border bg-card px-3 py-1 text-xs font-medium uppercase tracking-[0.24em] text-muted-foreground shadow-sm">
-              Created with better-ts-stack
-            </span>
-            <div className="space-y-4">
-              <h1 className="max-w-3xl text-4xl font-semibold tracking-tight sm:text-5xl">
-                Ship your stack faster with a polished TypeScript foundation.
-              </h1>
-              <p className="max-w-2xl text-base leading-7 text-muted-foreground sm:text-lg">
-                Your project already includes the core app shell, database wiring,
-                and a shadcn-compatible UI foundation so you can keep building
-                instead of setting up boilerplate.
-              </p>
-            </div>
-            <div className="flex flex-col gap-3 sm:flex-row">
-              {{#if useAuth}}
-              <Link
-                href="/sign-up"
-                className={cn(buttonVariants({ size: "lg" }), "gap-2")}
-              >
-                Create an account
-                <ArrowRight className="size-4" />
-              </Link>
-              <Link
-                href="/sign-in"
-                className={buttonVariants({ variant: "outline", size: "lg" })}
-              >
-                Login
-              </Link>
-              {{else}}
-              <Link
-                href="https://github.com/Abdullah-dev0/better-ts-stack"
-                target="_blank"
-                rel="noreferrer"
-                className={cn(buttonVariants({ size: "lg" }), "gap-2")}
-              >
-                Explore the docs
-                <ArrowRight className="size-4" />
-              </Link>
-              <Link
-                href="https://nextjs.org/docs"
-                target="_blank"
-                rel="noreferrer"
-                className={buttonVariants({ variant: "outline", size: "lg" })}
-              >
-                Next.js guide
-              </Link>
-              {{/if}}
-            </div>
-          </div>
-
-          <Card className="border-border bg-card shadow-sm">
-            <CardHeader>
-              <CardTitle>Included in this starter</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <ul className="space-y-3 text-sm text-muted-foreground">
-                {featureList.map((feature) => (
-                  <li key={feature} className="flex items-center gap-3">
-                    <span className="size-2 rounded-full bg-primary" />
-                    <span>{feature}</span>
-                  </li>
-                ))}
-              </ul>
-              <div className="rounded-2xl border border-border bg-muted px-4 py-3 text-sm text-muted-foreground">
-                Start editing <code className="font-mono">app/page.tsx</code> and
-                shape the project around your product instead of setup chores.
-              </div>
-            </CardContent>
-          </Card>
-        </section>
-      </div>
-    </main>
-  );
-}
+import Link from "next/link";
+
+import { ArrowRight } from "lucide-react";
+
+import { buttonVariants } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const featureList = [
+  "Next.js 16 App Router",
+  "React 19 and TypeScript",
+  "Tailwind CSS v4",
+  {{#if useAuth}}"Better Auth-ready session flow",{{/if}}
+  {{#if (eq database "prisma")}}"Prisma database tooling",{{/if}}
+  {{#if (eq database "drizzle")}}"Drizzle database tooling",{{/if}}
+];
+
+export default function Home() {
+  return (
+    <main className="min-h-screen bg-background text-foreground">
+      <div className="mx-auto flex min-h-screen max-w-6xl flex-col justify-center gap-12 px-6 py-16 sm:px-10 lg:px-12">
+        <section className="grid gap-10 lg:grid-cols-[1.2fr_0.8fr] lg:items-center">
+          <div className="space-y-6">
+            <span className="inline-flex w-fit items-center rounded-full border border-border bg-card px-3 py-1 text-xs font-medium uppercase tracking-[0.24em] text-muted-foreground shadow-sm">
+              Created with better-ts-stack
+            </span>
+            <div className="space-y-4">
+              <h1 className="max-w-3xl text-4xl font-semibold tracking-tight sm:text-5xl">
+                Ship your stack faster with a polished TypeScript foundation.
+              </h1>
+              <p className="max-w-2xl text-base leading-7 text-muted-foreground sm:text-lg">
+                Your project already includes the core app shell, database wiring,
+                and a shadcn-compatible UI foundation so you can keep building
+                instead of setting up boilerplate.
+              </p>
+            </div>
+            <div className="flex flex-col gap-3 sm:flex-row">
+              {{#if useAuth}}
+              <Link
+                href="/sign-up"
+                className={cn(buttonVariants({ size: "lg" }), "gap-2")}
+              >
+                Create an account
+                <ArrowRight className="size-4" />
+              </Link>
+              <Link
+                href="/sign-in"
+                className={buttonVariants({ variant: "outline", size: "lg" })}
+              >
+                Login
+              </Link>
+              {{else}}
+              <Link
+                href="https://github.com/Abdullah-dev0/better-ts-stack"
+                target="_blank"
+                rel="noreferrer"
+                className={cn(buttonVariants({ size: "lg" }), "gap-2")}
+              >
+                Explore the docs
+                <ArrowRight className="size-4" />
+              </Link>
+              <Link
+                href="https://nextjs.org/docs"
+                target="_blank"
+                rel="noreferrer"
+                className={buttonVariants({ variant: "outline", size: "lg" })}
+              >
+                Next.js guide
+              </Link>
+              {{/if}}
+            </div>
+          </div>
+
+          <Card className="border-border bg-card shadow-sm">
+            <CardHeader>
+              <CardTitle>Included in this starter</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <ul className="space-y-3 text-sm text-muted-foreground">
+                {featureList.map((feature) => (
+                  <li key={feature} className="flex items-center gap-3">
+                    <span className="size-2 rounded-full bg-primary" />
+                    <span>{feature}</span>
+                  </li>
+                ))}
+              </ul>
+              <div className="rounded-2xl border border-border bg-muted px-4 py-3 text-sm text-muted-foreground">
+                Start editing <code className="font-mono">app/page.tsx</code> and
+                shape the project around your product instead of setup chores.
+              </div>
+            </CardContent>
+          </Card>
+        </section>
+      </div>
+    </main>
+  );
+}

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

@@ -1,51 +1,51 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-full text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-slate-950 text-white shadow-sm hover:bg-slate-800",
-        outline:
-          "border border-slate-200 bg-white text-slate-900 hover:bg-slate-100",
-        ghost: "text-slate-700 hover:bg-slate-100 hover:text-slate-950",
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 px-3",
-        lg: "h-11 px-6 text-sm",
-        icon: "size-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {}
-
-function Button({
-  className,
-  variant,
-  size,
-  type = "button",
-  ...props
-}: ButtonProps) {
-  return (
-    <button
-      type={type}
-      className={cn(buttonVariants({ variant, size }), className)}
-      {...props}
-    />
-  );
-}
-
-export { Button, buttonVariants };
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-full text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-slate-950 text-white shadow-sm hover:bg-slate-800",
+        outline:
+          "border border-slate-200 bg-white text-slate-900 hover:bg-slate-100",
+        ghost: "text-slate-700 hover:bg-slate-100 hover:text-slate-950",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 px-3",
+        lg: "h-11 px-6 text-sm",
+        icon: "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {}
+
+function Button({
+  className,
+  variant,
+  size,
+  type = "button",
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      type={type}
+      className={cn(buttonVariants({ variant, size }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

package/templates/frontend/nextjs/components/ui/card.tsx

@@ -1,60 +1,60 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-function Card({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn(
-        "rounded-3xl border border-slate-200/80 bg-white text-slate-950 shadow-sm",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function CardHeader({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />;
-}
-
-function CardTitle({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLHeadingElement>) {
-  return (
-    <h3
-      className={cn("text-2xl font-semibold leading-none tracking-tight", className)}
-      {...props}
-    />
-  );
-}
-
-function CardDescription({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLParagraphElement>) {
-  return <p className={cn("text-sm text-slate-600", className)} {...props} />;
-}
-
-function CardContent({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn("p-6 pt-0", className)} {...props} />;
-}
-
-function CardFooter({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn("flex items-center p-6 pt-0", className)} {...props} />;
-}
-
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Card({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "rounded-3xl border border-slate-200/80 bg-white text-slate-950 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />;
+}
+
+function CardTitle({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h3
+      className={cn("text-2xl font-semibold leading-none tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn("text-sm text-slate-600", className)} {...props} />;
+}
+
+function CardContent({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("p-6 pt-0", className)} {...props} />;
+}
+
+function CardFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex items-center p-6 pt-0", className)} {...props} />;
+}
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

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

@@ -1,67 +1,67 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-function FieldGroup({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn("space-y-5", className)} {...props} />;
-}
-
-type FieldProps = React.HTMLAttributes<HTMLDivElement> & {
-  "data-invalid"?: boolean;
-};
-
-function Field({
-  className,
-  "data-invalid": dataInvalid,
-  ...props
-}: FieldProps) {
-  return (
-    <div
-      data-invalid={dataInvalid}
-      className={cn("space-y-2", className)}
-      {...props}
-    />
-  );
-}
-
-function FieldLabel({
-  className,
-  ...props
-}: React.LabelHTMLAttributes<HTMLLabelElement>) {
-  return (
-    <label
-      className={cn("text-sm font-medium text-slate-900", className)}
-      {...props}
-    />
-  );
-}
-
-function FieldDescription({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLParagraphElement>) {
-  return <p className={cn("text-sm text-slate-500", className)} {...props} />;
-}
-
-type FieldErrorProps = React.HTMLAttributes<HTMLParagraphElement> & {
-  errors?: Array<{ message?: string } | undefined>;
-};
-
-function FieldError({ className, errors, ...props }: FieldErrorProps) {
-  const message = errors?.find((error) => error?.message)?.message;
-
-  if (!message) {
-    return null;
-  }
-
-  return (
-    <p className={cn("text-sm font-medium text-rose-600", className)} {...props}>
-      {message}
-    </p>
-  );
-}
-
-export { Field, FieldDescription, FieldError, FieldGroup, FieldLabel };
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function FieldGroup({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("space-y-5", className)} {...props} />;
+}
+
+type FieldProps = React.HTMLAttributes<HTMLDivElement> & {
+  "data-invalid"?: boolean;
+};
+
+function Field({
+  className,
+  "data-invalid": dataInvalid,
+  ...props
+}: FieldProps) {
+  return (
+    <div
+      data-invalid={dataInvalid}
+      className={cn("space-y-2", className)}
+      {...props}
+    />
+  );
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.LabelHTMLAttributes<HTMLLabelElement>) {
+  return (
+    <label
+      className={cn("text-sm font-medium text-slate-900", className)}
+      {...props}
+    />
+  );
+}
+
+function FieldDescription({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn("text-sm text-slate-500", className)} {...props} />;
+}
+
+type FieldErrorProps = React.HTMLAttributes<HTMLParagraphElement> & {
+  errors?: Array<{ message?: string } | undefined>;
+};
+
+function FieldError({ className, errors, ...props }: FieldErrorProps) {
+  const message = errors?.find((error) => error?.message)?.message;
+
+  if (!message) {
+    return null;
+  }
+
+  return (
+    <p className={cn("text-sm font-medium text-rose-600", className)} {...props}>
+      {message}
+    </p>
+  );
+}
+
+export { Field, FieldDescription, FieldError, FieldGroup, FieldLabel };

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

@@ -1,18 +1,18 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
-    <input
-      type={type}
-      className={cn(
-        "flex h-11 w-full rounded-2xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-950 shadow-sm transition-[color,box-shadow] outline-none placeholder:text-slate-400 focus-visible:border-sky-500 focus-visible:ring-[3px] focus-visible:ring-sky-500/20 disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Input };
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      className={cn(
+        "flex h-11 w-full rounded-2xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-950 shadow-sm transition-[color,box-shadow] outline-none placeholder:text-slate-400 focus-visible:border-sky-500 focus-visible:ring-[3px] focus-visible:ring-sky-500/20 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };

package/templates/frontend/nextjs/components.json

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