Introduction

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

One-click Deploy

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

Tech Stack + Features

https://github.com/user-attachments/assets/aef3c099-e371-43bf-b426-f5ba73185a7c

Frameworks

• 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

Platforms

• Vercel – Easily preview & deploy changes with git

UI

• 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

Hooks and Utilities

• 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

Code Quality

• TypeScript – Static type checker for end-to-end typesafety
• Prettier – Opinionated code formatter for consistent code style
• ESLint – Pluggable linter for Next.js and TypeScript

Miscellaneous

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

Author

• Steven Tey (@steventey)