Soon UI Design

Layout
Navigation
Input
Select
Display
Feedback

Card

데이터를 표시하는 컨테이너입니다.

import { Card } from 'sud-ui';

GitHub에서 소스코드 보기

사용할 때

데이터를 표시할 때

사용예제

Card Title

Card ContentCard ContentCard Content

Basic Usage

기본적인 사용 방법입니다.

import React from "react";
import { Card, Typography } from "sud-ui";

export default function Example(): JSX.Element {
  return (
    <Card title="Card Title" footer="Card Footer" divider width="100%">
      <div className="flex flex-col gap-[10px]">
        <Typography>Card Content</Typography>
        <Typography>Card Content</Typography>
        <Typography>Card Content</Typography>
      </div>
    </Card>
  );
}

2024

01.Started backend web development with FastAPI.

06.Explored frontend development with React.

07.Adopted MongoDB as the primary database.

12.Began containerizing applications using Docker.

2025

01.Adopted Next.js as the main frontend framework.

04.Started developing the 'Sud-ui' & 'Sud-icons' library.

Footer custom

푸터를 커스텀할 수 있습니다.

import React from "react";
import { Card, Typography, Divider, Button, Timeline } from "sud-ui";
import { EditOutline, SettingOutline, ShareOutline } from "sud-icons";

interface TimelineItem {
  content: React.ReactNode;
}

interface CustomCardProps {
  divider?: boolean;
  shadow?: string;
  style?: React.CSSProperties;
  footer?: React.ReactNode;
}

export default function Example(): JSX.Element {
  const timelineItems: TimelineItem[] = [
    {
      content: (
        <div className="flex flex-col gap-[5px]">
          <Typography suite="EB">2024</Typography>
          <div className="flex gap-[5px]">
            <Typography suite="B">01.</Typography>
            <Typography size="sm">
              Started backend web development with FastAPI.
            </Typography>
          </div>
          <div className="flex gap-[5px]">
            <Typography suite="B">06.</Typography>
            <Typography size="sm">
              Explored frontend development with React.
            </Typography>
          </div>
          <div className="flex gap-[5px]">
            <Typography suite="B">07.</Typography>
            <Typography size="sm">
              Adopted MongoDB as the primary database.
            </Typography>
          </div>
          <div className="flex gap-[5px]">
            <Typography suite="B">12.</Typography>
            <Typography size="sm">
              Began containerizing applications using Docker.
            </Typography>
          </div>
        </div>
      )
    },
    {
      content: (
        <div className="flex flex-col gap-[5px]">
          <Typography suite="EB">2025</Typography>
          <div className="flex gap-[5px]">
            <Typography suite="B">01.</Typography>
            <Typography size="sm">
              Adopted Next.js as the main frontend framework.
            </Typography>
          </div>
          <div className="flex gap-[5px]">
            <Typography suite="B">04.</Typography>
            <Typography size="sm">
              Started developing the 'Sud-ui' & 'Sud-icons' library.
            </Typography>
          </div>
        </div>
      )
    }
  ];

  return (
    <Card
      divider
      shadow="none"
      style={{
        width: "100%"
      }}
      footer={
        <div className="flex justify-between items-center">
          <Divider vertical borderColor="transparent" />
          <Button colorType="text">
            <EditOutline />
          </Button>
          <Divider vertical height={30} />
          <Button colorType="text">
            <SettingOutline />
          </Button>
          <Divider vertical height={30} />
          <Button colorType="text">
            <ShareOutline />
          </Button>
          <Divider vertical borderColor="transparent" />
        </div>
      }
    >
      <Timeline items={timelineItems} />
    </Card>
  );
}

SeeUSoonHello I'm SeeUSoon.
I'm Web Developer.

github.com/SeeUSoon93

Custom Card

커스텀 카드입니다.

import React from "react";
import { Card, Typography, Avatar, Tag } from "sud-ui";
import { LogoGithub } from "sud-icons";

