Precedent is a free and open-source collection of opinionated components, hooks, and utilities for your Next.js project. It enables Next.js developers to boost their production time by allowing them to create reactive apps quickly.
Basically, Precedent is a collection of components, hooks, and utilities that includes high-quality code snippets and built-in integration for popular libraries. It was written in TypeScript by Steven Tey, a web developer who released it for free.
- Clean code
- Built on top of Tailwind CSS, Radix UI, and Farmer Motion.
- Dozens of many pre-built components that include modal, popover, dialogs, tooltips, and rich button set.
- Highly performance output.
- Built-in Auth using Auth.js
- Database ready with Prisma.js
- Dozens of hooks and ready-to-use utilities
- Framer Motion – Motion library for React to animate components with ease
- Built-in external font support
- One file config.
- Ready-to-use Google Authentication
- PostgreSQL Database support
- Built-in prettier support.
- ESLint – Pluggable linter for Next.js and TypeScript
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
nFormatter– Format numbers with suffixes like
capitalize– Capitalize the first letter of a string
truncate– Truncate a string to a specified length
use-debounce– Debounce a function call / state update
You can use the one-click deployment option by clicking here, which will deploy the starter directly to Vercel.
However, in order to use and edit the code you can use this command:
npx create-next-app precedent --example "https://github.com/steven-tey/precedent"
Precedent is an open-source project that is released under the MIT license.