🚀使用精美组件更快交付

隆重介绍 HeroUI 🔥

制作

美观的

网站，无论您的设计经验如何。

美观、快速和现代的 React UI 库，用于构建可访问和可定制的 Web 应用程序。

$ npx heroui-cli@latest init

输入框

Professional camera

相机

$525

Zoey Lang

@zoeylang

全栈开发者，@hero_ui 爱好者 she/her 🎉

4

已关注

9.71 万

关注者

Woman listing to music

即将推出。

可主题化

提供一个插件来自定义默认主题，您可以更改所有语义令牌或创建全新的主题。

快速

构建于 Tailwind CSS 之上，这意味着没有运行时样式，并且您的 bundle 中没有不必要的类。

浅色和深色 UI

自动暗黑模式识别，HeroUI 在检测到 HTML 主题属性更改时自动更改主题。

独特的 DX

HeroUI 完全类型化，以最大限度地减少学习曲线，并提供最佳的开发者体验。

支持和赞助

应用您自己的

主题

决策。

HeroUI 提供了一个自定义 TailwindCSS 插件，允许您自定义默认主题或创建自己的主题。

Shoes theme example


tailwind.config.js
const { heroui } = require("@heroui/react");

module.exports = {
  // ...
  plugins: [
    heroui({
      themes: {
        light: {
          colors: {
            primary: "#0072f5",
          }
        },
        dark: {
          colors: {
            primary: "#0072f5",
          }
        },
      },
    }),
  ],
};

module.exports = {
  // ...
  plugins: [
    heroui({
      themes: {
        light: {
          colors: {
            primary: "#7828c8",
          }
        },
        dark: {
          colors: {
            primary: "#9353d3",
          }
        },
      },
    }),
  ],
};

module.exports = {
  // ...
  plugins: [
    heroui({
      themes: {
        light: {
          colors: {
            primary: "#FFFFFF",
          }
        },
        dark: {
          colors: {
            primary: "#000000",
          }
        },
      },
    }),
  ],
};

module.exports = {
  // ...
  plugins: [
    heroui({
      themes: {
        light: {
          colors: {
            primary: "#FFD34E",
            secondary: "#EE457E",
            background:"#F4E8D1"
          }
        },
        dark: {
          colors: {
            primary: "#FFD34E",
            secondary: "#EE457E",
            background: "#E1CA9E"
          }
        },
      },
    }),
  ],
};

无障碍功能

开箱

即用。

HeroUI 组件构建于 React Aria 之上，确保将卓越的无障碍支持作为首要任务。

键盘导航

托管焦点

碰撞感知

对齐控制

屏幕阅读器支持

Typehead 支持

深色模式

是

毫不费力的。

HeroUI 配备了完全良好扩展的默认深色主题，您只需将 dark 属性添加到您的 html 即可将其应用于您的应用程序。

Album cover

每日精选

12 首曲目

前端电台

1:23

4:32


_app.tsx
import React from "react";
import {HeroUIProvider} from "@heroui/react";

const Application = ({Component, pageProps}) => {
  return (
    <HeroUIProvider>
      <main className={isDark ? "dark" : "light"}>
        <Component {...pageProps} />
      </main>
    </HeroUIProvider>
  );
};

export default Application;

自定义变得

简单。

HeroUI 基于 Tailwind Variants，它简化了组件插槽自定义，同时避免了 Tailwind 类冲突。


custom-button.tsx
import React from 'react';
import {Button} from '@heroui/react';
import confetti from 'canvas-confetti';

const CustomButton = () => {
  const handleConfetti = () => {
    confetti({...});
  };

  return (
    <Button
      ref={buttonRef}
      disableRipple
      className="relative overflow-visible rounded-full hover:-translate-y-1 px-12 shadow-xl bg-background/30 after:content-[''] after:absolute after:rounded-full after:inset-0 after:bg-background/40 after:z-[-1] after:transition after:!duration-500 hover:after:scale-150 hover:after:opacity-0"
      size="lg"
      onPress={handleConfetti}
    >
      Press me
    </Button>
  );
};

export default CustomButton;

最后

但

并非

最不重要。

一个功能齐全的 React UI 库。

React 服务器组件

所有 HeroUI 组件都已包含 "use client" 指令，这意味着您可以直接在您的 RSC 中导入和使用它们。

无障碍组件

HeroUI 组件遵循 WAI-ARIA 指南，提供键盘支持和合理的焦点管理。

焦点交互

仅当用户使用键盘或屏幕阅读器导航时，焦点环才会出现。

多个包

HeroUI 被分为多个包，因此您只需安装所需的组件。

基于 TypeScript

构建类型安全的应用，HeroUI 具有完全类型化的 API，可最大限度地减少学习曲线，并帮助您构建应用程序。

覆盖组件标签

所有 HeroUI 组件中都包含一个多态的 `as` 属性。

无运行时样式

HeroUI 基于 Tailwind CSS，这意味着没有运行时样式，并且您的 bundle 中没有不必要的类。

精美设计

HeroUI 组件是独一无二的，并且不与任何视觉趋势或设计规则绑定，这使我们以及您的项目都与众不同。

支持 HeroUI

在盈利产品、作为自由职业者或用于娱乐项目中使用 HeroUI？您的贡献将有助于使 HeroUI 变得更好。

让我们让

Web

更漂亮

亲身体验并向我们展示您的作品！

开始使用 Github

社区

参与我们的社区。欢迎所有人！