export default function Example() {
  return (
    <Card
      colorType="gold"
      borderType="dashed"
      borderWeight={2}
      borderColor="red"
      style={{
        width: "100%"
      }}
    >
      <div className="flex gap-[10px]">
        <Avatar colorType="orange" size="lg" />
        <div className="flex flex-col gap-[5px]">
          <Typography suite="EB" size="2xl">
            SeeUSoon
          </Typography>
          <Typography color="black-10">
            Hello I'm SeeUSoon.
            <br />
            I'm Web Developer.
          </Typography>

          <Tag>
            <a
              href="https://github.com/SeeUSoon93"
              target="_blank"
              rel="noopener noreferrer"
              className="flex flex-row gap-[5px] items-center"
            >
              <LogoGithub size="14" />
              <Typography suite="EB">github.com/SeeUSoon93</Typography>
            </a>
          </Tag>
        </div>
      </div>
    </Card>
  );
}

Thumbnail Card

썸네일 카드입니다.

import React from "react";
import { Card, Typography } from "sud-ui";
import { Link } from "sud-icons";

export default function Example(): JSX.Element {
  return (
    <Card
      className="hover-shadow-5"
      divider
      shadow="none"
      thumb="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcsmbTA%2FbtslvwjyeVU%2FutP5zUeRQOLtrAIjOkmcY0%2Fimg.jpg"
      thumbHeight="300px"
      footer={
        <a
          className="flex flex-row gap-[5px] justify-center items-center"
          href="https://soonart.tistory.com/entry/%EB%82%99%EC%84%9C-%EC%9D%BC%EC%83%81-%EA%B7%B8%EB%A6%BC"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Link size="14" />
          <Typography suite="EB">soonart.tistory.com</Typography>
        </a>
      }
    />
  );
}

square

Content

rounded

Content

capsule

Content

Shape

카드의 모양을 설정합니다.

import React from "react";
import { Card, Typography } from "sud-ui";

export default function Example() {
  return (
    <div className="grid grid-cols-3 gap-[10px]">
      <Card title="square" shape="square" width="100%">
        <Typography>Content</Typography>
      </Card>
      <Card title="rounded" shape="rounded" width="100%">
        <Typography>Content</Typography>
      </Card>
      <Card title="capsule" shape="capsule" width="100%">
        <Typography>Content</Typography>
      </Card>
    </div>
  );
}

사용 방법

컴포넌트의 props를 설정하는 방법입니다.

title

카드의 제목

string | ReactNode

children

카드의 내용

ReactNode

footer

카드의 푸터

ReactNode

thumb

카드의 썸네일

string | ReactNode

colorType

카드의 색상 타입

default

primary

success

warning

danger

info

red

rose

coral

orange

volcano

apricot

yellow

gold

amber

green

lime

mint

blue

sky

cerulean

indigo

cobalt

navy

purple

plum

orchid

forest

sage

warm-gray

cool-gray

neutral

text

ghost

default

background

카드의 배경색(palette값 또는 HEX code)

string

color

카드의 텍스트 색상(palette값 또는 HEX code)

string

border

테두리 표시 여부

boolean

true

borderColor

카드의 테두리 색상(palette값 또는 HEX code)

string

borderType

카드의 테두리 스타일

solid

dashed

dotted

double

groove

ridge

inset

outset

none

solid

borderWeight

카드의 테두리 두께

number

shape

카드의 모양

square

circle

rounded

capsule

rounded

shadow

카드의 그림자 효과

none

width

카드의 너비

string | number

fit-content

height

카드의 높이

string | number

fit-content

thumbHeight

썸네일의 높이

string | number

auto

className

추가 클래스명

string

style

추가 스타일

CSSProperties

{}

divider

구분선 표시 여부

boolean

false

dividerColor

구분선 색상(palette값 또는 HEX code)

string

variant

카드 변형 (카드, 드로어, 모달 등)

card

drawer

modal

notification

toast

card

onClose

닫기 버튼 클릭 이벤트 핸들러

() => void

isDrawer

Drawer와 유사한 스타일 적용 여부

boolean

false

개인정보 처리방침

서비스 약관