boottent-toolkit v0.0.1

boottent-toolkit

React, Vite, Typescript, TailwindCSS, Storybook 으로 만든 부트텐트 UI 라이브러리입니다.

Getting Started

yarn add boottent-toolkit

Usage Example

Boottent UI 라이브러리를 사용하여 간단한 로그인 폼을 만드는 예시입니다.

import { Box, Button, Input, Stack, Text } from "@/components";

export const LoginForm = () => {
  return (
    <Box className="rounded-xl border border-gray-200 bg-white px-8 py-12">
      <Stack>
        <Text
          as="h2"
          weight={"bold"}
          align={"center"}
          size={"3xl"}
          className="mb-2"
        >
          로그인
        </Text>

        <Text
          as="span"
          emphasis={"low"}
          size={"sm"}
          align={"center"}
          className="mb-8"
        >
          boottent-toolkit Component Examples
        </Text>

        <Text
          as="label"
          htmlFor="username"
          size={"sm"}
          weight={"medium"}
          className="mb-1.5"
        >
          닉네임
        </Text>
        <Input
          type="text"
          id="username"
          placeholder="닉네임"
          className="mb-4"
        />

        <Text
          as="label"
          htmlFor="password"
          size={"sm"}
          weight={"medium"}
          className="mb-1.5"
        >
          비번
        </Text>
        <Input id="password" type="password" placeholder={"비번입력하세요"} />

        <Button
          type="submit"
          theme="primary"
          variant={"solid"}
          className="mt-10 w-full"
        >
          로그인하기
        </Button>
      </Stack>
    </Box>
  );
};