BoldKit 이제 Vue 3 지원: Vue 개발자를 위한 45개 이상의 Neubrutalism 컴포넌트

Source: Dev.to

몇 주 전에 소개한 BoldKit, 네우브루탈리즘 컴포넌트 라이브러리를 기억하시나요?
좋은 소식이 있습니다 — BoldKit v2.0이 Vue 3 전체 지원과 함께 찾아왔습니다!

원본 발표를 놓치셨다면, BoldKit은 두꺼운 테두리, 강렬한 그림자, 고대비 색상으로 UI를 돋보이게 하는 네우브루탈리즘의 대담하고 거친 미학을 여러분의 프로젝트에 제공합니다.

v2.0의 새로운 기능은?

• 전체 컴포넌트 라이브러리가 Vue 3으로 포팅되었습니다
  • 45개 이상의 컴포넌트가 Composition API로 구축되었습니다
  • 장식 요소용 35개의 SVG 형태
  • vue-echarts를 기반으로 한 16가지 차트 유형
  • 2개의 템플릿 (랜딩 페이지 및 포트폴리오)
  • 전체 TypeScript 지원
  • shadcn‑vue CLI와 호환

Quick Start

shadcn‑vue 사용하기

# Install a single component
npx shadcn-vue@latest add https://boldkit.dev/r/vue/button.json

# Install multiple components
npx shadcn-vue@latest add \
  https://boldkit.dev/r/vue/button.json \
  https://boldkit.dev/r/vue/card.json \
  https://boldkit.dev/r/vue/input.json

레지스트리 별칭 (선택 사항)

components.json에 다음을 추가합니다:

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

그런 다음 별칭을 사용하여 컴포넌트를 설치합니다:

npx shadcn-vue@latest add @boldkit/button @boldkit/card @boldkit/dialog

Code Example

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

  
  
      
        Welcome to BoldKit
        New
      
    

    
      
Build bold, beautiful interfaces with ease.

      
        Primary
        Secondary
        Accent
      
    
  

BoldKit에 오신 것을 환영합니다
New

Bold하고 아름다운 인터페이스를 손쉽게 구축하세요.

Primary
Secondary
Accent

깨끗하고 가독성이 좋으며 완전히 타입이 지정되었습니다. Vue가 그래야 하는 바로 그 모습입니다. 😎

Vue‑특화 기술 스택

모든 컴포넌트는 “ 구문을 사용하며, 완전한 TypeScript 지원과 정확한 타입 추론을 제공합니다.

포함 내용은?

폼 컴포넌트

• 버튼, 입력, 텍스트 영역, 체크박스, 라디오 그룹, 셀렉트, 스위치, 슬라이더, 라벨, OTP 입력

레이아웃 및 컨테이너

• 카드, 레이어드 카드, 다이얼로그, 드로어, 시트, 아코디언, 콜랩시블, 탭, 스크롤 영역, 종횡비, 구분선

피드백 및 상태

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

네비게이션

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

데이터 디스플레이

• 아바타, 테이블, 캘린더, 차트 (면적, 막대, 선, 파이, 레이더, 방사형)

장식 (뉴브루탈리즘 스페셜)

• 스티커, 스탬프, 포스트잇, 마키, 35 SVG 도형

인터랙티브 문서

The BoldKit docs now have a framework toggle. Switch between React and Vue to see code examples for your preferred framework:

• Every component has Vue source code
• Every example shows Vue usage
• Installation commands update automatically

테마 적용은 동일합니다

CSS는 React와 Vue 사이에 동일합니다. 모든 네오브루탈리즘 매직은 CSS 변수에서 나옵니다:

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

Theme Builder 를 사용하여 맞춤 테마를 만들 수 있습니다 — 두 프레임워크 모두에서 작동합니다.

왜 뉴브루탈리즘인가?

If you’re new to the style, neubrutalism is characterized by:

• 두꺼운 테두리 – 요소를 정의하는 3 px 고정 테두리
• 강렬한 그림자 – 블러가 없는 오프셋 그림자 (예: 4px 4px 0px)
• 대담한 색상 – 고대비 팔레트로 눈에 띄게

BoldKit v2.0와 함께 대담하고 아름다운 인터페이스를 만들어 보세요! 🚀

고대비, 활기찬 팔레트

직각 모서리 – border‑radius 사용 금지!

거친 타이포그래피 – 강조를 위한 굵고 대문자 텍스트

반미니멀리즘 움직임으로, 포트폴리오, 랜딩 페이지, 그리고 돋보이고 싶은 앱에 완벽합니다.

링크

• 🌐 웹사이트:
• 📦 GitHub:
• 📚 문서:
• 🎨 테마 빌더:
• 🧩 컴포넌트:

Contributing

BoldKit은 오픈‑소스(MIT 라이선스)입니다. 버그를 발견하거나 아이디어가 있거나 컴포넌트를 기여하고 싶다면 풀 리퀘스트를 환영합니다!

React 개발자이든 Vue 애호가이든 BoldKit이 여러분을 지원합니다. 한번 사용해보고 여러분이 만든 것을 알려주세요!

유용하다고 생각되면 GitHub repo에 ⭐를 남겨 주세요.

행복한 코딩 되세요! 🚀