使用指南：Neobrutalism 组件库-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00039/article/details/141593769

使用指南：Neobrutalism 组件库

neobrutalism-componentsReact component collection.项目地址:https://gitcode.com/gh_mirrors/ne/neobrutalism-components

项目介绍

Neobrutalism 组件库是一个为 React 和 Shadcn UI 设计的 Tailwind CSS 组件集合。这个项目旨在帮助开发者学习和应用 Neobrutalism 设计风格，通过提供一系列预构建的组件来简化布局创建过程。

项目快速启动

安装

首先，确保你已经安装了 Node.js 和 npm。然后，通过以下命令克隆项目并安装依赖：

git clone https://github.com/ekmas/neobrutalism-components.git
cd neobrutalism-components
npm install

运行项目

安装完成后，使用以下命令启动开发服务器：

npm run dev

使用组件

在你的 React 项目中，可以通过导入组件来使用它们。例如：

import { Button } from 'neobrutalism-components';

function App() {
  return (
    <div>
      <Button label="Click Me" />
    </div>
  );
}

export default App;

应用案例和最佳实践

案例一：简单的登录页面

使用 Neobrutalism 组件库，你可以快速构建一个具有 Neobrutalism 风格的登录页面：

import { Input, Button } from 'neobrutalism-components';

function LoginPage() {
  return (
    <div className="flex flex-col items-center justify-center h-screen">
      <Input placeholder="Username" />
      <Input placeholder="Password" type="password" />
      <Button label="Login" />
    </div>
  );
}

export default LoginPage;