Name: Bricks Ui
Author: anerjin

Buscar habilidades.../

Bricks Ui | Skills Pool

# npm
npm install @ultraworks/bricks-design-system

# yarn
yarn add @ultraworks/bricks-design-system

# peer dependencies
npm install react react-dom boxicons

// app/layout.tsx 또는 _app.tsx
import '@ultraworks/bricks-design-system/styles';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

// next.config.js
module.exports = {
  transpilePackages: ['@ultraworks/bricks-design-system'],
};

Component	Description	Usage
`Card`	콘텐츠 컨테이너	`<Card><Card.Header>...</Card.Header><Card.Body>...</Card.Body></Card>`
`Navbar`	상단 네비게이션	`<Navbar>...</Navbar>`
`Tabs`	탭 네비게이션	`<Tabs items={[...]} />`
`Breadcrumb`	경로 표시	`<Breadcrumb items={[...]} />`
`Accordion`	접이식 패널	`<Accordion items={[...]} />`
`Pagination`	페이지네이션	`<Pagination total={100} page={1} />`

Component	Description	Usage
`Button`	버튼	`<Button variant="primary">Click</Button>`
`Input`	텍스트 입력	`<Input label="Name" placeholder="..." />`
`Select`	드롭다운 선택	`<Select options={[...]} />`
`Checkbox`	체크박스	`<Checkbox label="Agree" />`
`Radio`	라디오 버튼	`<Radio name="option" value="1" />`
`Toggle`	토글 스위치	`<Toggle checked={true} />`
`DatePicker`	날짜 선택	`<DatePicker value={date} onChange={...} />`
`Dropdown`	드롭다운 메뉴	`<Dropdown items={[...]} />`

Component	Description	Usage
`Modal`	모달 다이얼로그	`<Modal open={isOpen} onClose={...}>...</Modal>`
`Alert`	알림 메시지	`<Alert type="success">Message</Alert>`
`Tooltip`	툴팁	`<Tooltip content="Info"><Button>Hover</Button></Tooltip>`
`Spinner`	로딩 스피너	`<Spinner size="md" />`
`Progress`	진행 표시	`<Progress value={50} max={100} />`

Component	Description	Usage
`Table`	데이터 테이블	`<Table columns={[...]} data={[...]} />`
`Avatar`	사용자 아바타	`<Avatar src="..." name="John" />`
`Badge`	뱃지/태그	`<Badge variant="success">Active</Badge>`
`Chart`	차트	`<Chart type="line" data={...} />`
`Icon`	아이콘 (Boxicons)	`<Icon name="bx-home" />`
`Typography`	텍스트 스타일	`<Typography variant="h1">Title</Typography>`

import { Card, Input, Button } from '@ultraworks/bricks-design-system';

function LoginForm() {
  return (
    <Card>
      <Card.Header>
        <Card.Title>로그인</Card.Title>
      </Card.Header>
      <Card.Body>
        <Input label="이메일" type="email" placeholder="[email protected]" />
        <Input label="비밀번호" type="password" />
        <Button variant="primary" fullWidth>
          로그인
        </Button>
      </Card.Body>
    </Card>
  );
}

import { Modal, Button } from '@ultraworks/bricks-design-system';
import { useState } from 'react';

function ConfirmDialog() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>삭제</Button>

      <Modal open={isOpen} onClose={() => setIsOpen(false)} title="확인">
        <Modal.Body>
          <p>정말 삭제하시겠습니까?</p>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={() => setIsOpen(false)}>
            취소
          </Button>
          <Button variant="danger">삭제</Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

import { Table, Badge } from '@ultraworks/bricks-design-system';

function UserTable() {
  const columns = [
    { key: 'name', label: '이름', sortable: true },
    { key: 'email', label: '이메일' },
    {
      key: 'status',
      label: '상태',
      render: (value) => (
        <Badge variant={value === 'active' ? 'success' : 'secondary'}>
          {value}
        </Badge>
      ),
    },
  ];

  const data = [
    { name: '홍길동', email: '[email protected]', status: 'active' },
    { name: '김철수', email: '[email protected]', status: 'inactive' },
  ];

  return (
    <Table
      columns={columns}
      data={data}
      sortable
      selectable
      onRowClick={(row) => console.log(row)}
    />
  );
}

import { Input, Select, Checkbox, Button, Alert } from '@ultraworks/bricks-design-system';
import { useState } from 'react';

