使用指南:Neobrutalism 组件库
项目介绍
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;
最佳实践
- 一致性:在整个项目中保持设计风格的一致性,确保所有组件都遵循 Neobrutalism 风格。
- 可访问性:确保所有组件都符合 Web 可访问性标准,例如使用合适的对比度和键盘导航。
典型生态项目
Shadcn UI
Shadcn UI 是一个与 Neobrutalism 组件库紧密集成的 UI 框架,提供了丰富的组件和工具,帮助开发者构建现代化的 Web 应用。
Tailwind CSS
Tailwind CSS 是一个实用程序优先的 CSS 框架,广泛用于快速构建自定义用户界面。Neobrutalism 组件库充分利用了 Tailwind CSS 的灵活性和强大功能。
通过结合这些生态项目,开发者可以更高效地构建具有 Neobrutalism 风格的现代 Web 应用。