Hello， 大家好，我是程序员海军, 全栈开发 |AI爱好者 ｜ 独立开发。
今天给大家分享一套吉卜力风格 shadcn-ui 主题 ，一键给自己的网站焕然一新。这款主题设计简洁现代，易于使用和自定义。 我们可以利用这套主题快速搭建套壳AI[ChatGPT] 应用套壳生成 吉卜力风格 Image或者 吉卜力风格 站点。
演示页面
Login Page
Dashboard Page
matsu-theme.vercel.app/dashboard
Component
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
落地页
最后
既然已经读到了这里，如果您觉得内容还不错，欢迎随手点个赞、在看❤️🌟，并转发给更多的人看到。