Repolode
heroui-inc

heroui-inc/heroui

React Aria와 Tailwind CSS v4를 기반으로 한 React UI 컴포넌트 라이브러리로, 이전 이름은 NextUI입니다.

스타
30,968
포크
2,237
열린 이슈
24
마지막 커밋
그저께

어떤 프로젝트인가요?

HeroUI는 React Aria의 접근성 프리미티브와 Tailwind CSS v4 스타일링을 결합한 React 컴포넌트 라이브러리입니다. Card.Header, Select.Item 같은 컴파운드 컴포넌트 API를 제공하며, 앱을 Provider로 감쌀 필요가 없습니다. React 19와 Next.js에서 사용할 수 있고, 전체 번들로 설치하거나 컴포넌트를 개별적으로 가져와 트리 셰이킹할 수 있습니다.

이 라이브러리는 React로 SaaS 대시보드, 관리자 패널, 온라인 스토어, 마케팅 사이트를 구축하는 제품 팀을 대상으로 합니다. CSS-in-JS 런타임 없이 Tailwind로 스타일을 처리하며, 별도의 styles 패키지에서 테마만 독립적으로 제공하기도 합니다. 또한 Cursor, Claude Code 같은 AI 코딩 어시스턴트를 위한 MCP 서버, llms.txt 파일, 에이전트 스킬도 포함되어 있습니다.

HeroUI는 NextUI의 v3 후속 버전입니다. 기존 프로젝트를 위해 버전 2도 별도의 문서 사이트에서 계속 제공됩니다.

핵심 기능

  • 01React Aria를 기반으로 키보드, 포커스, 스크린 리더 동작을 지원
  • 02CSS-in-JS 런타임 없이 Tailwind CSS v4로 스타일링
  • 03Card.Header, Select.Item 같은 컴파운드 컴포넌트 API
  • 04Provider로 감쌀 필요 없이 React 19와 Next.js에서 사용 가능
  • 05트리 셰이킹을 위한 컴포넌트별 패키지와 독립형 styles 패키지 제공
  • 06AI 코딩 어시스턴트를 위한 MCP 서버, llms.txt, 에이전트 스킬 제공

활용 사례

  • 폼, 테이블, 오버레이, 알림을 갖춘 SaaS 애플리케이션 구축
  • 일관된 디자인 토큰을 적용한 관리자 대시보드 제작
  • 접근성 높은 컴포넌트로 Next.js 마케팅 사이트나 랜딩 페이지 개발
  • NextUI 프로젝트를 v3 API로 마이그레이션

빠른 시작

  1. 1

    HeroUI 빠른 시작 문서를 확인하세요

  2. 2

    스타일 및 React 컴포넌트 패키지를 설치하세요

    npm install @heroui/styles @heroui/react

사용 전 알아둘 점

  • 현재 v3 릴리스의 문서는 아직 정비 중이며, README에서는 이전 버전을 위한 별도의 v2 사이트를 안내합니다.

토픽

자주 묻는 질문

heroui은(는) 무엇인가요?
React Aria와 Tailwind CSS v4를 기반으로 한 React UI 컴포넌트 라이브러리로, 이전 이름은 NextUI입니다. HeroUI는 React Aria의 접근성 프리미티브와 Tailwind CSS v4 스타일링을 결합한 React 컴포넌트 라이브러리입니다. Card.Header, Select.Item 같은 컴파운드 컴포넌트 API를 제공하며, 앱을 Provider로 감쌀 필요가 없습니다. React 19와 Next.js에서 사용할 수 있고, 전체 번들로 설치하거나 컴포넌트를 개별적으로 가져와 트리 셰이킹할 수 있습니다.
heroui은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
heroui은(는) Apache-2.0 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
heroui은(는) 아직 유지보수되고 있나요?
활발히 유지보수 중. heroui의 마지막 커밋은 2026년 10월 18일입니다.
heroui은(는) 어디에 사용할 수 있나요?
폼, 테이블, 오버레이, 알림을 갖춘 SaaS 애플리케이션 구축 일관된 디자인 토큰을 적용한 관리자 대시보드 제작 접근성 높은 컴포넌트로 Next.js 마케팅 사이트나 랜딩 페이지 개발 NextUI 프로젝트를 v3 API로 마이그레이션
heroui는 어떻게 설치하나요?
HeroUI 빠른 시작 문서를 확인하세요 스타일 및 React 컴포넌트 패키지를 설치하세요: npm install @heroui/styles @heroui/react
heroui은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/heroui-inc/heroui

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트