A comprehensive learning project showcasing shadcn/ui components, a full-featured dashboard, and a modern portfolio landing page built with Next.js, Tailwind CSS, and Base UI.
- 10 interactive component demos with explanations
- Dashboard page with sidebar, charts, and data tables
- Portfolio landing page with hero, services, projects, testimonials, and contact sections
- Dark/light mode toggle
- Responsive grid layout
- Fully accessible components
| Component | Description |
|---|---|
| Button | Interactive buttons with multiple variants and sizes |
| Card | Content container with header, body, and footer |
| Badge | Status indicators and labels |
| Alert | Notification messages (info, success, warning, error) |
| Tabs | Tabbed content organization |
| Accordion | Expandable/collapsible content sections |
| Avatar | User profile images with fallbacks |
| Progress | Progress bars with animations |
| Switch | Toggle controls for settings |
| Dialog | Modal windows for forms and confirmations |
The project includes a fully functional dashboard at /dashboard demonstrating:
- Collapsible Sidebar - Navigation with expandable sections
- Stat Cards - Metric cards with trend indicators
- Area Chart - Visitor analytics with date range filtering
- Data Table - Sortable, filterable table with pagination
- Responsive Layout - Adapts to mobile, tablet, and desktop
A modern portfolio landing page at /portfolio showcasing:
- Hero Section - Gradient title, stats grid (experience, projects, apps), and dual CTAs
- Services Section - 4 service cards highlighting UI/UX design capabilities
- Projects Section - Portfolio grid with 6 project cards and hover overlays
- Testimonials Section - Client testimonials with star ratings and avatars
- Contact Section - Contact form with validation, social links, and contact info
- Fully Responsive - Mobile-first design adapting to all screen sizes
| Setting | Value |
|---|---|
| Style | Maia |
| Base Color | Zinc |
| Accent | Cyan |
| Font | DM Sans |
| Icons | Phosphor |
| Radius | None (sharp corners) |
# Install dependencies
npm install
# Run development server
npm run dev
# Build for production
npm run buildOpen http://localhost:3000 to view the showcase.
src/
├── app/
│ ├── layout.tsx # Root layout with theme provider
│ ├── page.tsx # Main landing page
│ ├── globals.css # Theme CSS variables
│ ├── dashboard/ # Dashboard route
│ │ ├── layout.tsx # Dashboard layout with sidebar
│ │ └── page.tsx # Dashboard page
│ └── portfolio/ # Portfolio route
│ └── page.tsx # Portfolio landing page
├── components/
│ ├── ui/ # shadcn/ui components
│ ├── showcase/ # Component demo implementations
│ ├── dashboard/ # Dashboard-specific components
│ ├── portfolio/ # Portfolio-specific components
│ ├── header.tsx # Site header with nav
│ ├── hero.tsx # Hero section
│ ├── footer.tsx # Site footer
│ └── component-card.tsx # Demo wrapper component
└── lib/
├── utils.ts # Utility functions
├── dashboard-data.ts # Mock data for dashboard
└── portfolio-data.tsx # Portfolio content data
- Next.js 16 - React framework
- shadcn/ui - Component library
- Tailwind CSS - Styling
- Phosphor Icons - Icon library
- next-themes - Theme management
MIT