function RegistrationForm() {
  const [error, setError] = useState('');

  return (
    <form>
      {error && <Alert type="error">{error}</Alert>}

      <Input
        label="이름"
        required
        error={!name && '이름을 입력하세요'}
      />

      <Select
        label="국가"
        options={[
          { value: 'kr', label: '대한민국' },
          { value: 'us', label: '미국' },
        ]}
      />

      <DatePicker label="생년월일" />

      <Checkbox label="이용약관에 동의합니다" required />

      <Button type="submit" variant="primary">
        가입하기
      </Button>
    </form>
  );
}

/* Colors */
--ds-primary-500
--ds-gray-50, --ds-gray-100, ... --ds-gray-900
--ds-success-500, --ds-warning-500, --ds-danger-500

/* Spacing */
--ds-space-1 (4px), --ds-space-2 (8px), --ds-space-4 (16px), --ds-space-8 (32px)

/* Typography */
--ds-font-size-xs, --ds-font-size-sm, --ds-font-size-base, --ds-font-size-lg
--ds-font-weight-normal, --ds-font-weight-medium, --ds-font-weight-bold

/* Border */
--ds-radius-sm, --ds-radius-md, --ds-radius-lg, --ds-radius-full
--ds-border-width-1, --ds-border-width-2

/* Shadow */
--ds-shadow-sm, --ds-shadow-md, --ds-shadow-lg

.my-component {
  padding: var(--ds-space-4);
  background: var(--ds-gray-50);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-sm);
}

// 다크 모드 강제
document.documentElement.setAttribute('data-theme', 'dark');

// 라이트 모드 강제
document.documentElement.setAttribute('data-theme', 'light');

요구사항	사용할 컴포넌트
폼 제출 버튼	`<Button variant="primary">`
취소/보조 액션	`<Button variant="secondary">`
위험한 액션	`<Button variant="danger">`
데이터 목록	`<Table>`
카드 레이아웃	`<Card>`
확인 대화상자	`<Modal>`
성공/오류 메시지	`<Alert type="success
로딩 상태	`<Spinner>` 또는 `<Button loading>`
날짜 입력	`<DatePicker>`
옵션 선택	`<Select>` 또는 `<Radio>`
다중 선택	`<Checkbox>`
On/Off 토글	`<Toggle>`

# 디자인 시스템 저장소에서
cd private_project_design_system
npm run storybook
# http://localhost:6006

항목	내용
패키지명	`@ultraworks/bricks-design-system`
저장소	`github.com/anerjin/private_project_design_system`
특징	다크/라이트 테마, TypeScript, WCAG 2.1 AA
패턴	Atomic Design (atoms, molecules)

항목	내용
패키지명	`@ultraworks/bricks-design-system`
저장소	`github.com/anerjin/private_project_design_system`
특징	다크/라이트 테마, TypeScript, WCAG 2.1 AA
패턴	Atomic Design (atoms, molecules)

Bricks Ui

Bricks UI Design System

IMPORTANT

Overview

Installation

Bricks Ui

Bricks UI Design System

IMPORTANT

Overview

Installation

Setup

React/Next.js App

Next.js Config (필요시)

Components (25개)

Layout & Navigation

Form Controls

Feedback & Overlay

Data Display

Usage Examples

Card with Form

Data Table

Form with Validation

Design Tokens (CSS Variables)

Custom Styling with Tokens

Theme

Dark/Light Mode

Best Practices

DO

DON'T

Component Selection Guide

Storybook

Reference

Notion

Feishu Wiki

Gemini

Obsidian Vault Maintainer

Openclaw Pr Maintainer

Wiki Maintainer

Bricks Ui

Bricks UI Design System

IMPORTANT

Overview

Installation

Bricks Ui

Bricks UI Design System

IMPORTANT

Overview

Installation

Setup

React/Next.js App

Next.js Config (필요시)

Components (25개)

Layout & Navigation

Form Controls

Feedback & Overlay

Data Display

Usage Examples

Card with Form

Modal Dialog

Data Table

Form with Validation

Design Tokens (CSS Variables)

Custom Styling with Tokens

Theme

Dark/Light Mode

Best Practices

DO

DON'T

Component Selection Guide

Storybook

Reference

Notion

Feishu Wiki

Gemini

Obsidian Vault Maintainer

Openclaw Pr Maintainer

Wiki Maintainer