HeroUI Design System

HeroUI Theme

파란색 팔레트 기반 HeroUI v3 디자인 언어로 재현한 Bootstrap 5 테마입니다.

Buttons

Solid, Outline, Ghost(link), Sizes, States, Group

Solid

Outline

Ghost (btn-link)

Sizes, States & Icon

Button Group

Chips & Badges

Chip, Bordered, Closable, Badge, Notification

Solid Chips

Default Primary Secondary Success Warning Danger Info

Bordered & Closable

Primary Secondary Success React Vue.js

Badges

Primary Secondary Success Warning Danger Info Dark Light Pill Subtle

Typography

Headings, Lead, Inline, Code, Blockquote

Headings

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading
h6. Heading

Inline & Display

Lead paragraph text, slightly larger.

일반 본문. 굵게, 이탤릭, 밑줄, 취소선

인라인 코드, Ctrl+K, 하이라이트

Muted text. 보조 정보 표시에 사용됩니다.

Gradient Primary

Gradient Secondary

Blockquote

"디자인은 어떻게 보이는가가 아니라 어떻게 작동하는가이다."

Steve Jobs

Code Block

const theme = 'heroui'
import { Button } from '@heroui/react'

export default function App() {
  return <Button color="primary">
    Hello {theme}!
  </Button>
}

Forms

Input, Select, Textarea, Checkbox, Radio, Range, Switch, Floating label, Validation

Basic Inputs

Icon & Input Group

@
원
유효하지 않은 값입니다.

Floating Labels

Check, Radio & Switch

Range

Cards

Basic, Image, Hover, Glass, Horizontal, Footer

빠른 성능

최적화된 코드베이스로 빠른 로딩 속도를 제공합니다.

자세히 보기
🎨
디자인
아름다운 UI

HeroUI의 파란색 디자인 언어를 Bootstrap으로 재현합니다.

2024-01-01
Glass Card

모피즘 효과의 글래스 카드입니다.

또는
🚀
Horizontal Card

좌우 레이아웃의 수평 카드입니다. 이미지와 내용을 나란히 배치합니다.

Bootstrap HeroUI

Avatars

Sizes, Colors, Status, Group, Bordered, Square

Sizes & Colors

A
B
C
D
E
F
G

Status & Group & Bordered

홍
김
이
박
A
B
C
+3
SQ
BD

Alerts

HeroUI-style, Bootstrap standard, Dismissible

HeroUI Style (Left Border)

ℹ️
정보 새로운 업데이트가 있습니다.
✅
성공! 저장이 완료되었습니다.
⚠️
경고 주의가 필요합니다.
❌
오류 처리할 수 없습니다.

Bootstrap Standard & Dismissible

Progress & Spinners

Progress bar, Striped, Animated, Multi-bar, Custom spinner

Progress Bars

Primary75%
Success60%
Warning45%
Danger30%
Striped & Animated55%
Multi-bar

Custom Spinners

Bootstrap Spinners

Skeleton

Loading placeholder animations

Card Skeleton

Profile Skeleton

Tables

Hover, Striped, Bordered, Responsive

#이름역할상태가입일액션
1
홍
홍길동
 Admin Active 2024-01-15
2
김
김철수
 Editor Pending 2024-02-20
3
이
이영희
 Viewer Inactive 2024-03-10
ColorHexChange
Primary#006FEE+12.4%
Secondary#7828C8-2.1%
Success#17C964+5.8%
기능FreePro
컴포넌트50개무제한
다크모드✅✅
커스텀 테마❌✅

Accordion

Standard, Flush, Always-open

Standard

HeroUI는 React 기반의 현대적인 UI 컴포넌트 라이브러리로, 아름다운 디자인과 접근성을 제공합니다.

네! Bootstrap Hero 프로젝트를 통해 HeroUI 디자인 언어를 Bootstrap CSS로 재현할 수 있습니다.

네! 우측 상단의 🌙 버튼을 눌러 다크모드로 전환할 수 있습니다.

Flush & Always-open

Flush 스타일은 테두리 없이 깔끔합니다.

두 번째 아이템 내용입니다.

다른 항목을 열어도 닫히지 않습니다.

두 항목을 동시에 열 수 있습니다.

List Group

Basic, Active, Flush, Numbered, Badge

  • 현재 활성 항목
  • 두 번째 항목
  • 세 번째 항목
  • 네 번째 항목
  • 비활성화된 항목
  • 알림 14
  • 메시지 5
  • 작업 완료 Done
  1. 첫 번째 항목
  2. 두 번째 항목
  3. 세 번째 항목

Offcanvas

Start, End, Top, Bottom

Side Panel

Start 방향 오프캔버스입니다.

  • Dashboard
  • Analytics
  • Settings
  • Profile
Notifications

End 방향 오프캔버스입니다.

🔔
새 메시지가 도착했습니다.
✅
배포가 완료되었습니다.
Top Panel
Top 방향 오프캔버스입니다. 검색바 등에 활용됩니다.
Bottom Sheet
Bottom 방향 오프캔버스입니다. 모바일 시트 패턴에 활용됩니다.

Toast

Success, Warning, Danger notifications

Tooltip & Popover

4 directions each

Tooltip

Popover

Utilities & Misc

Gradient Text, Shadows, Divider, Kbd, Color Swatches

Gradient Text

Gradient Primary

Gradient Secondary

Rainbow Gradient

Solid Buttons

HeroUI Color Swatches

Divider & Kbd

또는

Ctrl+K 검색   ⌘+S 저장

Close Button