ghibli-style-shadcn-components

KO | EN

gitlite — search

#typescript #ai-agents #ai #dsh-plugin #deepseek-harness #open-source #cli #claude-code #codex #developer-tools #react #windows

ghibli-style-shadcn-components

★ 29 Open GitHub ↗

No description available.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Ghibli-Style Dashboard

A beautiful Next.js dashboard application using the Matsu theme, a Ghibli Studio-inspired theme for shadcn/ui. This project combines modern web technologies with the beautiful aesthetic of Ghibli's animation, featuring a unique color palette and watercolor paper texture.

## Features

- 🎨 Matsu theme with Ghibli-inspired design elements
- 🌊 Watercolor paper texture background
- 📱 Responsive design that works on all devices
- 🎯 Modern dashboard components from Shadcn UI
- ⚡ Built with Next.js 15 and React 19
- 🎭 Styled with Tailwind CSS and shadcn/ui components

## Theme Installation

This project uses the [Matsu theme](https://matsu-theme.vercel.app?ref=kulkarniankita) for shadcn/ui. To install the theme:

```bash
# Install theme variables
npx shadcn@canary add https://matsu-theme.vercel.app/r/matsu-theme.json

# Install themed components
npx shadcn@canary add https://matsu-theme.vercel.app/r/matsu-theme-components.json
```

Follow [Matsu theme's docs](https://matsu-theme.vercel.app?ref=kulkarniankita) for the rest.

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

## Tech Stack

- [Next.js](https://nextjs.org?ref=kulkarniankita) - React framework
- [Tailwind CSS](https://tailwindcss.com?ref=kulkarniankita) - Utility-first CSS framework
- [shadcn/ui](https://ui.shadcn.com?ref=kulkarniankita) - Re-usable components
- [Matsu Theme](https://matsu-theme.vercel.app?ref=kulkarniankita) - Ghibli-inspired theme
- [TypeScript](https://www.typescriptlang.org?ref=kulkarniankita) - Type safety
- [React Day Picker](https://react-day-picker.js.org?ref=kulkarniankita) - Calendar component
- [Lucide React](https://lucide.dev?ref=kulkarniankita) - Beautiful icons

## Development

You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

This project uses custom fonts from Google Fonts:

- Nunito for headings
- PT Sans for body text

## Learn More

To learn more about the technologies used in this project:

- [Next.js Documentation](https://nextjs.org/docs?ref=kulkarniankita)
- [Tailwind CSS Documentation](https://tailwindcss.com/docs?ref=kulkarniankita)
- [shadcn/ui Documentation](https://ui.shadcn.com?ref=kulkarniankita)
- [Matsu Theme Documentation](https://matsu-theme.vercel.app?ref=kulkarniankita)

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme).

Check out the [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying?ref=kulkarniankita) for more details.

## Learn Next.js with Me! 🚀

Want to master Next.js and build production-ready apps? Check out my comprehensive course:

### The Modern Full Stack Next.js Course

A hands-on interactive course that teaches you how to build production-ready apps with Next.js. You won't just watch me code - you'll learn by doing with lots of exercises, interactive demos, and real-world projects.

**What you'll learn:**

- Next.js fundamentals to advanced concepts
- Server & Client Components patterns
- Data fetching strategies
- Caching mechanisms
- Server Actions
- SEO optimization
- Production deployment
- And much more!

[Join the Waitlist](https://nextjscourse.dev/?ref=kulkarniankita) to get early access and exclusive bonuses!

ghibli-style-shadcn-components

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README