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

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

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

演示页面

Login Page

matsu-theme.vercel.app/login#

Dashboard Page

matsu-theme.vercel.app/dashboard

Component

matsu-theme.vercel.app/test

Masked Image

如何使用

安装主题

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

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

安装组件

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

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

字体&纹理背景

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 使用

安装

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

使用

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

落地页

最后

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