Motile UI
웹뷰 애플리케이션을 위한 모던 React 컴포넌트 라이브러리
주요 기능
- 16개의 고품질 컴포넌트
웹뷰 애플리케이션을 위해 세심하게 제작된 컴포넌트
- TypeScript 우선
포괄적인 타입 정의 완벽 지원
- 커스터마이징 가능
CSS 변수로 쉬운 테마 설정
- 모바일 최적화
터치 친화적 인터랙션과 반응형 디자인
- 접근성
WCAG 2.1 AA 준수 컴포넌트
- 트리쉐이킹 지원
필요한 것만 import
설치
React 18.0.0 이상, React DOM 18.0.0 이상이 필요합니다.
1# npm
2npm install motile-ui
3
4# yarn
5yarn add motile-ui
6
7# pnpm
8pnpm add motile-ui빠른 시작
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 변수를 통해 전역 테마를 쉽게 커스터마이징할 수 있습니다.
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}