Vaadin Design System

오픈소스 프레임워크 를 위한 consistent, accessible enterprise 웹 apps 를 사용한 웹 컴포넌트.

제품 개요

Vaadin Design System is Vaadin's official open-source design system for building modern, consistent, and accessible enterprise web applications using web components (Hilla/Lit-based). It provides reusable UI components, patterns, guidelines, and tools focused on business applications like dashboards, forms, and data grids, emphasizing performance, theming, and developer productivity. It integrates seamlessly with Vaadin Flow (Java) and Hilla (TypeScript/React) frameworks for full-stack development. Component Library: Reusable web components like buttons, grids, charts, forms, date pickers, and layouts with variants for themes (light/dark/Lumo). Design Tokens: Semantic colors, typography, spacing, shadows, and motion for easy theming. Accessibility: WCAG 2.1 AA compliance with ARIA support and keyboard navigation. Tools: Figma kit for prototyping; Vaadin components for implementation; Theme Editor for customization.

주요 기능

컴포넌트 라이브러리: Reusable 웹 컴포넌트 같은 buttons, grids, charts, forms, date pickers, 및 layouts 를 사용한 variants 를 위한 themes (light/dark/Lumo).
디자인 토큰: Semantic 색상, 타이포그래피, 간격, shadows, 및 motion 를 위한 쉬운 theming.
접근성: WCAG 2.1 AA compliance 를 사용한 ARIA 지원 및 keyboard navigation.
도구: Figma 키트 를 위한 프로토타이핑; Vaadin 컴포넌트 를 위한 implementation; Theme Editor 를 위한 사용자 정의.

장점

+오픈 소스
+색상 팔레트 생성
+접근성 대비 검사
+부드러운 애니메이션 기능

단점

-도입 시 팀 조율 필요
-커스터마이징이 복잡할 수 있음

/// 스펙

가격:
Free
플랫폼:
Browser

ASSETS_DIRECTORY

figma

/// 유사 도구

Specify

디자인 시스템 에셋 동기화 도구

Zeroheight

디자인 시스템 문서화 플랫폼

SmartHR UI

오픈소스 React 컴포넌트 라이브러리 를 위한 consistent, accessible HR 플랫폼 interfaces.

U.S. Web Design System

웹 디자인 시스템: official U.S. government 프레임워크 를 위한 consistent, accessible public digital services.

UNDP Design System

official U.S. government 프레임워크 를 위한 consistent, accessible public digital services.

VKUI

VK's 오픈소스 React 라이브러리 를 위한 consistent, accessible interfaces 에서 VK apps 및 services.

VTEX Design System

오픈소스 프레임워크 를 위한 consistent, accessible e-commerce interfaces.

Vibe Design System

monday.com's 오픈소스 디자인 시스템 를 위한 consistent, accessible 작업 management interfaces.

Watt Design System

Holaluz's Figma-기반 UI 키트 를 위한 consistent, accessible renewable energy interfaces.

A2UI

오픈소스 protocol 를 위한 AI agents 로 생성 안전한, declarative UIs 전체에 걸쳐 platforms.