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

本文链接：https://blog.csdn.net/W1391517383/article/details/147395858

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

演示页面

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

安装

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