serverkit-styled-lib

ServerKit styled-components 기반 UI 라이브러리

컴포넌트 목록

Accordion

Alert

Alert Dialog

Aspect Ratio

Avatar

Badge

Breadcrumb

Button

Calendar

Card

Carousel

Chart

Checkbox

Collapsible

Combobox

Command

Context Menu

Data Table

Date Picker

Dialog

Drawer

Dropdown Menu

Hover Card

Input

Input OTP

Label

Menubar

Navigation Menu

Pagination

Popover

Progress

Radio Group

Resizable

Scroll-area

Select

Separator

Sheet

Sidebar

Skeleton

Slider

Sonner

Switch

Table

Tabs

Textarea

Toast

Toggle

Toggle Group

Tooltip

Typography

설치

``bash
npm install serverkit-styled-lib styled-components

또는

yarn add serverkit-styled-lib styled-components
`

기본 사용법

`tsx
import React from "react";
import { Button } from "serverkit-styled-lib";

function App() {
return (

alert("클릭!")}>
기본 버튼



세컨더리 버튼



비활성화 버튼

);
}
`

테마 시스템 사용법

테마를 사용하면 전역적으로 색상, 폰트, 간격 등을 커스터마이징할 수 있습니다.

$3

`tsx
import React from "react";
import { Button, ThemeProvider, defaultTheme } from "serverkit-styled-lib";

function App() {
return (

테마가 적용된 버튼

);
}
`

$3

`tsx
import React from "react";
import { Button, ThemeProvider, Theme } from "serverkit-styled-lib";

const customTheme: Partial = {
colors: {
primary: "#ff6b6b",
secondary: "#4ecdc4",
danger: "#fa7c91",
background: {
primary: "#ff6b6b",
hover: {
primary: "#ff5252",
secondary: "#26d0ce",
danger: "#f8b2c1",
},
},
},
borderRadius: "12px",
};

function App() {
return (

커스텀 테마 버튼
커스텀 테마 세컨더리

);
}
`

$3

`tsx
import React, { useState } from "react";
import { Button, ThemeProvider, Theme } from "serverkit-styled-lib";

const lightTheme: Partial = {
colors: { primary: "#007bff" },
};

const darkTheme: Partial = {
colors: {
primary: "#6c5ce7",
background: { secondary: "#2d3436" },
text: { primary: "#ddd" },
},
};

function App() {
const [isDark, setIsDark] = useState(false);

return (

setIsDark(!isDark)}>
{isDark ? "라이트 모드" : "다크 모드"}


);
}
`

컴포넌트

$3

styled-components로 만든 버튼 컴포넌트

#### Props

- variant: 'primary' | 'secondary' | 'danger' (기본: 'primary')
- size: 'small' | 'medium' | 'large' (기본: 'medium')
- disabled: boolean (기본: false)
- fullWidth: boolean (기본: false)
- onClick: () => void

$3

전역 테마를 제공하는 컴포넌트

#### Props

- theme: Partial - 적용할 테마 객체
- children: React.ReactNode - 하위 컴포넌트들

테마 인터페이스

`tsx
interface Theme {
colors: {
primary: string;
secondary: string;
danger: string;
text: {
primary: string;
secondary: string;
white: string;
};
background: {
primary: string;
secondary: string;
hover: {
primary: string;
secondary: string;
danger: string;
};
};
border: {
default: string;
hover: string;
};
};
spacing: {
small: string;
medium: string;
large: string;
};
borderRadius: string;
fontSize: {
small: string;
medium: string;
large: string;
};
}
`

개발

`bash

의존성 설치

npm install

빌드

npm run build

Storybook 실행

npm run storybook

개발 모드 (watch)

npm run dev
`

퍼블리시

`bash
npm run build
npm publish
``