Motile UI

v1.3.1

웹뷰 애플리케이션을 위한 모던 React 컴포넌트 라이브러리

주요 기능

16개의 고품질 컴포넌트

웹뷰 애플리케이션을 위해 세심하게 제작된 컴포넌트

TypeScript 우선

포괄적인 타입 정의 완벽 지원

커스터마이징 가능

CSS 변수로 쉬운 테마 설정

모바일 최적화

터치 친화적 인터랙션과 반응형 디자인

접근성

WCAG 2.1 AA 준수 컴포넌트

트리쉐이킹 지원

필요한 것만 import

설치

React 18.0.0 이상, React DOM 18.0.0 이상이 필요합니다.

BASH

1npm install motile-ui

빠른 시작

TSX

1import { Button, Input, Modal } from "motile-ui";
2
3function App() {
4  return (
5    <div>
6      <Button variant="primary" size="large">
7        클릭하세요
8      </Button>
9
10      <Input
11        label="이메일"
12        placeholder="이메일을 입력하세요"
13        type="email"
14      />
15
16      <Modal open={true} onOpenChange={() => {}}>
17        <h2>안녕하세요 Motile UI!</h2>
18      </Modal>
19    </div>
20  );
21}

테마 커스터마이징

CSS 변수를 통해 전역 테마를 쉽게 커스터마이징할 수 있습니다.

CSS

1:root {
2  --motile-theme: #3b82f6;           /* 모든 컴포넌트의 기본 색상 */
3  --motile-ui-btn: #10b981;          /* 모든 버튼 색상 */
4  --motile-ui-input: #8b5cf6;        /* Input 포커스 색상 */
5  --motile-ui-checkbox: #f59e0b;     /* Checkbox 체크 색상 */
6  --motile-ui-switch: #14b8a6;       /* Switch 활성화 색상 */
7}