一键把网站变成吉卜力风格的神器来了

Hello，大家好，我是程序员海军, 全栈开发 |AI爱好者 ｜ 独立开发。

今天给大家分享一套吉卜力风格 shadcn-ui 主题，一键给自己的网站焕然一新。这款主题设计简洁现代，易于使用和自定义。我们可以利用这套主题快速搭建套壳AI[ChatGPT] 应用套壳生成吉卜力风格 Image或者吉卜力风格站点。

演示页面

matsu-theme.vercel.app/login#

Dashboard Page

matsu-theme.vercel.app/dashboard

Component

matsu-theme.vercel.app/test

Masked Image

如何使用

安装主题

这将覆盖默认变量并将类添加到您的 globals.css 文件中。

jsx 复制代码

npx shadcn@latest add https://matsu-theme.vercel.app/r/matsu-theme.json

安装组件

这将用 Matsu 主题组件覆盖默认组件。

jsx 复制代码

npx shadcn@latest add https://matsu-theme.vercel.app/r/matsu-theme-components.json

字体&纹理背景

jsx 复制代码

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>
  );
}

Masked Image 使用

安装

jsx 复制代码

npx shadcn@latest add https://matsu-theme.vercel.app/r/masked-image.json

使用

jsx 复制代码

import { MaskedImage } from "@/components/ui/masked-image";

// With a specific mask shape variant
<MaskedImage 
  src="/path/to/image.jpg" 
  alt="Description" 
  width={500} 
  height={500} 
  variant="shape3" 
/>

Props

Prop	Type	Default	Description
`src`	string	(required)	The source URL of the image
`alt`	string	(required)	Alt text for accessibility
`width`	number	(required)	Width of the image
`height`	number	(required)	Height of the image
`variant`	"shape1" "shape2" "shape3" "shape4" "shape5" "shape6"	"shape1"	The mask shape variant to apply
`className`	string	undefined	Additional CSS classes to apply

玩法

下面分享一些网友利用这套主题做的应用.

Todolist

落地页

最后

既然已经读到了这里，如果您觉得内容还不错，欢迎随手点个赞、在看❤️🌟，并转发给更多的人看到。

一键把网站变成吉卜力风格的神器来了

演示页面

Login Page

Dashboard Page

Component

Masked Image

如何使用

安装主题

安装组件

字体&纹理背景

Masked Image 使用

安装

使用

Props

玩法

Todolist

落地页

最后