A collection of components, hooks, and utilities built on Next.js, Typescript, Tailwind, Radix, Framer Motion, Prisma, and PostgreSQL.
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 iyarnpnpm i
https://github.com/user-attachments/assets/aef3c099-e371-43bf-b426-f5ba73185a7c
next/font
– Optimize custom fonts and remove external network requests for improved performanceImageResponse
– Generate dynamic Open Graph images at the edgeuseIntersectionObserver
– React hook to observe when an element enters or leaves the viewportuseLocalStorage
– Persist data in the browser's local storageuseScroll
– 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 stringtruncate
– Truncate a string to a specified lengthuse-debounce
– Debounce a function call / state updateA collection of components, hooks, and utilities built on Next.js, Typescript, Tailwind, Radix, Framer Motion, Prisma, and PostgreSQL.
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 iyarnpnpm i
https://github.com/user-attachments/assets/aef3c099-e371-43bf-b426-f5ba73185a7c
next/font
– Optimize custom fonts and remove external network requests for improved performanceImageResponse
– Generate dynamic Open Graph images at the edgeuseIntersectionObserver
– React hook to observe when an element enters or leaves the viewportuseLocalStorage
– Persist data in the browser's local storageuseScroll
– 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 stringtruncate
– Truncate a string to a specified lengthuse-debounce
– Debounce a function call / state update