NuxtUI v4 Theme
에메랄드 그린 primary, slate neutral, DM Sans 폰트가 특징인 NuxtUI v4 스타일입니다.
Buttons
Variants
Sizes & States
Cards
Dashboard
Total Revenue
$45,231
↑ 20.1% from last month
Team
Recent Activity
SD
New
Sofia Davis
Created new project
JL
Done
Jackson Lee
Merged pull request
Settings
Notifications
Email alerts
Get notified by email
Push notifications
Browser notifications
Alerts
Information — New updates are available for your project.
Success — Your changes have been saved successfully.
Warning — Your session will expire in 10 minutes.
Error — Failed to process your request. Please try again.
Badges
Solid
Primary
Neutral
Success
Warning
Error
Info
Soft
Primary
Neutral
Success
Warning
Error
Avatars
Sizes & Colors
A
B
C
D
E
Status & Group
홍
김
이
A
B
C
+2
Inputs & Forms
Basic Inputs
States & Checks
유효하지 않은 값입니다.
Range
Progress & Spinners
Progress
Primary75%
Success60%
Warning45%
Error30%
Spinners
Skeleton
Table
| Name | Role | Status | Actions | |
|---|---|---|---|---|
|
SD
Sofia Davis
|
sofia@example.com | Owner | Active | |
|
JL
Jackson Lee
|
jackson@example.com | Member | Active | |
|
AK
Alice Kim
|
alice@example.com | Member | Inactive |
List Group
- 기본 항목
- 알림 설정 3
- 활성 항목
-
Sofia Davissofia@example.com
- 비활성 항목
Accordion
NuxtUI v4는 Nuxt.js 생태계를 위한 완전히 재설계된 UI 컴포넌트 라이브러리입니다. Tailwind CSS v4 기반으로 빌드되어 있으며, 다크 모드와 커스터마이징이 용이합니다.
npm install @nuxt/ui를 실행하고 nuxt.config.ts에 모듈을 추가하면 바로 사용할 수 있습니다.
네, CSS 변수(
--ui-*)를 통해 전체 디자인 시스템을 손쉽게 커스터마이징할 수 있습니다.
Tabs & Nav
Tabs
프로젝트의 전반적인 현황을 확인할 수 있습니다.
상세 분석 데이터를 확인합니다.
계정 및 알림 설정을 관리합니다.
Pills Nav
Dropdown
Breadcrumb & Pagination
Breadcrumb
Pagination
Modal & Toast
Tooltip & Popover
Offcanvas
Typography & Utilities
const theme = 'nuxtui'
// NuxtUI v4 CSS tokens
document.body.style
.setProperty('--ui-primary', '#00c16a')