Data Display

Tables, lists, code blocks, callouts, and keyboard shortcuts.

Responsive Table

Desktop: standard table. Mobile: card stack per row.

이름	역할	상태	입사일
김민준	프론트엔드	활성	2023-01
이서연	백엔드	활성	2023-03
박지호	디자이너	휴가	2022-11
최수아	PM	활성	2024-01

김민준

역할: 프론트엔드
상태: 활성
입사일: 2023-01

이서연

역할: 백엔드
상태: 활성
입사일: 2023-03

박지호

역할: 디자이너
상태: 휴가
입사일: 2022-11

최수아

역할: PM
상태: 활성
입사일: 2024-01

Data List

이름: 김민준
이메일: minjun@example.com
역할: 프론트엔드 개발자
팀: Rebrick Engineering
상태: 활성

Callout

알아두세요

이 기능은 베타 버전으로 일부 기능이 제한될 수 있습니다.

팁

단축키 Cmd + K로 커맨드 팔레트를 열 수 있습니다.

주의

이 설정을 변경하면 현재 세션에 즉시 영향을 미칩니다.

위험

데이터 삭제는 되돌릴 수 없습니다. 신중하게 진행하세요.

Inline Code

Use the cn() utility to merge class names with tailwind-merge and clsx. Import from @/lib/utils.

Code Block

typescript

import { cn } from "@/lib/utils"
import { cva, type VariantProps } from "class-variance-authority"

const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-full",
  {
    variants: {
      variant: {
        primary: "bg-foreground text-background",
        secondary: "bg-secondary border",
      },
    },
    defaultVariants: {
      variant: "primary",
    },
  }
)

Channel Badge

채널별 발행 상태를 표시하는 pill 컴포넌트.

카페24

Shopify

스마트스토어

Stack (목록 컬럼용)

카페24

Shopify

스마트스토어

Keyboard Shortcuts

커맨드 팔레트

CmdK

저장

CmdS

실행 취소

CmdZ

다시 실행

CmdShiftZ

닫기

Esc