A favicon of matsu-theme

matsu-theme

A Ghibli Studio-inspired theme for shadcn/ui by Matt Wierzbicki, featuring a unique color palette, watercolor texture, and themed components.

A screenshot of matsu-themeVisit

Matsu-theme: Ghibli-Inspired Styling for shadcn/ui

Matsu-theme, created by Matt Wierzbicki, infuses shadcn/ui projects with the enchanting aesthetic of Ghibli Studio. It is designed to be modern, clean, and easily customizable. The theme stands out with its unique color palette, directly inspired by Ghibli's iconic art style, and a subtle watercolor paper texture. This combination allows developers to craft visually appealing and distinctive user interfaces, adding an artistic touch to their applications and enhancing the overall user experience with its beautiful design.

Features:

  • Ghibli Studio Inspired Design: Imbues applications with the distinctive artistic style of Ghibli films.
  • Unique Color Palette: Features a curated selection of colors reflecting Ghibli's signature aesthetics.
  • Watercolor Paper Texture: Implements a subtle background texture for an authentic, artistic paper-like feel.
  • Theme Variable Installation: Overrides default shadcn/ui variables and updates globals.css via a specific npx shadcn@latest add command using the theme's JSON URL.
  • Themed Component Installation: Replaces default shadcn/ui components with Matsu-themed versions using a dedicated npx shadcn@latest add command with the components' JSON URL.
  • Font Integration Example: Provides a layout.tsx file demonstrating the setup for Nunito and PT Sans fonts, integral to the theme's look.
  • Texture Background Implementation: Includes an example in layout.tsx for applying the theme's characteristic texture background.
  • Masked Image Component: Offers a specifically themed 'Masked Image' component as part of its component set.
  • Example Page Demonstrations: Showcases the theme's application on 'Login' and 'Dashboard' example pages, illustrating its appearance in common UI scenarios.

Summary:

Matsu-theme provides a Ghibli Studio-inspired customization layer for shadcn/ui. Authored by Matt Wierzbicki, it offers a distinctive color scheme, a watercolor paper texture, and pre-styled components. Installation is streamlined using shadcn/ui's CLI commands for both theme variables and components. This enables developers to quickly integrate a modern, clean, and visually unique Ghibli aesthetic into their React and Next.js projects, enriching interfaces with an artistic and cohesive look.

Distribution:
opensource
0
Share:

 

  
 

Similar to matsu-theme:

 

  
  

 

  
  

 

  
  
matsu-theme: Bring Ghibli's charm to shadcn/ui with Matsu's unique theme. – Awesome-Shadcn/ui