Flowbite

flowbite란?

• Tailwind CSS의 컴포넌트 라이브러리이다.
• Interactive한 UI 컴포넌트 오픈소스 라이브러리

flowbite의 특징

• 유틸리티 우선 Tailwind CSS 프레임워크를 기반으로 하는 UI 오픈소스 라이브러리
  • 다크모드 지원, 피그마 디자인 시스템, 템플릿 등을 지원
• 웹사이트가 필요로 하는 자주 사용되는 컴포넌트인 버튼, 드롭다운, 네비게이션 바, 모달 부터 데이트 피커 까지 다양한 컴포넌트 들을 지원
• 타입스크립트도 지원하며 테일윈드 CSS의 유틸리티 클래스와 바닐라 자바스크립트로 만들어짐

flowbite 시작하기

• flowbite 설치

npm i flowbite-react

• content 추가해주기

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}' /* src folder, for example */,
    'node_modules/flowbite-react/lib/esm/**/*.js',
],
  theme: {
    extend: {},
  },
  plugins: [require('flowbite/plugin'),],
};

• flowbite의 컴포넌트 사용하기
  • flowbite-react로 부터 import하여 사용

import { Button } from 'flowbite-react';

export default function MyPage() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}

Flowbite React 컴포넌트들

Accordion

• 아코디언 메뉴를 생성해 준다

import { Accordion } from 'flowbite-react';

<Accordion collapseAll> 
	<Accordion.Panel>	// 각 항목
        <Accordion.Title>제목</Accordion.Title>
				<Accordion.Content>내용</Accordion.Content>
	</Accordion.Panel>
	<Accordion.Panel>	// 각 항목
        <Accordion.Title>제목</Accordion.Title>
				<Accordion.Content>내용</Accordion.Content>
	</Accordion.Panel>
	...
</Accordion>

Alert

• 경고 요소, 다양한 색상, 크기, 스타일을 지원 하며 상황별 텍스트를 사용자에게 표시하는데 사용 가능

import { HiEye, HiInformationCircle } from 'react-icons/hi';
import { Alert } from 'flowbite-react';

function Component() {
  return (
    <Alert
      additionalContent={<ExampleAdditionalContent />}
      color="success"
      icon={HiInformationCircle}
      onDismiss={() => alert('Alert dismissed!')}
      rounded
    >
      <span className="font-medium">Info alert!</span> Change a few things up and try submitting again.
    </Alert>
  );
}

Avatar

• 아바타 요소를 만들어주는 컴포넌트
  • 드롭다운, 텍스트 등 다양한 컴포넌트도 지원

import { Avatar } from 'flowbite-react';

function Component() {
  return (
    <div className="flex flex-wrap gap-2">
      <Avatar img="/images/people/profile-picture-5.jpg" alt="avatar of Jese" rounded />
      <Avatar img="/images/people/profile-picture-5.jpg" />
    </div>
  );
}

Badge

• 텍스트, 라벨, 카운터 등을 단락이나 버튼 내에 표시하기 위한 컴포넌트
  • 하이퍼링크를 달거나 이콘도 삽입 가능

import { Badge } from 'flowbite-react';

function Component() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge href="#">Default</Badge>
      <Badge size="sm" href="#">
        Default
      </Badge>
    </div>
  );
}

Breadcrumb

• 사용자의 웹사이트 탐색을 돕는 페이지 구조와 URL을 만들고 표시
• prop을 사용하여 href 탐색 경로 항목을 클릭 가능하게 만들고 icon을 활용하여 아이콘 추가 가능

import { Breadcrumb } from 'flowbite-react';
import { HiHome } from 'react-icons/hi';

function Component() {
  return (
    <Breadcrumb aria-label="Solid background breadcrumb example" className="bg-gray-50 px-5 py-3 dark:bg-gray-800">
      <Breadcrumb.Item href="#" icon={HiHome}>
        Home
      </Breadcrumb.Item>
      <Breadcrumb.Item href="#">Projects</Breadcrumb.Item>
      <Breadcrumb.Item>Flowbite React</Breadcrumb.Item>
    </Breadcrumb>
  );
}

Button

Carousel

• 슬라이딩 애니메이션을 위한 Carousel

Datepicker

• 날짜 선택이 가능한 입력창

import { Datepicker } from 'flowbite-react';

function Component() {
  return <Datepicker />;
}

Dropdown

• 드롭다운 버튼

import { Dropdown } from 'flowbite-react';

function Component() {
  return (
    <Dropdown label="Dropdown button" dismissOnClick={false}>
      <Dropdown.Item>Dashboard</Dropdown.Item>
      <Dropdown.Item>Settings</Dropdown.Item>
      <Dropdown.Item>Earnings</Dropdown.Item>
      <Dropdown.Item>Sign out</Dropdown.Item>
    </Dropdown>
  );
}

Modal

• 모달창을 띄워주는 컴포넌트’

import { Button, Modal } from 'flowbite-react';
import { useState } from 'react';

