Ackto Next.js Template

A starting point for apps built with Ackto: Next.js 16 (App Router) + React 19 + TypeScript + Tailwind CSS + shadcn/ui.

Stack

• Next.js 16 with the App Router and Turbopack
• React 19
• TypeScript 5
• Tailwind CSS 3 with tailwindcss-animate and the typography plugin
• shadcn/ui — all 49 components pre-installed under components/ui/
• TanStack Query, react-hook-form + zod, lucide-react, sonner

Layout

app/
  layout.tsx     root layout, wraps everything in Providers
  providers.tsx  the client boundary: QueryClient, tooltips, toasters
  page.tsx       the default page
  not-found.tsx  404
  globals.css    Tailwind entry and the design tokens
components/
  ui/            shadcn/ui — pre-installed, not meant to be edited
hooks/           use-toast, use-mobile
lib/utils.ts     the cn() helper
tools/           the component tagger loader (see below)

Every components/ui/* file carries "use client", so Server Components can import them directly.

Running it

pnpm install
pnpm dev        # http://localhost:3000

Ackto overrides the port per app by appending --port to pnpm dev.

The component tagger

tools/ackto-tagger-loader.mjs stamps data-ackto-id and data-ackto-name onto every JSX element in development only. Ackto's preview pane uses those attributes to map a clicked element back to its source location — without them, selecting a component in the preview does nothing.

It is wired through turbopack.rules in next.config.ts and lives in this repository rather than in a published package, so nothing outside this repo can change what runs during your build.

Notes

AI_RULES.md describes the conventions this template expects, and Ackto reads it as part of the system prompt when working on an app created from here.