Precedent – Next.js Starter

A collection of components, hooks, and utilities built on Next.js, Typescript, Tailwind, Radix, Framer Motion, Prisma, and PostgreSQL.

Introduction

Precedent is an opinionated collection of components, hooks, and utilities for your Next.js project.

You can deploy this template to Vercel with the button below:

You can also clone & create this repo locally with the following command:

npx create-next-app precedent --example "https://github.com/steven-tey/precedent"

Then, install the dependencies with your package manager of choice:

npm i
yarn
pnpm i

Next.js – React framework for building performant apps with the best developer experience
Clerk - A comprehensive user management platform with beautifully designed, drop-in React components

Tailwind CSS – Utility-first CSS framework for rapid UI development
Radix – Primitives like modal, popover, etc. to build a stellar user experience
Framer Motion – Motion library for React to animate components with ease
Lucide – Beautifully simple, pixel-perfect icons
next/font – Optimize custom fonts and remove external network requests for improved performance
ImageResponse – Generate dynamic Open Graph images at the edge

useIntersectionObserver – React hook to observe when an element enters or leaves the viewport
useLocalStorage – Persist data in the browser's local storage
useScroll – React hook to observe scroll position (example)
nFormatter – Format numbers with suffixes like 1.2k or 1.2M
capitalize – Capitalize the first letter of a string
truncate – Truncate a string to a specified length
use-debounce – Debounce a function call / state update