An opinionated collection of components, hooks, and utilities for your Next.js project.

Precedent

Building blocks for your Next project

Introduction · One-click Deploy · Tech Stack + Features · Author

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"

Precedent.mp4

Next.js – React framework for building performant apps with the best developer experience
Auth.js – Handle user authentication with ease with providers like Google, Twitter, GitHub, etc.
Prisma – Typescript-first ORM for Node.js

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
@vercel/og – Generate dynamic Open Graph images on the edge
react-wrap-balancer – Simple React component that makes titles more readable

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

Vercel Analytics – Track unique visitors, pageviews, and more in a privacy-friendly way