Hogwarts Logo
Hogwarts
FeaturesBlogPricingDocumentation

Command Palette

Search for a command to run...

10
Login

Build by Databayt, source code available on GitHub

  • Introduction
  • Pitch
  • MVP
  • PRD
  • Get Started
  • Architecture
  • Structure
  • Pattern
  • Stack
  • Icons
  • Dashboard
  • Rebound
  • Database
  • Attendance
  • Localhost
  • Contributing
  • Shared Economy
  • Competitors
  • Inspiration
  • Demo
  • Listings
  • Business

Inspiration

PreviousNext

Curated references for UI/UX and product direction, drawing from shadcn patterns and real-world SIS/MIS products.

Browse curated templates, blocks, and patterns: Awesome shadcn

Curated references for UI/UX and product direction. We draw heavily from shadcn patterns and real-world SIS/MIS products.

School

  • Next.js School Management Dashboard UI Design Tutorial | React Next.js Responsive Admin Dashboard — Part 1 · Part 2
  • Build a Nextjs Learning Management App | AWS, Docker, Lambda, Clerk, DynamoDB, ECR, S3, Shadcn, Node — YouTube
  • School Pro - Building School Management system Next.js & Express | Student Attendance Module EP39 — Playlist
  • All Functional MERN Stack LMS / Learning Management system series with Next 13, TypeScript | Part 1 — YouTube
  • All Functional MERN Stack LMS / Learning Management system series with Next 13, TypeScript | Part 2 — YouTube
  • SAAS LMS With Custom Domains & Affiliates - Nextjs15, Uploadcare, Clerk, Cloudways, Supabase — YouTube
  • Mern Stack School Management System with React, Node, MongoDB, Express and Styled Components — YouTube
  • Build Full Stack NextJs Student Attendance Tracking App | React, MySql, Tailwind CSS, Drizzle ORM — YouTube
  • Next-Gen School Management System | Built for Simplicity. Powered by Modern Tech — YouTube

Dashboard

  • Shadcn primitives: Card · Tabs · Table · Button · Separator

  • shadcn/ui Dashboard Example

  • Shadcn Admin (demo)

  • Shadcn Dashboard – Overview

  • YouTube: Shadcn Dashboard Build

  • YouTube: Shadcn Dashboard (segment)

  • Figma – Dashboards Layout Ideas

  • Figma Community: dashboard UI

  • Pinterest: dashboard UI inspiration

  • Popular GitHub projects:

    • Search: shadcn dashboard (stars desc)
    • Search: nextjs dashboard shadcn (stars desc)
    • Search: admin dashboard shadcn (stars desc)

  • Popular YouTube:

    • YouTube search: shadcn ui dashboard
    • YouTube search: shadcn admin dashboard
    • YouTube search: next.js dashboard shadcn

Table (Lists)

  • Shadcn primitives: Table · Dropdown Menu · Badge · Input

  • Generic Data Table (our doc)

  • Data Table Example – Tasks (shadcn/ui)

  • Table component (shadcn/ui)

  • Figma Community: table/list UI

  • Pinterest: table/list UI inspiration

  • Popular GitHub projects:

    • Search: shadcn table tanstack (stars desc)
    • Search: data table shadcn (stars desc)
    • Search: react table shadcn (stars desc)

  • Popular YouTube:

    • YouTube search: shadcn ui table
    • YouTube search: tanstack table shadcn
    • YouTube search: data table nextjs shadcn

Onboarding

  • Shadcn primitives: Dialog · Sheet · Form · Progress · Button

  • Onboarding pattern (our doc)

  • Dialog (shadcn/ui) · Sheet

  • Form (shadcn/ui)

  • Figma Community: onboarding flow

  • Pinterest: onboarding UX inspiration

  • Popular GitHub projects:

    • Search: onboarding shadcn (stars desc)
    • Search: nextjs onboarding wizard (stars desc)
    • Search: stepper shadcn (stars desc)

  • Popular YouTube:

    • YouTube search: shadcn ui onboarding
    • YouTube search: nextjs onboarding wizard shadcn
    • YouTube search: multi step form shadcn

Forms

  • Shadcn primitives: Form · Input · Select · Textarea · Checkbox · Radio Group · Button

  • Form (shadcn/ui)

  • Inputs: Input · Select · Textarea · Checkbox · Radio Group

  • Figma Community: forms UI kit

  • Pinterest: forms UI inspiration

  • Popular GitHub projects:

    • Search: shadcn form react hook form (stars desc)
    • Search: zod shadcn form (stars desc)
    • Search: form builder shadcn (stars desc)

  • Popular YouTube:

    • YouTube search: shadcn ui form react hook form
    • YouTube search: zod shadcn form
    • YouTube search: nextjs forms shadcn

Notifications

  • Shadcn primitives: Toast · Alert · Alert Dialog

  • Toast (shadcn/ui)

  • Alert (shadcn/ui)

  • Figma Community: notifications/toasts

  • Pinterest: notifications inspiration

  • Popular GitHub projects:

    • Search: shadcn toast (stars desc)
    • Search: shadcn alert dialog (stars desc)
    • Search: notifications shadcn (stars desc)

  • Popular YouTube:

    • YouTube search: shadcn ui toast
    • YouTube search: shadcn ui alert dialog
    • YouTube search: notifications shadcn

