Didit/ ui (英语)

可访问且自定义的组件, 您可以复制并粘贴到您的应用程序中 。 免费,开源. 使用此程序来构建您的组件库。 。 。 .

安装

添加尾风 CSS 4

组件的样式使用Tailwind CSS. 您需要在您的项目中安装 Tailwind CSS .

遵循 Tailwind CSS 安装指令启动 .

添加依赖关系

在您的工程中添加以下依赖性 :

pnpm add  @diditui/icons-react @diditui/core tw-animate-css

添加 Inter 字体

下一个 js

使用 下个/下个 在下一个 js 应用程序中添加字体的模块

import { Inter } from "next/font/google";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
});

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

谷歌字体 css @import

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import "tailwindcss";
@import "tw-animate-css";
@import "@diditui/core/theme.css";
...

配置样式

在您的样式/ global.css 文件中添加以下内容 .

@import "tailwindcss";
@import "tw-animate-css";
@import "@diditui/core/theme.css";

@custom-variant dark (&:is(.dark *));

@layer base {
  body {
    @apply font-inter bg-neutral-white text-neutral-black;
  }
}

@layer components {
  .gradient-gray-100-900 {
    background: var(--gradient-gray-100-900);
  }

  .gradient-gray-100-300 {
    background: var(--gradient-gray-100-300);
  }

  .gradient-gray-600-500 {
    background: var(--gradient-gray-600-500);
  }

  .gradient-gray-700-500 {
    background: var(--gradient-gray-700-500);
  }

  .gradient-gray-900-800 {
    background: var(--gradient-gray-900-800);
  }

  .gradient-brand-custom {
    background: var(--gradient-brand-custom);
  }
  .gradient-brand-custom-2 {
    background: var(--gradient-brand-custom-2);
  }

  .gradient-brand-100-300 {
    background: var(--gradient-brand-100-300);
  }

  .gradient-brand-600-500 {
    background: var(--gradient-brand-600-500);
  }

  .gradient-brand-700-500 {
    background: var(--gradient-brand-700-500);
  }

  .gradient-brand-900-800 {
    background: var(--gradient-brand-900-800);
  }
}

就这样

您现在可以开始为您的项目添加组件 .

import { Button } from "diditui/core";

export default function Page() {
  return (
    <div>
      <Button variant="primary" size="md"> Create App </Buttom>
    </div>
  );
}