function Component() {
  const [openModal, setOpenModal] = useState(false);

  return (
    <>
      <Button onClick={() => setOpenModal(true)}>Toggle modal</Button>
      <Modal show={openModal} onClose={() => setOpenModal(false)}>
        <Modal.Header>Terms of Service</Modal.Header>
        <Modal.Body>
          <div className="space-y-6">
            <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
              With less than a month to go before the European Union enacts new consumer privacy laws for its citizens,
              companies around the world are updating their terms of service agreements to comply.
            </p>
            <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
              The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant
              to ensure a common set of data rights in the European Union. It requires organizations to notify users as
              soon as possible of high-risk data breaches that could personally affect them.
            </p>
          </div>
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={() => setOpenModal(false)}>I accept</Button>
          <Button color="gray" onClick={() => setOpenModal(false)}>
            Decline
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

Progress bar

• 진행도를 표시해주는 상태 바

import { Progress } from 'flowbite-react';

function Component() {
  return (
    <Progress
      progress={45}
      progressLabelPosition="inside"
      textLabel="Flowbite"
      textLabelPosition="outside"
      size="lg"
      labelProgress
      labelText
    />
  );
}

Timeline

• 타임라인 순으로 표시 해주는 타임라인 컴포넌트

import { Button, Timeline } from 'flowbite-react';
import { HiArrowNarrowRight } from 'react-icons/hi';

function Component() {
  return (
    <Timeline>
      <Timeline.Item>
        <Timeline.Point />
        <Timeline.Content>
          <Timeline.Time>February 2022</Timeline.Time>
          <Timeline.Title>Application UI code in Tailwind CSS</Timeline.Title>
          <Timeline.Body>
            Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order
            E-commerce & Marketing pages.
          </Timeline.Body>
          <Button color="gray">
            Learn More
            <HiArrowNarrowRight className="ml-2 h-3 w-3" />
          </Button>
        </Timeline.Content>
      </Timeline.Item>
      <Timeline.Item>
        <Timeline.Point />
        <Timeline.Content>
          <Timeline.Time>March 2022</Timeline.Time>
          <Timeline.Title>Marketing UI design in Figma</Timeline.Title>
          <Timeline.Body>
            All of the pages and components are first designed in Figma and we keep a parity between the two versions
            even as we update the project.
          </Timeline.Body>
        </Timeline.Content>
      </Timeline.Item>
      <Timeline.Item>
        <Timeline.Point />
        <Timeline.Content>
          <Timeline.Time>April 2022</Timeline.Time>
          <Timeline.Title>E-Commerce UI code in Tailwind CSS</Timeline.Title>
          <Timeline.Body>
            Get started with dozens of web components and interactive elements built on top of Tailwind CSS.
          </Timeline.Body>
        </Timeline.Content>
      </Timeline.Item>
    </Timeline>
  );
}

Sidebar

• 사이드 메뉴를 만들어주는 사이드바

'use client';

import { Sidebar } from 'flowbite-react';
import { HiArrowSmRight, HiChartPie, HiInbox, HiShoppingBag, HiTable, HiUser } from 'react-icons/hi';

function Component() {
  return (
    <Sidebar aria-label="Sidebar with multi-level dropdown example">
      <Sidebar.Items>
        <Sidebar.ItemGroup>
          <Sidebar.Item href="#" icon={HiChartPie}>
            Dashboard
          </Sidebar.Item>
          <Sidebar.Collapse icon={HiShoppingBag} label="E-commerce">
            <Sidebar.Item href="#">Products</Sidebar.Item>
            <Sidebar.Item href="#">Sales</Sidebar.Item>
            <Sidebar.Item href="#">Refunds</Sidebar.Item>
            <Sidebar.Item href="#">Shipping</Sidebar.Item>
          </Sidebar.Collapse>
          <Sidebar.Item href="#" icon={HiInbox}>
            Inbox
          </Sidebar.Item>
          <Sidebar.Item href="#" icon={HiUser}>
            Users
          </Sidebar.Item>
          <Sidebar.Item href="#" icon={HiShoppingBag}>
            Products
          </Sidebar.Item>
          <Sidebar.Item href="#" icon={HiArrowSmRight}>
            Sign In
          </Sidebar.Item>
          <Sidebar.Item href="#" icon={HiTable}>
            Sign Up
          </Sidebar.Item>
        </Sidebar.ItemGroup>
      </Sidebar.Items>
    </Sidebar>
  );
}

More Detail…

• https://www.flowbite-react.com/

Flowbite React 다크모드 적용하기

• 컴포넌트를 로 감싸기
  • 내부에 DarkThemToggle 컴포넌트를 삽입
  • DarkThemeToggle은 자동으로 현재 테마를 탐지해 현재 테마에 맞는 아이콘을 표시하고 사용자가 테마를 변경할 수 있도록 만들어줌
  • FlowBite에서 쓰는 컴포넌트들은 자동으로 해당 테마에 맞게 변경될 것임

import { DarkThemeToggle, Flowbite } from "flowbite-react";

export default function MyPage() {

return (
	<Flowbite>
	...
	<DarkThemToggle />
	...
</Flowbite>
)

}