Installation

How to install dependencies and structure your app.

Requirements

  • Next.js 13+ with App Router
  • React 18+
  • Tailwind CSS
  • TypeScript (recommended)

Setup

1. Initialize shadcn/ui

Start by setting up shadcn/ui in your Next.js project.

npx shadcn@latest init

2. Install base components

Add the essential shadcn/ui components that Supreme Toolkit modules depend on.

npx shadcn@latest add button card input label

3. Install Supreme Toolkit config module

This sets up the configuration system that all Supreme Toolkit modules use for API keys and settings.

npx shadcn@latest add "https://supreme.jashagrawal.in/r/config-module.json"

Install Components

Browse the available components and install the ones you need.

🔐 Authentication
Ready
Complete auth system with betterAuth, multiple providers, and guards
npx shadcn@latest add "https://supreme.jashagrawal.in/r/auth-module.json"
🌙 Theme Toggle
Ready
Complete dark mode solution with theme provider and toggle variants
npx shadcn@latest add "https://supreme.jashagrawal.in/r/theme-toggle.json"
📝 Waitlist
Ready
Complete waitlist system with validation and email confirmations
npx shadcn@latest add "https://supreme.jashagrawal.in/r/waitlist-module.json"
📧 Mailer
Ready
Universal email system with Resend and Nodemailer support
npx shadcn@latest add "https://supreme.jashagrawal.in/r/mailer-module.json"

Manual Installation

If you prefer to install components manually, you can copy and paste the code.

Each component page includes the source code that you can copy and paste into your project. This is useful if you want to customize the components or understand how they work.

That's it

You can now start using Supreme Toolkit components in your project. Check out the component documentation to learn more about each component.