This is a minimalistic Next.js + Radix Themes template to bootstrap your next project with a modern design system.
- Next.js: A React framework for building production-grade applications.
- Radix Themes: An open-source component library optimized for fast development, easy maintenance, and accessibility.
- Tailwind CSS: A utility-first CSS framework for rapidly building custom designs.
- Uses the latest React 18 version.
- Out of the box support for TypeScript.
- next/font: Automatically optimize and load fonts from Google Fonts.
- next-themes: Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing.
- Prettier + ESLint preconfigured with all recommended configs / plugins.
- Husky + Lint-Staged pre-commit hooks to ensure code quality.
- Extendsthe default tailwind classes with the radix ones using radix-themes-tw.
- Install the dependencies:
pnpm install
- Run the development server:
pnpm dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx
. The page auto-updates as you edit the file.
To learn more about technologies used, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
- Radix Themes Documentation - learn about Radix UI themes and API.
- Radix Themes Playground - an interactive playground of Radix UI themes components.
- Tailwind CSS Documentation - learn about Tailwind CSS features and API.
- Tailwind CSS Play - an interactive playground of Tailwind CSS components.
Check out Next.js GitHub repository and Radix Themes GitHub repository - your feedback and contributions are welcome!
This preset overrides the default tailwind classes with the radix ones, except for the space tokens that starts with the rx suffix (for example you can use both px-2
based on tailwind spacing and px-rx-2
based on radix spacing).
For the complete list of tokens check the radix documentation: https://www.radix-ui.com/themes/docs/theme/token-reference
For the tailwind classes check the preset code: https://github.com/viktorbonino/radix-themes-tw/blob/main/src/index.ts