🎨 달레 스터디에서 시작해, 모두에게 공개된 오픈소스 디자인 시스템
한국어 환경에 맞는 오픈소스 디자인 시스템을 만들어 디자이너와 개발자가 접근성 높은 프로덕트를 쉽고 빠르게 함께 만들도록 돕습니다.
- 한국어 사용자 중심 설계
- 신뢰할 수 있는 시스템
- 커뮤니티 중심 발전
React 프로젝트에서 다음 패키지 매니저 중 하나로 설치합니다.
# with Bun
$ bun add daleui pretendard @fontsource-variable/jetbrains-mono
# with npm
$ npm install daleui pretendard @fontsource-variable/jetbrains-mono
# with pnpm
$ pnpm add daleui pretendard @fontsource-variable/jetbrains-mono
# with Yarn
$ yarn add daleui pretendard @fontsource-variable/jetbrains-mono앱 진입점(예: main.tsx, App.tsx)에서 스타일을 한 번에 불러옵니다.
import "daleui/styles.css";import { Button } from "daleui";
export default () => (
<>
<Button size="md" tone="brand" type="button" variant="solid">
시작하기
</Button>
<TextInput placeholder="텍스트를 입력해주세요." />
</>
);Panda CSS를 사용하는 프로젝트에서는 토큰 파일을 복사하지 않고 daleui/preset을 사용합니다.
컴포넌트와 같은 디자인 토큰, 시맨틱 색상(라이트/다크 모드), 텍스트 스타일, 키프레임, 전역 스타일을 공유합니다.
프리셋에 필요한 Panda CSS 패키지를 개발 의존성으로 설치합니다.
bun add -d @pandacss/dev @pandacss/preset-base// panda.config.ts
import { defineConfig } from "@pandacss/dev";
export default defineConfig({
presets: ["@pandacss/preset-base", "daleui/preset"],
preflight: true,
include: ["./src/**/*.{js,jsx,ts,tsx}"],
outdir: "styled-system",
});설정에서 사용하는 @pandacss/preset-base도 직접 설치합니다.
presets를 직접 지정하면 Panda의 기본 프리셋 목록을 대체하므로,
기본 유틸리티를 유지하려면 @pandacss/preset-base를 함께 지정해야 합니다.
프리셋에는 달레 UI가 사용하는 Panda 기본 토큰도 포함되며, 폰트 토큰은 sans와 mono만 제공합니다.
프리셋 자체가 폰트나 컴포넌트 CSS를 로딩하지는 않습니다.
달레 UI 컴포넌트를 함께 사용한다면 위의 설치 안내대로 daleui/styles.css를 불러옵니다.
프리셋만 사용한다면 앱 진입점에서 폰트 CSS를 직접 불러옵니다.
import "pretendard/dist/web/variable/pretendardvariable.css";
import "@fontsource-variable/jetbrains-mono";본 프로젝트는 All Contributors 관례에 따라 기여자분들의 공헌를 인정하고 감사를 표현하고 있습니다.
달레 UI가 여러분의 프로젝트에 도움이 되신다면 후원을 고려해주시면 감사하겠습니다. 💝 저장소에 스타를 주시는 것도 더 많은 분들이 저희 커뮤니티를 찾는데 도움이 됩니다. ⭐
