DEV Community

Cover image for This tool help me build next js admin only 5-minutes
kristiansnts
kristiansnts

Posted on

This tool help me build next js admin only 5-minutes

So, I've been building admin panels, management systems, and information systems for companies for about 2 years now. You know the struggle - you need to show clients something quickly, but setting up everything from scratch takes forever.

I was using FilamentPHP for a while. It's honestly great - super easy to set up, fast to build with, and has tons of features. But here's the annoying part: every time I needed to show a client a demo, I had to publish it to my VPS. That meant paying for hosting just to show them a few pages. It was eating into my margins.

I kept thinking, "Wouldn't it be nice if we had something like Filament, but for JavaScript? Then I could just deploy demos to Vercel for free." So... I built it. Let me show you what I came up with.

Meet ShadPanel

ShadPanel is basically a CLI tool that scaffolds a complete Next.js admin panel for you. Think of it like FilamentPHP, but for the JavaScript world.

Here's what you get out of the box:

  • 🎨 50+ UI Components - Full shadcn/ui component library
  • 📝 Form Builder - Filament-style declarative forms (this is the good stuff)
  • 📊 Data Tables - Sorting, filtering, pagination built right in
  • 🔐 Authentication - NextAuth.js with Google, GitHub, or email/password
  • 🎯 TypeScript - Everything's typed, which saves you from so many headaches
  • 🌙 Dark Mode - Built in, because who doesn't want dark mode?
  • 📱 Responsive - Works on mobile, tablet, desktop
  • ⚡ Zero Config - It just works

I built it to feel familiar if you've used Filament, but made for the Next.js/React ecosystem.

Let's Build One - It Takes 5 Minutes

Seriously, that's all it takes.

First, install it

You can install it globally:

npm install -g shadpanel
Enter fullscreen mode Exit fullscreen mode

Or just use it with npx (no installation needed):

npx shadpanel init my-admin-panel
Enter fullscreen mode Exit fullscreen mode

Then run the init command 

shadpanel init my-admin-panel
Enter fullscreen mode Exit fullscreen mode

The CLI will ask you a few questions:

  • Which package manager do you want? (npm, pnpm, yarn, bun)
  • What do you want to install? (Full panel, auth + components, or just components)
  • Authentication providers? (Google, GitHub, or email/password)
  • Include demo pages? (I usually say yes - they're helpful)
  • Initialize git? (Up to you)

Answer the questions, wait for it to finish, and you're done.

Start it up 

cd my-admin-panel
npm run dev
Enter fullscreen mode Exit fullscreen mode

Open http://localhost:3000 and boom - you've got a working admin panel with a dashboard, login page, sidebar navigation... the whole thing. That's literally it.

What You Actually Get

After running the init command, you'll have:

✅ Complete admin panel structure - Authentication, dashboard, the works

✅ 50+ UI components - All the shadcn/ui components, ready to use

✅ Form builder - Build forms without the headache

✅ Data tables - Full-featured tables with zero config

✅ Dark mode - Toggle it on/off, it just works

✅ TypeScript - Everything's typed from the start

✅ Tailwind CSS v4 - Latest version, already configured

All set up and working in about 30 seconds. No joke.

The Form Builder - This is the Good Part

The form builder is inspired by FilamentPHP. You just describe what you want, and it handles all the messy stuff - validation, styling, state management. No more writing useState for every field or handling validation errors manually.

Here's what it looks like:

'use client'

import { Form, FormInput, FormSelect, FormSection } from '@/components/ui'
import { Button } from '@/components/ui'

export default function UserForm() {
  return (
    <Form
      initialValues={{ name: '', email: '', role: 'user' }}
      onSubmit={(values) => console.log(values)}
    >
      <FormSection title="User Information" description="Enter user details">
        <FormInput accessor="name" label="Name" required />
        <FormInput accessor="email" label="Email" type="email" required />
        <FormSelect
          accessor="role"
          label="Role"
          options={[
            { label: 'User', value: 'user' },
            { label: 'Admin', value: 'admin' },
          ]}
        />
      </FormSection>
      <Button type="submit">Submit</Button>
    </Form>
  )
}
Enter fullscreen mode Exit fullscreen mode

That's it. Validation happens automatically, styling is consistent, state is managed for you. It's honestly a game changer.

You've got FormInput, FormTextarea, FormSelect, FormCheckbox, FormToggle, FormDatePicker, FormFileUpload, and more. Plus layout components like FormSection and FormGrid to organize everything nicely.

Data Tables - Also Pretty Nice

Tables are dead simple too. Just pass in your data and tell it what columns you want:

'use client'

import { Table, TableTextColumn, TableActionsColumn, TableAction } from '@/components/ui'
import { Edit, Trash } from 'lucide-react'

export default function UsersTable({ users }) {
  return (
    <Table data={users}>
      <TableTextColumn accessor="name" header="Name" sortable searchable />
      <TableTextColumn accessor="email" header="Email" searchable />
      <TableTextColumn accessor="role" header="Role" sortable />
      <TableActionsColumn>
        <TableAction icon={Edit} label="Edit" onClick={(row) => handleEdit(row)} />
        <TableAction icon={Trash} label="Delete" onClick={(row) => handleDelete(row)} />
      </TableActionsColumn>
    </Table>
  )
}
Enter fullscreen mode Exit fullscreen mode

That's it. You get sorting, searching, filtering, pagination, row selection, bulk actions... all without writing a single line of table logic. It's wild how much time this saves.

Database Stuff (If You Need It)

Need a database? There's a CLI command for that too:

shadpanel db init
Enter fullscreen mode Exit fullscreen mode

It'll ask you:

  • Which database do you want? (MySQL, PostgreSQL, SQLite, or MongoDB)
  • Then it creates your .env file
  • Sets up Prisma for you
  • Installs all the packages

After that, you just define your models and run migrations:

shadpanel db migrate make create_users
shadpanel db migrate run
Enter fullscreen mode Exit fullscreen mode

It's optional though - only set it up if you actually need it.

The Resource Generator - This Blew My Mind

Okay, so here's where it gets really cool. Once you have Prisma set up, you can generate entire CRUD pages from your models with a single command. Like, the whole thing - list view, create form, edit form, delete actions... everything.

Let's say you have a Post model in your Prisma schema:

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  content   String?
  published Boolean  @default(false)
  createdAt DateTime @default(now())
}
Enter fullscreen mode Exit fullscreen mode

