software

BoldKit 소개: 뉴브루탈리즘 React 컴포넌트 라이브러리

발행: (2026년 1월 30일 오후 11:20 GMT+9)
5 min read
원문: Dev.to

Source: Dev.to

번역할 텍스트를 제공해 주시면 한국어로 번역해 드리겠습니다.

Introduction

안녕하세요, 개발자 여러분! 대담하고 사과 없는 뉴브루탈리즘 스타일을 받아들이는 무료 오픈‑소스 React 컴포넌트 라이브러리 BoldKit을 소개하게 되어 기쁩니다. 동일한 깔끔하고 둥근 모서리 UI 라이브러리에 지치셨고, 눈에 확 띄는 무언가를 원한다면, 이것이 바로 여러분을 위한 것일 수 있습니다.

뉴브루탈리즘 디자인 원칙

  • 두꺼운 3 px 테두리로 요소가 돋보이게 함
  • 블러가 없는 강한 그림자 (예: 4px 4px 0px)
  • 활기차고 고대비 색상
  • 직각 모서리 – border-radius 금지!
  • 굵고 대문자 타이포그래피

거칠고 시선을 사로잡으며, 강렬한 인상을 주기에 완벽합니다.

기능

  • shadcn/ui 호환성 – 동일한 아키텍처와 익숙한 패턴
  • 한 번의 명령어 설치 – 이미 알고 있는 shadcn CLI를 사용하세요
  • 완전한 접근성 – Radix UI 프리미티브를 기반으로 구축
  • 현대적인 스택 – React 19, Tailwind CSS v4, TypeScript

설치

# Install a single component
npx shadcn@latest add https://boldkit.dev/r/button.json
# Install multiple components at once
npx shadcn@latest add \
  https://boldkit.dev/r/button.json \
  https://boldkit.dev/r/card.json \
  https://boldkit.dev/r/input.json

npm 패키지를 관리할 필요도 없고, 버전 충돌도 없습니다—그냥 여러분이 소유한 컴포넌트를 복사‑붙여넣기만 하면 됩니다.

컴포넌트 카탈로그

폼 컨트롤

  • 버튼 (7가지 변형, 5가지 크기)
  • 입력, 텍스트 영역
  • 체크박스, 라디오 그룹, 스위치
  • 선택, 슬라이더, OTP 입력

레이아웃

  • 카드 및 레이어드 카드 (쌓인 종이 효과!)
  • 다이얼로그, 드로어, 시트
  • 아코디언, 탭, 콜랩시블

피드백

  • 알림, 알림 다이얼로그
  • 배지, 진행, 스켈레톤
  • 토스트 알림 (Sonner)

네비게이션

  • 브레드크럼, 드롭다운 메뉴
  • 커맨드 팔레트, 페이지네이션
  • 팝오버, 툴팁

Decorative Shapes

BoldKit includes a set of decorative SVG shapes that add extra neubrutalism flair.

import { BurstShape, HeartShape, LightningShape } from '@/components/ui/shapes';

Available shapes: Burst, Blob, Lightning, Heart, Stars, Shield, Cloud, Diamond, Hexagon, and 20+ more.

빠른 예제

import { Button } from '@/components/ui/button';
import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
} from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { BurstShape } from '@/components/ui/shapes';

export function WelcomeCard() {
  return (
    
      
      
        
          Welcome to BoldKit
          New
        
      
      
        
Build bold, beautiful interfaces with ease.

        
          Get Started
          Learn More
        
      
    
  );
}
:root {
  --primary: 0 84% 71%;       /* Coral */
  --secondary: 174 62% 56%;   /* Teal */
  --accent: 49 100% 71%;      /* Yellow */
  --destructive: 0 84% 60%;   /* Red */
  --shadow-color: 240 10% 10%;
  --radius: 0rem;             /* Keep it square! */
}

웹사이트의 Theme Builder를 사용하면 사용자 정의 테마를 만들고 내보낼 수 있습니다. 전체 다크 모드 지원이 기본으로 제공되며, 뉴브루탈리즘 미학은 밝은 테마와 어두운 테마 모두에서 아름답게 작동합니다.

@boldkit/component 구문 사용하기

components.json에 레지스트리를 추가합니다:

{
  "registries": {
    "@boldkit": "https://boldkit.dev/r"
  }
}

그런 다음 익숙한 shadcn CLI로 컴포넌트를 설치합니다:

npx shadcn@latest add @boldkit/button @boldkit/card @boldkit/badge

기술 스택

  • React 19 – 최신 기능
  • Tailwind CSS v4 – 현대적인 유틸리티‑퍼스트 CSS
  • Radix UI – 접근성 프리미티브
  • TypeScript – 완전한 타입 안전성
  • Class Variance Authority – 깔끔한 변형 관리
  • Vite – 빠른 빌드

유용한 링크

Contributing

BoldKit은 MIT‑licensed이며 기여를 환영합니다! 다음과 같은 방법으로 도울 수 있습니다:

  • 새로운 컴포넌트
  • 버그 수정
  • 문서 개선
  • 새로운 SVG 형태

시작하려면 저장소에 있는 Contributing Guide를 확인하세요.

Built with love by Aniruddha Agarwal.

Back to Blog

관련 글

더 보기 »