Syidax Design System

Web Components로 만든 Design System입니다.
입력, 탐색, 데이터 표시, 피드백 컴포넌트가 표준 HTML 요소로 동작해 HTML, React, Vue, Angular에서 같은 UI를 그대로 사용합니다.

Web Components 기반

한 번 작성하고, 어떤 프레임워크에서든 사용하세요.

모든 컴포넌트는 브라우저에 등록되는 표준 커스텀 엘리먼트입니다. 같은 <sy-button>이 일반 HTML 페이지와 React, Vue, Angular 앱에서 똑같이 동작하므로, 서로 다른 기술 스택을 쓰는 팀도 하나의 UI를 함께 씁니다.

HTML<sy-button variant="primary">Save</sy-button>

React<sy-button variant="primary">Save</sy-button>

Vue<sy-button variant="primary">Save</sy-button>

Angular<sy-button variant="primary">Save</sy-button>

웹 표준모든 최신 브라우저가 지원하는 Custom Elements 표준 위에 만들었습니다.
프레임워크 종속 없음특정 프레임워크에 의존하지 않아, 프레임워크를 업그레이드하거나 바꿔도 UI를 다시 만들 필요가 없습니다.
익숙한 API속성과 어트리뷰트로 상태를 설정하고, addEventListener나 프레임워크의 이벤트 바인딩으로 표준 DOM 이벤트를 처리합니다.
CSS 변수로 테마 적용디자인 토큰이 CSS 사용자 지정 속성이므로 라이트·다크 테마와 브랜드 색상이 어느 프레임워크에서든 같은 방식으로 적용됩니다.

태그를 추가하고 속성과 이벤트를 연결하는 기본 사용법.

입력, 탐색, 피드백에 알맞은 컴포넌트를 선택하는 기준.

라이트·다크 테마를 적용하고 디자인 토큰으로 색상을 조정하는 방법.

npm 패키지를 설치하고 CSS와 Web Components를 앱에 연결하세요. HTML·JavaScript, React, Vue, Angular에서 같은 커스텀 엘리먼트를 사용합니다. 아래 예제는 npm import를 처리하는 앱 빌드 도구를 사용합니다.

@syidax/core · npm을 설치하고 JavaScript 진입 파일과 HTML에 다음 코드를 추가하세요.

Terminal

npm install @syidax/core@6.0.1

JavaScript

import '@syidax/core/css/core';
import { defineCustomElement } from '@syidax/core/components/sy-button.js';

defineCustomElement();

HTML

<div class="sy-theme sy-theme-light">
  <sy-button variant="primary">Save</sy-button>
</div>

저장하기

버튼을 눌러 동작을 확인하세요.

파일 구성과 실행 순서는 설치, 속성과 이벤트 연결은 기본 사용법에서 확인할 수 있습니다.

화면에서 수행하는 역할을 기준으로 컴포넌트를 분류합니다. 각 항목의 이름을 선택하면 해당 문서로 이동합니다.

Button과 Input, Select 등 입력 컴포넌트 문서에서 실제 컴포넌트를 조작하고 적용 코드와 API를 확인하세요.