🦊

ジブリ風の可愛いshadcnのテーマを見つけたぞ！

2025/09/24に公開

 ジブリ風のCSSライブラリ「Matsu-theme for shadcn/ui」題名の通りなんですが、ふと海外デベロッパーのyoutubeを見ていたところ流れてきたshadcnのテーマがこちら

 個人開発で使って見た結果試しに使ってみたらいい感じだったのでメディアサイトを作ってみた

技術スタック
Next.js + TypeScript + Tailwind CSS基盤構築
Supabase認証システム（Google/GitHub OAuth）
https://japan-startup-times.vercel.app/
ライブラリの場所👇

https://matsu-theme.vercel.app/?ref=kulkarniankita

 使い方使い方も超簡単でinstallしてlayoutファイルにぶち込んであとは通常のshadcnと同様に実装していくだけです。
import type { Metadata } from "next";
import { Nunito } from "next/font/google";
import { PT_Sans } from "next/font/google";
import "./globals.css";

const nunito = Nunito({
  variable: "--font-nunito",
  subsets: ["latin"],
});

const ptSans = PT_Sans({
  variable: "--font-pt-sans",
  subsets: ["latin"],
  weight: ["400", "700"],
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${nunito.variable} ${ptSans.variable} antialiased relative`}
      >
        <div className="texture" />
        {children}
      </body>
    </html>
  );
}
個人開発で使ってみたい方はお試しあれ！

ジブリ風のCSSライブラリ「Matsu-theme for shadcn/ui」

個人開発で使って見た結果

使い方

Discussion