chakra-ui/ark

React, Vue, Solid, Svelte를 위한 완전히 스타일링되지 않은 접근성 우선 컴포넌트 라이브러리

개발 재료맘대로 써도 됨 · MIT디자인·UI 컴포넌트TypeScript난이도

5,270+13이번 주0 찜

202포크1이슈

중간맛 분석

TypeScript 기반의 헤드리스 컴포넌트 라이브러리로, 45개 이상의 프로덕션급 컴포넌트를 제공합니다. Tailwind, CSS-in-JS, 바닐라 CSS 등 어떤 스타일링 솔루션과도 호환되며, WCAG 접근성 표준을 준수합니다. 한 번 배운 를 React, Solid, Vue, Svelte에서 동일하게 사용할 수 있어, 여러 프레임워크 생태계에서 일관된 디자인 시스템을 유지할 수 있습니다. Chakra UI v3와 Park UI 등 실제 프로덕션 제품에서 검증되었습니다.

이런 레포예요

이럴 때 쓰면 좋아요

여러 프레임워크를 사용하는 조직에서 일관된 디자인 시스템 구축
스타일링 자유도가 필요한 엔터프라이즈급 커스텀 UI 개발
접근성을 필수로 요구하는 대규모 웹 애플리케이션 구축

핵심 기능

45개 이상의 완전 무스타일 컴포넌트 (Dialog, Select, Combobox, Tabs 등)Zag.js 상태 머신 기반 예측 가능한 컴포넌트 로직React, Vue, Solid, Svelte 멀티 프레임워크 동일 API 지원

대안 대비 차별점

프레임워크를 강요하지 않는 멀티 프레임워크 아키텍처와 완전한 스타일링 자유도를 결합하여, 기존 헤드리스 라이브러리보다 더 큰 유연성과 재사용성을 제공합니다.

바로 시작하기

사용하는 프레임워크에 맞는 패키지 설치

npm install @ark-ui/react

컴포넌트 임포트

import { Dialog } from '@ark-ui/react/dialog'

컴포넌트 구성

export const MyDialog = () => (
  <Dialog.Root>
    <Dialog.Trigger>Open Dialog</Dialog.Trigger>
    <Dialog.Backdrop />
    <Dialog.Positioner>
      <Dialog.Content>
        <Dialog.Title>Dialog Title</Dialog.Title>
        <Dialog.Description>Dialog description</Dialog.Description>
        <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
      </Dialog.Content>
    </Dialog.Positioner>
  </Dialog.Root>
)

원하는 스타일링 솔루션으로 스타일 적용 (Tailwind, CSS-in-JS 등)

별 추이 · 7일

5,270+13 / 7일

활용성 · 따라 만들기 좋은가

샘플 점수 34/100

관대한 라이선스
테스트 있음
예제 디렉토리
최근 활동
AGENTS.md
llms.txt
템플릿

🟢 최근 활동 있음 · 2022년 생성

이 레포에 깃밥 배지 달기

[![깃밥](https://www.gitbap.com/badge/chakra-ui/ark.svg)](https://www.gitbap.com/r/chakra-ui/ark)

🔌 클로드에서 바로 써보기

깃밥을 클로드에 연결하면 이런 레포를 클로드·커서·Codex에서 바로 찾고 체험할 수 있어요.

방법 ① 커넥터 URL

클로드 설정 → 커넥터에 이 주소를 붙여넣기.

https://www.gitbap.com/api/mcp

방법 ② 플러그인 (체험까지)

플러그인을 설치하면 /gitbap-trending·/gitbap-try 슬래시 커맨드로 레포를 그 자리에서 체험. Claude Code에서 아래 두 줄을 차례로 실행하세요.

/plugin marketplace add jakeparkcolde/gitbap-cowork

/plugin install gitbap-cowork@gitbap

연결 방법 자세히 →

AI가 README 기반으로 요약했습니다 · 원문 보기