Magic UI
Back to all articles
Notes

治愈画风 | 吉卜力风格的Shadcn主题分享 附上安装教程

你是否也喜欢吉卜力动画那种温暖、治愈的风格？今天为大家推荐一个超级精美的 Shadcn UI 主题

治愈画风 | 吉卜力风格的Shadcn主题分享 附上安装教程

你是否也喜欢吉卜力动画那种温暖、治愈的风格？今天为大家推荐一个超级精美的 Shadcn UI 主题 - Matsu Theme，它将吉卜力的艺术风格完美融入到了 Web 界面设计中。

主题预览

登录页面
alt text

登录页面

alt text

首页

alt text

组件

alt text

Dashboard

alt text

安装教程

注意：安装会覆盖掉你项目当前的配置和组件，可以先备份再执行。

首先确保你的项目已经安装了 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 绝对值得一试。它不仅能为你的项目带来视觉上的享受，更能让用户感受到吉卜力动画般的温暖与治愈。

Read more

1.5G到200M，TurboRepo Docker镜像优化指南:轻松打造轻量级镜像

1.5G到200M，TurboRepo Docker镜像优化指南:轻松打造轻量级镜像

最近往我的TurboRepo中添加了几个后端项目，然后使用Docker部署到服务器上，网上的TurboRepo的打包部署教程比较少，而且有些文章给的方法让Docker的镜像变得很大，所以我这里记录一下我是怎么减少镜像大小的。

Swift接入Apollo GraphQL并使用CLI生成代码

Swift接入Apollo GraphQL并使用CLI生成代码

✏️ 笔者是GraphQL深度爱好者，在学习Swift开发过程中也希望能够将其引入，过程中也遇到一些包管理问题，参阅了官网文档后成功接入，下面是整个过程。

Xcode保存自动格式化

Xcode保存自动格式化

✏️ 不像JetBrain或者VS Code，Xcode本身没有保存自动格式化的能力，因此记录一下实现自动化的过程。