Just run:

shadpanel resource posts
Enter fullscreen mode Exit fullscreen mode

Or the short version:

shadpanel r posts
Enter fullscreen mode Exit fullscreen mode

That's it. One command and you get:

  • ✅ List page - Data table with all your posts, searchable, sortable
  • ✅ Create page - Form to create new posts
  • ✅ Edit page - Form to update existing posts
  • ✅ Delete functionality - Built right into the table
  • ✅ Server actions - All the backend CRUD operations
  • ✅ Menu integration - Automatically added to your sidebar

All the code is generated for you. The forms use the Form Builder, the tables use the Data Table component, everything is typed and ready to go. You just customize it if you need to.

This is honestly the feature that saves the most time. I can go from "I need a posts management page" to "here's your working CRUD interface" in like 30 seconds. It's wild.

The resource generator is smart too - it detects field types and uses the right form inputs (text for strings, checkboxes for booleans, date pickers for DateTime fields, etc.). Relations are automatically excluded from forms (which makes sense).

It's Flexible - You Own the Code

One thing I really wanted to get right is flexibility. ShadPanel isn't some locked-down framework - it's just Next.js code that gets generated for you. You can change anything.

Want to customize a component? Go ahead, change the className, add your own styles, modify the logic - it's your code. The components are just starting points, not locked templates.

// Generated code, but you can change it however you want
<FormInput 
  accessor="name" 
  label="Name" 
  className="my-custom-class"  // Add your own classes
  required 
/>
Enter fullscreen mode Exit fullscreen mode

Need to change how forms work? Modify the Form component. Want to customize the data table? It's all right there in your components/ui folder. Everything follows Next.js conventions, so if you know Next.js, you know how to customize everything.

The only opinionated part is the built-in components themselves - they have sensible defaults. But once they're in your project, they're just components in your codebase. Change them, extend them, replace them - whatever you need.

It's like how Next.js works - opinionated about the file structure and conventions, but you control everything else. That's exactly how I wanted ShadPanel to feel.

Deploying to Vercel - This is Why I Built It

Since it's a Next.js app, deploying to Vercel is trivial:

  1. Push your code to GitHub
  2. Import it in Vercel
  3. Add your environment variables (if you're using auth or database)
  4. Hit deploy

That's it. No VPS, no server management, and it's free. This is the whole reason I built this thing - I can spin up a demo, send the client a link, and not worry about server costs.

How I Used It Last Week

Last week, a client asked me to show them what an admin panel would look like. I ran:

shadpanel init client-admin
Enter fullscreen mode Exit fullscreen mode

Selected Google OAuth, added demo pages, and within minutes I had:

  • A working login with Google
  • A dashboard
  • A user management form
  • A users table with data

I added a couple of custom fields, pushed to GitHub, deployed to Vercel, and sent them the link. They could see it the same day.

No setting up servers, no configuring databases on a VPS - just Next.js deploying to Vercel. It's beautiful.

Why I Built This

Look, I just wanted:

  • Speed - Set up in minutes, not hours
  • Cost-effective - Free demos on Vercel
  • Familiar - Feels like Filament, but for JavaScript
  • Modern - Next.js, TypeScript, Tailwind
  • Flexible - Works standalone or merge into existing projects

And honestly, it does all of that. I'm pretty happy with how it turned out.

Try It Out

If you're building admin panels or internal tools, give it a shot. Setup takes like 5 minutes, and you'll have something working immediately.

That's it. If you try it out, let me know what you think. Happy building!

Tags: #nextjs #react #typescript #adminpanel #shadcn #webdev #javascript

Top comments (0)