PrimeReact examples

Example projects for PrimeReact v11. Each folder is a complete app with its own README, and all of them open on StackBlitz.

Modes

PrimeReact v11 can be used in four ways:

• Styled components come pre-themed and are driven by design tokens.
• Headless hooks give the behavior, and the app writes its own markup and styles.
• Primitive components are unstyled, and the app styles them itself.
• Tailwind mode styles the PrimeReact primitives with Tailwind CSS and the PrimeUI tokens.

Starters

One starter for each framework and mode.

Example	Framework	Mode	Open
nextjs-quickstart	Next.js	Styled	StackBlitz
vite-quickstart	Vite	Styled	StackBlitz
astro-quickstart	Astro	Styled	StackBlitz
tanstack-quickstart	TanStack Start	Styled	StackBlitz
react-router-quickstart	React Router	Styled	StackBlitz
nextjs-headless-quickstart	Next.js	Headless	StackBlitz
nextjs-primitive-quickstart	Next.js	Primitive	StackBlitz
nextjs-tailwind-quickstart	Next.js	Tailwind	StackBlitz
vite-tailwind-quickstart	Vite	Tailwind	StackBlitz
astro-tailwind-quickstart	Astro	Tailwind	StackBlitz
tanstack-tailwind-quickstart	TanStack Start	Tailwind	StackBlitz
react-router-tailwind-quickstart	React Router	Tailwind	StackBlitz

Forms

Example	Shows	Open
form-examples	The same form built with React Hook Form, TanStack Form and Formik	StackBlitz

Page integration examples

Each of these comes with a blog post that explains the setup.

Example	Shows	Open	Read
shadow-root	Components inside a shadow root	StackBlitz	Blog post
isolated-mode	Two apps with their own themes on one page	StackBlitz	Blog post
micro-frontends	Two micro frontends with their own themes in one host page	StackBlitz	Blog post
class-prefix	Renaming the p- classes with classPrefix	StackBlitz	Blog post

Run an example

cd nextjs-quickstart
npm install
npm run dev

Each example has its own README with the files to look at.

Links

• PrimeReact docs
• PrimeUI blog
• Get all access