治愈画风 | 吉卜力风格的Shadcn主题分享 附上安装教程
你是否也喜欢吉卜力动画那种温暖、治愈的风格？今天为大家推荐一个超级精美的 Shadcn UI 主题 - Matsu Theme，它将吉卜力的艺术风格完美融入到了 Web 界面设计中。
主题预览
登录页面
首页
组件
Dashboard
安装教程
注意：安装会覆盖掉你项目当前的配置和组件，可以先备份再执行。
首先确保你的项目已经安装了 Shadcn UI
安装主题配置
npx shadcn@canary add https://matsu-theme.vercel.app/r/matsu-theme.json
安装组件
npx shadcn@canary add https://matsu-theme.vercel.app/r/matsu-theme-components.json
配置Layout
这个 Layout 主要是获得有质感的背景。
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>
);
}
在线预览
总结
如果你正在寻找一个独特、精美且充满艺术感的 UI 主题，Matsu Theme 绝对值得一试。它不仅能为你的项目带来视觉上的享受，更能让用户感受到吉卜力动画般的温暖与治愈。