Neba UI

프로젝트 소개

Neba UI는 애플리케이션 화면을 만드는 React 컴포넌트 라이브러리입니다. 버튼과 입력 필드, 메뉴와 다이얼로그, 표와 탭, 차트, 진행 표시와 알림처럼 실제 제품에 필요한 것을 갖추고 있으며, 모두 이미 스타일이 잡혀 있고 접근성을 갖추었으며 서로 어울립니다. 화면을 두 번 디자인하는 대신 조립할 수 있습니다. AI 에이전트 화면에 필요한 프롬프트 입력, 스트리밍 텍스트, 도구 호출, 승인 요청, 추론 패널, 단계 목록도 들어 있고, neba/a2ui의 A2UI 렌더러는 에이전트가 JSON으로 묘사한 화면을 Neba 컴포넌트로 그려 냅니다.

모든 컴포넌트가 하나의 속성 체계를 공유합니다. size와 color, variant, density, elevation이 어디에서나 같은 뜻이므로 중간 크기 컨트롤은 어떤 컴포넌트에서나 같은 높이이고, 기본 색은 어디에서나 같은 색입니다. 역할과 레이블, 포커스 관리와 키보드 조작은 나중에 덧붙인 것이 아니라 컴포넌트 안에 들어 있고, 다크 모드는 아무것도 작성하지 않아도 시스템 설정을 따릅니다. 겉모습은 테마 파일이 아니라 하나의 디자인 언어입니다. 얇은 테두리를 두른 반투명한 표면, 하나로 정해진 움직임, 그리고 요청해야만 그려지는 그림자입니다.

설치는 패키지 하나와 CSS 한 줄로 끝납니다. 루트에 둘 프로바이더도, 조립할 테마 객체도, 설정 파일도 없습니다. 패키지는 ESM 전용이고 TypeScript 타입 정의를 함께 제공하며 실제로 트리 셰이킹이 됩니다. 컴포넌트마다 별도의 모듈로 빌드되므로 버튼 하나를 가져오면 버튼 하나만큼의 비용이 듭니다. React 18과 19에서 동작하고 런타임 의존성은 두 개입니다. A2UI 렌더러는 선택적 peer 의존성 세 개를 따로 쓰지만, 렌더러를 불러오지 않는 프로젝트는 이를 해석할 일이 없습니다. 모든 컴포넌트는 스크린샷이 아니라 실제로 움직이는 예제와 함께 문서화되어 있습니다.

기능

• 문서 지원

• TypeScript 지원

• 다국어 지원

• 테스트로 검증됨

• 접근성 지원

• 다크 모드

• 트리 셰이킹 지원