Getting started

Confy-ui를 설치하고 몇 분 안에 빌드를 시작하세요.

Confy-ui는 최소한의 구성으로 즉시 사용할 수 있도록 설계된 사전 스타일링된 컴포넌트 라이브러리입니다.

Installation

시작하는 것은 빠르고 쉽습니다.

1. Install Confy-ui

명령줄에서 패키지를 설치합니다.

npm install @confy-ui/react

2. Import the CSS file

애플리케이션의 루트에서 전역 CSS 파일을 가져옵니다.

import "@confy-ui/react/styles.css";

3. Add the Theme component

body 내부의 루트 컴포넌트를 감싸는 Theme를 추가합니다.

import { Theme } from "@confy-ui/react/themes";

export default function () {
	return (
		<html>
			<body>
				<Theme>
					<MyApp />
				</Theme>
			</body>
		</html>
	);
}

4. Start building

이제 Confy-ui 컴포넌트를 사용할 준비가 되었습니다.

import { Flex, Text, Button } from "@confy-ui/react/themes";

export default function MyApp() {
	return (
		<Flex direction="column" gap="2">
			<Text>Hello from Confy-ui :)</Text>
			<Button>Let's go</Button>
		</Flex>
	);
}

Customizing your theme

구성은 Theme 컴포넌트를 통해 관리되고 적용됩니다.

Basic configuration

Theme에 구성를 전달하여 외관을 사용자 정의합니다.

<Theme accentColor="crimson" grayColor="sand" radius="large" scaling="95%">
	<MyApp />
</Theme>

Using the theme panel

ThemePanel은 테마를 실시간으로 미리 볼 수 있는 드롭인 컴포넌트입니다. 컴포넌트 플레이그라운드에서 작동하는 모습을 확인하세요.

ThemePanel을 앱에 추가하려면 패키지에서 가져와 루트 Theme 내부에 배치합니다.

import { Theme, ThemePanel } from "@confy-ui/react/themes";

export default function () {
	return (
		<Theme>
			<MyApp />
			<ThemePanel />
		</Theme>
	);
}