Introduction

Introduction

Get started with Horizon UI Boilerplate, the trendiest admin dashboard boilerplate for NextJS, Shadcn UI, Tailwind CSS, Supabase, Stripe & ChatGPT API. Horizon UI Boilerplate comes with over 100+ fully coded & designed front-end components and more than 20+ section & web app page examples giving you the freedom of choosing and combining.

Introduction Image

All Components

Tailwind CSS

Discover Boilerplate's Tailwind CSS components

See all components

Chakra UI

Discover Boilerplate's Chakra UI components

See all components

@shadcn/ui

Discover Boilerplate's Shadcn UI components

See all components

Getting Started

This is a quick tutorial about how to set up your project and how to start working on your startup, with the help of Horizon Boilerplate! So, let's get started:

  1. Open the .zip archive file you got (when you bought Horizon UI Boilerplate Default (opens in a new tab) or Horizon AI Boilerplate @shadcn/ui (opens in a new tab)) in your code editor. That is your starting point, and all the code you need is there.

  2. Look at the .env.local file. It should look something like this :

.env.local
# This file is supposed to be filled with the keys you get from all the platforms we are working with.

NEXT_PUBLIC_OPENAI_API_KEY=
NEXT_PUBLIC_SUPABASE_URL=https://YOURSUPABASEID.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=
NEXT_PUBLIC_MONTHLY_PLAN_ID=

# Update these with your Supabase details from your project settings > API 
# This key is used for bypassing Row Level Security, but should be NEVER used in a browser.
SUPABASE_SERVICE_ROLE_KEY=

# Update these with your Stripe credentials from https://dashboard.stripe.com/apikeys
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_
STRIPE_SECRET_KEY=sk_test_ 
STRIPE_WEBHOOK_SECRET= 

# Update this with your stable site URL only for the production environment.

To fill you 2 variables (NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY) in .env.local, go to the Supabase dashboard, create a new project, go to Project Setting, then copy and paste the keys/url where you need to.

Next.JS Archive Structure

  • /app - Landing page, providers and main layout

  • /app/dashboard - All 7 dashboard page examples(ai-chat, ai-generator, main dashboard, settings, signin, subscription, user-list)

  • /app/api - All APIs used throughout the project(essay generator API, chat API, Stripe webhooks, create-checkout, create-portal-link)

  • /app/auth - Authentication callback for Supabase

  • /components - React components, page components(some dashboard pages)

  • /utils - Helper functions, navigation functions, streams for ChatGPT API, supabase client page components(some dashboard pages)

API Calls