Skip to main content
Slik Dev gets you from an empty terminal to a running, premium-looking SaaS application in under 60 seconds. This guide walks you through every step — from running the CLI command to touring the generated pages and making your first real customization.
1

Run the Slik CLI

Open your terminal and run the following command, replacing my-app with whatever you want your project folder to be named:
The CLI will prompt you to make a few selections before generating your project:
  • Stack — Choose your framework. Next.js, React, and HTML stacks are fully available.
  • Theme — Choose a UI theme. Bento, Frost, and Mono themes are fully available.
  • Database — Optionally include PostgreSQL via Prisma. If you opt in, Slik pre-configures prisma/schema.prisma and wires the database client into your app.
  • Auth — NextAuth/Auth.js is included and pre-configured. OAuth providers, magic links, and session management are ready out of the box.
If you are prototyping and do not need a database yet, skip it during setup. You can always add Prisma manually later.
2

Install dependencies and start the dev server

Once the CLI finishes scaffolding, navigate into your project and install dependencies:
Open your browser at http://localhost:3000. Your SaaS app is live with a fully animated landing page, auth flow, dashboard, and admin panel — no additional configuration needed.
The dev server uses Next.js App Router with fast refresh. Any changes you make to files in app/ or components/ will be reflected in the browser instantly.
3

Explore the generated project structure

Slik Dev generates a clean, predictable Next.js project. Here is what the directory looks like for a Next.js + Bento project:
All pages live under app/ and follow Next.js App Router conventions. Each folder in app/ maps directly to a URL route — app/dashboard/page.tsx is served at /dashboard.
4

Tour the generated pages

Visit each route in your browser to see what Slik has built for you:

Landing Page — /

A fully animated hero section, feature cards, and a call-to-action strip. Built with Framer Motion scroll animations and Tailwind CSS. Dark mode is active by default.

Auth Pages — /auth

Sign in and sign up forms with full NextAuth/Auth.js integration. OAuth buttons and email/password flows are wired and ready. A glassmorphism card design sits centered on a radial gradient background.

Dashboard — /dashboard

A sidebar navigation layout with stat cards and a bar chart. This is the main authenticated view where your users will spend their time. Responsive — collapses to mobile-friendly layout automatically.

Admin Panel — /admin

A top navbar + side nav + data table layout for managing users and records. Includes sortable table rows, action buttons, and status badges.
Dark mode is enabled by default and persisted via localStorage. Users who toggle to light mode will stay in light mode across sessions. See the Customize UI guide for how to change the default.
5

Make your first customization — update the app name and branding

The fastest first edit is replacing the placeholder brand name with your own. Open components/layout/Navbar.tsx (or wherever the Navbar component lives in your generated project) and find the logo text:
Do the same in components/layout/Footer.tsx to keep branding consistent across the app.Next, open app/page.tsx and update the hero headline and meta title to reflect your product name and value proposition. The generated hero section will have a large <h1> and a supporting <p> — both are plain text and easy to edit.
Search for the string SaaS. across the project — Slik Dev uses it as the placeholder brand name in the Landing mockup elements. Replace all instances with your actual product name.
6

Push your first database schema (if you opted in)

If you chose to include PostgreSQL with Prisma, your prisma/schema.prisma file is already scaffolded with a User model wired to NextAuth. To apply the schema to your database, add your connection string to .env:
Then push the schema:
Never commit your .env file to version control. Slik generates a .gitignore that excludes it, but double-check before your first commit.

​
What to do next

Now that your app is running and you have made your first edits, here are the natural next steps:

Customize the UI

Change your color palette, swap Lucide icons, and tweak Framer Motion animations.

Add new pages

Use Next.js App Router file-based routing to add a Pricing page, blog, or any custom route.

Deploy to production

Ship to Vercel in minutes with the right environment variables configured.