Payments (Stripe UI)

  • Shadcn primitives: Card · Form · Input · Button · Dialog · Sheet · Skeleton

  • Use Dialog/Sheet for checkout flows and Skeleton for loading states

  • See more community blocks: Awesome shadcn (our curation)

  • Figma Community: checkout/payment

  • Pinterest: payment UI inspiration

  • Popular GitHub projects:

    • Search: nextjs stripe shadcn (stars desc)
    • Search: saas starter stripe shadcn (stars desc)
    • Search: checkout shadcn (stars desc)

  • Popular YouTube:

    • YouTube search: stripe checkout nextjs shadcn
    • YouTube search: subscriptions stripe shadcn
    • YouTube search: payment form shadcn

File Storage & Management

  • Shadcn primitives: Input (file) · Card · Dialog · Dropdown Menu · Progress · Badge

  • File upload, organization management, and role-based authorization patterns

  • Featured: FileDrive by webdevcody — File storage application with organizations, file upload, management, and role-based authorization

  • Figma Community: file manager / storage UI

  • Pinterest: file storage UI inspiration

  • Popular GitHub projects:

    • Search: file storage nextjs shadcn (stars desc)
    • Search: file manager nextjs (stars desc)
    • Search: file upload shadcn (stars desc)

  • Popular YouTube:

    • YouTube search: file storage nextjs
    • YouTube search: file upload ui shadcn
    • YouTube search: file manager dashboard

PDF Parsing UI

  • Shadcn primitives: Input (file) · Dialog · Scroll Area · Textarea · Progress

  • Pair UI with a PDF library (e.g., react-pdf) while keeping the interface shadcn-styled

  • Figma Community: document viewer / file upload

  • Pinterest: document viewer / pdf UI

  • Popular GitHub projects:

    • Search: nextjs pdf viewer
    • Search: react pdf parser
    • Search: pdf upload ui

  • Popular YouTube:

    • YouTube search: react pdf viewer ui
    • YouTube search: pdf upload parse nextjs
    • YouTube search: document viewer ui design

Salary / Payroll

  • Shadcn primitives: Table · Badge · Dropdown Menu · Calendar · Alert Dialog

  • Date inputs: Calendar

  • Export/approve flows: Alert Dialog

  • Figma Community: payroll dashboard

  • Pinterest: payroll UI inspiration

  • Popular GitHub projects:

    • Search: payroll dashboard nextjs
    • Search: hrms nextjs shadcn
    • Search: finance dashboard shadcn

  • Popular YouTube:

    • YouTube search: payroll dashboard ui
    • YouTube search: salary management ui
    • YouTube search: finance dashboard shadcn

Invoices

  • Shadcn primitives: Card · Table · Badge · Dropdown Menu · Dialog

  • Actions: Dropdown Menu · Dialog

  • See reusable list pattern: Generic Data Table (our doc)

  • Figma Community: invoice templates

  • Pinterest: invoice UI inspiration

  • Popular GitHub projects:

    • Search: invoice nextjs shadcn (stars desc)
    • Search: invoicing saas nextjs (stars desc)
    • Search: billing dashboard shadcn (stars desc)

  • Popular YouTube:

    • YouTube search: invoice app nextjs
    • YouTube search: invoice ui shadcn
    • YouTube search: billing dashboard ui

Chatbot

  • Shadcn primitives: Scroll Area · Textarea · Input · Button · Avatar · Skeleton · Separator · Badge

  • Extras: Avatar, Skeleton, Separator, Badge

  • Explore community chat blocks in: Awesome shadcn (our curation)

  • Figma Community: chat UI

  • Pinterest: chat UI inspiration

  • Popular GitHub projects:

    • Search: chatbot nextjs shadcn (stars desc)
    • Search: ai chat nextjs shadcn (stars desc)
    • Search: chat ui shadcn (stars desc)

  • Popular YouTube:

    • YouTube search: shadcn chat ui
    • YouTube search: nextjs ai chat shadcn
    • YouTube search: chat interface ui design

Auth

  • Shadcn primitives: Form · Input · Button · Card · Input OTP · Dialog · Sheet · Toast

  • Internal guide: Authentication (our doc)

  • Primitives: Form · Input · Button · Card

  • MFA & flows: Input OTP, Dialog, Sheet, Toast

  • Social providers: use the same form primitives with provider buttons (styled [Button] variants)

  • Figma Community: auth / login screens

  • Pinterest: auth UI inspiration

  • Popular GitHub projects:

    • Search: nextauth shadcn (stars desc)
    • Search: authjs shadcn (stars desc)
    • Search: login template shadcn (stars desc)

  • Popular YouTube:

    • YouTube search: shadcn nextauth
    • YouTube search: authjs shadcn nextjs
    • YouTube search: login ui shadcn

Competitive Landscape

  • iSAMS – School Management Information System
  • Education Horizons – Solutions Suite
  • eSkooly – School Management System
  • Classe365 – School Management Software Customers

Note: These links are sources of UI/UX inspiration and market research only. We do not claim affiliation with or endorsement by the referenced products.

Awesome ShadcnListings

On This Page

Browse curated templates, blocks, and patterns: Awesome shadcnSchoolDashboardTable (Lists)OnboardingFormsNotificationsPayments (Stripe UI)File Storage & ManagementPDF Parsing UISalary / PayrollInvoicesChatbotAuthCompetitive Landscape