162개 컴포넌트 · Flutter + Jaspr Web →
앱과 웹을 잇는 하나의 디자인 시스템.
Flutter와 Jaspr Web에서 같은 API와 디자인 토큰을 사용하세요. 162개 컴포넌트로 두 플랫폼의 화면을 일관되게 만듭니다.
보고, 바꾸고, 만들어보세요.
프리뷰를 누르면 사용법과 Flutter·Web 코드를 볼 수 있습니다.선택한 스타일을 내 프로젝트에 적용하기
import 'package:coui_flutter/coui_flutter.dart';
CoUIApp(
theme: ThemeData.fromCore(CoreThemePresets.light),
darkTheme: ThemeData.fromCore(CoreThemePresets.dark),
themeMode: CoreThemeMode.light,
surfaceStyle: CoreSurfaceStyleId.defaultStyle,
home: const MyHomePage(),
)import 'package:coui_flutter/coui_flutter.dart'; CoUIApp( theme: ThemeData.fromCore(CoreThemePresets.light), darkTheme: ThemeData.fromCore(CoreThemePresets.dark), themeMode: CoreThemeMode.light, surfaceStyle: CoreSurfaceStyleId.defaultStyle, home: const MyHomePage(), )
import 'package:coui_web/coui_web.dart'; // 테마 가이드에 따라 head에 ThemeConfig의 CSS 변수를 설정한 앱 기준입니다. SurfaceStyleScope.setSurfaceStyle(CoreSurfaceStyleId.defaultStyle); CoUIThemeController.setTheme(CoUIThemeController.light); CoUIWeb( theme: ThemeData.coui, child: const MyHomePage(), )
import 'package:coui_flutter/coui_flutter.dart'; CoUIApp( theme: ThemeData.fromCore(CoreThemePresets.light), darkTheme: ThemeData.fromCore(CoreThemePresets.dark), themeMode: CoreThemeMode.dark, surfaceStyle: CoreSurfaceStyleId.defaultStyle, home: const MyHomePage(), )
import 'package:coui_web/coui_web.dart'; // 테마 가이드에 따라 head에 ThemeConfig의 CSS 변수를 설정한 앱 기준입니다. SurfaceStyleScope.setSurfaceStyle(CoreSurfaceStyleId.defaultStyle); CoUIThemeController.setTheme(CoUIThemeController.dark); CoUIWeb( theme: ThemeData.coui, child: const MyHomePage(), )
import 'package:coui_flutter/coui_flutter.dart'; CoUIApp( theme: ThemeData.fromCore(CoreThemePresets.light), darkTheme: ThemeData.fromCore(CoreThemePresets.dark), themeMode: CoreThemeMode.light, surfaceStyle: CoreSurfaceStyleId.neoBrutalism, home: const MyHomePage(), )
import 'package:coui_web/coui_web.dart'; // 테마 가이드에 따라 head에 ThemeConfig의 CSS 변수를 설정한 앱 기준입니다. SurfaceStyleScope.setSurfaceStyle(CoreSurfaceStyleId.neoBrutalism); CoUIThemeController.setTheme(CoUIThemeController.light); CoUIWeb( theme: ThemeData.coui, child: const MyHomePage(), )
import 'package:coui_flutter/coui_flutter.dart'; CoUIApp( theme: ThemeData.fromCore(CoreThemePresets.light), darkTheme: ThemeData.fromCore(CoreThemePresets.dark), themeMode: CoreThemeMode.dark, surfaceStyle: CoreSurfaceStyleId.neoBrutalism, home: const MyHomePage(), )
import 'package:coui_web/coui_web.dart'; // 테마 가이드에 따라 head에 ThemeConfig의 CSS 변수를 설정한 앱 기준입니다. SurfaceStyleScope.setSurfaceStyle(CoreSurfaceStyleId.neoBrutalism); CoUIThemeController.setTheme(CoUIThemeController.dark); CoUIWeb( theme: ThemeData.coui, child: const MyHomePage(), )
import 'package:coui_flutter/coui_flutter.dart'; CoUIApp( theme: ThemeData.fromCore(CoreThemePresets.light), darkTheme: ThemeData.fromCore(CoreThemePresets.dark), themeMode: CoreThemeMode.light, surfaceStyle: CoreSurfaceStyleId.liquidGlass, home: const MyHomePage(), )
import 'package:coui_web/coui_web.dart'; // 테마 가이드에 따라 head에 ThemeConfig의 CSS 변수를 설정한 앱 기준입니다. SurfaceStyleScope.setSurfaceStyle(CoreSurfaceStyleId.liquidGlass); CoUIThemeController.setTheme(CoUIThemeController.light); CoUIWeb( theme: ThemeData.coui, child: const MyHomePage(), )
import 'package:coui_flutter/coui_flutter.dart'; CoUIApp( theme: ThemeData.fromCore(CoreThemePresets.light), darkTheme: ThemeData.fromCore(CoreThemePresets.dark), themeMode: CoreThemeMode.dark, surfaceStyle: CoreSurfaceStyleId.liquidGlass, home: const MyHomePage(), )
import 'package:coui_web/coui_web.dart'; // 테마 가이드에 따라 head에 ThemeConfig의 CSS 변수를 설정한 앱 기준입니다. SurfaceStyleScope.setSurfaceStyle(CoreSurfaceStyleId.liquidGlass); CoUIThemeController.setTheme(CoUIThemeController.dark); CoUIWeb( theme: ThemeData.coui, child: const MyHomePage(), )
import 'package:coui_flutter/coui_flutter.dart'; CoUIApp( theme: ThemeData.fromCore(CoreThemePresets.light), darkTheme: ThemeData.fromCore(CoreThemePresets.dark), themeMode: CoreThemeMode.light, surfaceStyle: CoreSurfaceStyleId.neumorphism, home: const MyHomePage(), )
import 'package:coui_web/coui_web.dart'; // 테마 가이드에 따라 head에 ThemeConfig의 CSS 변수를 설정한 앱 기준입니다. SurfaceStyleScope.setSurfaceStyle(CoreSurfaceStyleId.neumorphism); CoUIThemeController.setTheme(CoUIThemeController.light); CoUIWeb( theme: ThemeData.coui, child: const MyHomePage(), )
import 'package:coui_flutter/coui_flutter.dart'; CoUIApp( theme: ThemeData.fromCore(CoreThemePresets.light), darkTheme: ThemeData.fromCore(CoreThemePresets.dark), themeMode: CoreThemeMode.dark, surfaceStyle: CoreSurfaceStyleId.neumorphism, home: const MyHomePage(), )
import 'package:coui_web/coui_web.dart'; // 테마 가이드에 따라 head에 ThemeConfig의 CSS 변수를 설정한 앱 기준입니다. SurfaceStyleScope.setSurfaceStyle(CoreSurfaceStyleId.neumorphism); CoUIThemeController.setTheme(CoUIThemeController.dark); CoUIWeb( theme: ThemeData.coui, child: const MyHomePage(), )
import 'package:coui_flutter/coui_flutter.dart'; CoUIApp( theme: ThemeData.fromCore(CoreThemePresets.light), darkTheme: ThemeData.fromCore(CoreThemePresets.dark), themeMode: CoreThemeMode.light, surfaceStyle: CoreSurfaceStyleId.claymorphism, home: const MyHomePage(), )
import 'package:coui_web/coui_web.dart'; // 테마 가이드에 따라 head에 ThemeConfig의 CSS 변수를 설정한 앱 기준입니다. SurfaceStyleScope.setSurfaceStyle(CoreSurfaceStyleId.claymorphism); CoUIThemeController.setTheme(CoUIThemeController.light); CoUIWeb( theme: ThemeData.coui, child: const MyHomePage(), )
import 'package:coui_flutter/coui_flutter.dart'; CoUIApp( theme: ThemeData.fromCore(CoreThemePresets.light), darkTheme: ThemeData.fromCore(CoreThemePresets.dark), themeMode: CoreThemeMode.dark, surfaceStyle: CoreSurfaceStyleId.claymorphism, home: const MyHomePage(), )
import 'package:coui_web/coui_web.dart'; // 테마 가이드에 따라 head에 ThemeConfig의 CSS 변수를 설정한 앱 기준입니다. SurfaceStyleScope.setSurfaceStyle(CoreSurfaceStyleId.claymorphism); CoUIThemeController.setTheme(CoUIThemeController.dark); CoUIWeb( theme: ThemeData.coui, child: const MyHomePage(), )
슬롯 기반 콘텐츠 카드
Chat bubbles
Data table
Calendar view
Form container
Tree view
Tab navigation
Step indicator
Command palette
Row-based list container with smart column grow
Statistics
라벨/값 메타데이터 요약 카드
Event timeline
Code display
Text input field
Notification toast
Status tracker
Progress bar
Status badge
Status indicator
카테고리
162 개가 10 갈래로 나뉘어 있습니다.
Control
8
Buttons, toggles, and interactive controls.
Form
37
Form inputs and data entry components.
Display
41
Content and data display components.
Layout
37
Structure, containers, and layout components.
Navigation
10
Navigation and wayfinding components.
Menu
7
Menus and contextual actions.
Overlay
9
Dialogs, popovers, and overlays.
Icon
1
Iconography components.
Text
5
Typography and text components.
Infra
7
Low-level building-block components.