Precedent is an opinionated Next.js starter template that bundles reusable components, hooks, and utilities into a single deployable foundation, built by Steven Tey and deployable to Vercel with one click.
What is Precedent?
Precedent is an open-source starter template for Next.js projects, created by Steven Tey (@steventey). It takes a fresh Next.js scaffold and layers on a preconfigured stack: Tailwind CSS for styling, Radix UI primitives, Framer Motion for animations, Clerk for authentication, and Vercel Analytics for privacy-friendly traffic tracking. The template also ships TypeScript, ESLint, and Prettier so you get type safety and consistent code style from the start. The output is a production-ready web app foundation that you can either clone locally or deploy directly to Vercel.
Key Features
- Next.js framework — Built on the React framework with App Router support, optimized fonts via
next/font, and edge-rendered Open Graph images usingImageResponse. - Clerk authentication — Includes Clerk's drop-in React components for complete user management; the one-click deploy flow asks for Clerk publishable and secret keys as environment variables.
- Tailwind CSS + Radix UI — Utility-first styling with accessible Radix primitives for modals, popovers, and other interactive components, plus Lucide icons for pixel-perfect graphics.
- Framer Motion — Adds the Framer Motion library to animate components with ease.
- Utility hooks — Comes with
useIntersectionObserver,useLocalStorage,useScroll, anduse-debouncefor observing viewport entry, persisting data, tracking scroll position, and debouncing state updates. - Formatting helpers —
nFormatterformats numbers into compact forms like 1.2k or 1.2M,capitalizeuppercases the first letter, andtruncatecuts strings to a set length. - Vercel Analytics — Tracks unique visitors and pageviews in a privacy-friendly way, included by default.
- Code quality tooling — TypeScript for end-to-end typesafety, ESLint for linting, and Prettier for consistent formatting.
Who is it for?
- Next.js developers who want a preconfigured starting point with auth, UI, and analytics already wired up.
- Indie hackers and founders launching a new web app quickly using the one-click Vercel deploy.
- Developers learning modern Next.js patterns who want to study real implementations of hooks like
useScrolland utilities likenFormatter. - Teams shipping marketing sites or dashboards that need polished UI primitives and consistent code style out of the box.
What can you do with Precedent?
- Launch a new app in minutes: Deploy the template to Vercel with one click, add your Clerk keys, and begin building on a stack that already includes auth, analytics, and styling.
- Build custom UI components: Combine Radix primitives with Tailwind and Framer Motion to create accessible modals, popovers, and animated interactions.
- Generate dynamic Open Graph images: Use the included
ImageResponsesetup to produce social share images at the edge for any page.
How does Precedent work?
Clone the repo locally with the command npx create-next-app precedent --example "https://github.com/steven-tey/precedent", install dependencies with npm, yarn, or pnpm, then set the Clerk environment variables. For cloud deployment, the Vercel deploy button clones the repository, sets the project name, and prompts you for the Clerk publishable and secret keys before deploying.
FAQ
Is Precedent free to use?
Precedent is an open-source template hosted on GitHub, so the source code is freely available to view, clone, and modify. The page does not mention any paid license or tier.
Does Precedent include authentication?
Yes, Precedent uses Clerk for authentication. Clerk provides drop-in React components for sign-in, sign-up, and user management. You need to create a Clerk application and provide your publishable and secret keys as environment variables.
Who maintains Precedent?
Precedent is created and maintained by Steven Tey, known on Twitter as @steventey. The repository is hosted at github.com/steven-tey/precedent and has over 5,000 stars.
How do I deploy Precedent to Vercel?
The fastest way is to click the "Deploy with Vercel" button on the Precedent readme. It opens a Vercel project creation page prefilled with the repository URL, project name, and demo metadata. You'll be asked to enter your Clerk environment variables before the deployment starts.
What's the difference between Precedent and create-next-app?
Precedent is a starting template that adds a specific opinionated stack — Clerk, Tailwind, Radix, Framer Motion, and Vercel Analytics — on top of Next.js. The default create-next-app scaffolds a minimal Next.js app without these integrations, so Precedent saves the time of configuring each library yourself.
