설치 | CoUI
LogoCoUI

설치

CoUI 패키지 설치 가이드

설치#

CoUI는 아직 pub.dev에 배포되지 않았습니다(coui_flutter/coui_web 모두 publish_to: none) — flutter pub add / dart pub add 대신 git 태그를 참조해 설치합니다.

패키지 선택#

패키지용도
coui_flutterFlutter 앱 (Mobile, Desktop, Web)
coui_webJaspr Web 앱
coui_core 공유 유틸리티 (coui_flutter/coui_web가 자동 포함, 별도 설치 불필요)

저장소 접근 안내

CoUI 저장소는 공개 준비 중이며 현재는 비공개입니다. 아래 설치 방법은 공개 이후 그대로 동작하며, 그전까지는 저장소 접근 권한이 필요합니다.

  • 계약 고객에게는 프로젝트에 사용한 버전의 소스 사본을 프로젝트 저장소에 함께 인도합니다.
  • 그 외 접근이 필요하시면 cody@cocode.im 으로 연락 주세요.

컴포넌트 카탈로그와 문서는 이 사이트에서 계정 없이 그대로 보실 수 있습니다.

Flutter#

pubspec.yaml#

dependencies:
  coui_flutter:
    git:
      url: https://github.com/coco-de/coui.git
      path: packages/coui_flutter

최소 요구사항#

  • Flutter 3.47.0+
  • Dart 3.11.0+
  • Material Design (uses-material-design: true)

테마 설정#

CoUI Flutter는 CoreComponentTheme를 ThemeData.fromCore에 넘겨 테마를 관리합니다(상세: 테마 가이드): 

CoUIApp(
  theme: ThemeData.fromCore(
    CoreThemePresets.light,
    coreComponentTheme: const CoreComponentTheme(
      // 개별 컴포넌트 테마 커스터마이징
      button: CoreButtonTheme(
        style: CoreButtonStyle(
          borderRadius: CoreBorderRadius.all(CoreRadius.radius12),
        ),
      ),
    ),
  ),
  home: MyHomePage(),
)

Jaspr Web#

pubspec.yaml#

dependencies:
  coui_web:
    git:
      url: https://github.com/coco-de/coui.git
      path: packages/coui_web

최소 요구사항#

  • Dart 3.11.0+
  • Jaspr 0.23.2+

Tailwind CSS + 디자인 토큰 (<head>)#

CoUI Web은 Tailwind 유틸리티 클래스로 렌더하고, 그 클래스가 참조하는 값은 --coui-* CSS 변수에서 옵니다. 그래서 <head>에 Tailwind 자체와 CoUI가 만든 config·변수를 함께 넣어야 합니다. 

import 'package:coui_web/coui_web.dart';

final config = ThemeConfig.defaults();

final head = <Component>[
  // Tailwind가 먼저 — 아래 config가 이 CDN이 정의한 전역에 할당합니다.
  Component.element(
    tag: 'script',
    attributes: {'src': 'https://cdn.tailwindcss.com'},
  ),
  Component.element(tag: 'script', children: [RawText(config.tailwindConfig)]),
  // 라이트 `:root { --coui-* }`
  Component.element(tag: 'style', children: [RawText(config.cssVariables)]),
];

이 단계를 빠뜨리면 색·여백·반경·글자 크기가 통째로 죽고 flex·grid 같은 구조 유틸리티만 남습니다.

다크 변수는 <style>로 넣지 마세요. Tailwind CDN의 JIT 스캐너가 그 안의 다크 값을 스캔해 라이트 모드를 덮습니다. 런타임에 <style> 요소를 만들어 붙이는 <script>로 우회합니다 — 내용은 config.darkVariableBlock + config.surfaceStyleVariableBlocks입니다.

Tailwind reset(preflight)이 꺼져 있습니다. tailwindConfig는 corePlugins: {preflight: false}이므로 브라우저 기본 스타일 초기화가 필요하면 앱이 직접 넣어야 합니다.

서버 엔트리포인트에서 package:jaspr/server.dart를 함께 import 하면 runApp· Document·Text가 두 배럴에 모두 있어 이름이 충돌합니다. 한쪽에 show/hide를 거세요.

앱 루트#

컴포넌트를 쓰기 전에 트리 최상단을 CoUIWeb으로 감쌉니다 — Flutter CoUIApp의 대응입니다. 

import 'package:coui_web/coui_web.dart';

class MyApp extends StatelessComponent {
  const MyApp({super.key});

  @override
  Component build(BuildContext context) {
    return CoUIWeb(
      theme: ThemeData.coui,
      child: MyHomePage(),
    );
  }
}

감싸지 않으면 테마를 읽는 첫 컴포넌트에서 No Theme found in context로 실패합니다. CoUIWeb은 테마 외에 오버레이 호스트·아이콘 기본 크기·루트 캐스케이드도 함께 설치합니다 — 시작하기 참고.

개발 환경#

Git 클론 (로컬 개발)#

# 모노레포 로컬 개발 시
dependencies:
  coui_flutter:
    path: ../coui/packages/coui_flutter
  coui_web:
    path: ../coui/packages/coui_web

버전 고정#

위 git: 의존성은 기본적으로 main의 최신 커밋을 따라갑니다. 특정 릴리스에 고정하려면 ref:에 그 패키지의 태그를 지정하세요 — 정확한 현재 버전과 태그 값, 릴리스 노트는 Changelog 페이지에서 확인할 수 있습니다(빌드 시점에 pubspec.yaml을 직접 읽으므로 항상 최신입니다).