UI Package(@imdonggun/react-ui-kit)

Accordion

source

src/components/Accordion

children

• index
• AccordionButton
• AccordionContent
• AccordionTitle

Example

<Accordion>
  <Accordion.Title>Title</Accordion.Title>
  <Accordion.Button>Accordion Button</Accordion.Button>
  <Accordion.Content>This is AccordionContent</Accordion.Content>
</Accordion>

Breadcrumb

source

src/components/Breadcrumb

children

• index
• BreadcrumbItem

Example

<Breadcrumb width={200}>
  <Breadcrumb.Item href="/a">A</Breadcrumb.Item>
  <Breadcrumb.Item href="/a-a">A-B</Breadcrumb.Item>
  <Breadcrumb.Item href="/a-a-a">A-B-C</Breadcrumb.Item>
  <Breadcrumb.Item href="/a-a-a">A-B-C-D</Breadcrumb.Item>
  <Breadcrumb.Item href="/a-a-a">A-B-C-D-E</Breadcrumb.Item>
  <Breadcrumb.Item href="/a-a-a">A-B-C-D-E-F</Breadcrumb.Item>
</Breadcrumb>

Calendar

source

src/components/Calendar

children

• index
• CalendarCurrent
• CalendarBody
• CalendarNavigator

Example

<Calendar>
  <Calendar.Navigator></Calendar.Navigator>
  // custom CalendarBody
  <Calendar.Body>
    {(dates) => dates.map((date) => <div>{date.toLocaleString()}</div>)}
  </Calendar.Body>
</Calendar>

Carousel

source

src/components/Carousel

children

• index
• CarouselIndicator
• CarouselNavigator
• CarouselItem
• CarouselItemList

Example

<Carousel totalItemCount={3}>
  <Carousel.ItemList>
    <Carousel.Item index={0}>Item-1</Carousel.Item>
    <Carousel.Item index={1}>Item-2</Carousel.Item>
    <Carousel.Item index={2}>Item-3</Carousel.Item>
  </Carousel.ItemList>
  <Carousel.Navigator></Carousel.Navigator>
  <Carousel.Indicator />
</Carousel>

Pagination

source

src/components/Pagination

children

• index
• Navigator
• PageButtons

Example

<Pagination
  totalPages={30}
  currentPage={currentPage}
  onPageChange={handlePageChange}
>
  <Pagination.PageButtons />
  <Pagination.Navigator />
</Pagination>

Popover

source

src/components/Popover

children

• Root
• PopoverContent
• PopoverTrigger

Example

<Popover.Root position="bottom-center">
  <Popover.Trigger>Open</Popover.Trigger>
  <Popover.Content>Place content for the popover here.</Popover.Content>
</Popover.Root>

Tabs

source

src/components/Tabs

children

• index
• TabMenu
• TabMenuList
• TabPannel

Example

<Tabs onChangeTab={handleChangeTab} defaultTabIndex={currentTabIndex}>
  <Tabs.MenuList>
    <Tabs.Menu index={1}>Menu1</Tabs.Menu>
    <Tabs.Menu index={2}>Menu2</Tabs.Menu>
    <Tabs.Menu index={3}>Menu3</Tabs.Menu>
  </Tabs.MenuList>
  <Tabs.Pannel index={1}>Content1</Tabs.Pannel>
  <Tabs.Pannel index={2}>Content2</Tabs.Pannel>
  <Tabs.Pannel index={3}>Content3</Tabs.Pannel>
</Tabs>

Progress

source

src/components/Progress

children

• index

Example

<Progress stop={stop} />

DatePicker

source

src/components/DatePicker

children

• index

Example

<DatePicker date={new Date()} onChangeDate={handleChangeDate} />

Modal

source

src/components/Modal

children

• Root
• Backdrop
• Trigger
• Close
• Content

Example

<Modal.Root
  onCloseModal={handleCloseModal}
  open={isOpen}
  onOpenModal={handleOpenModal}
>
  <Modal.Backdrop />
  <Modal.Trigger>
    <div>Custom-Trigger</div>
  </Modal.Trigger>
  <Modal.Content>
    <Modal.Close>
      <div> custom-modal-close</div>
    </Modal.Close>
    <div>Modal Content</div>
  </Modal.Content>
</Modal.Root>

Select

source

src/components/Select

children

• Root
• Trigger
• Content
• Item

Example

<Select.Root onChangeValue={handleChangeValue} value={selectedValue}>
  <Select.Trigger>Select Item</Select.Trigger>
  <Select.Content>
    <Select.Item value={"1"}>One</Select.Item>
    <Select.Item value={"2"}>Two</Select.Item>
    <Select.Item value={"3"}>Three</Select.Item>
  </Select.Content>
</Select.Root>

Toast

source

src/components/Toast

children

• ToastAction
• ToastContainer
• ToastDescription
• ToastTitle

hooks

• useToast

Example

const toast = useToast();

<button
  onClick={() => {
    toast({
      title: "This is toast title",
      description: "this is toast description",
      duration: 3000,
      actionElem: <ToastAction>close button</ToastAction>,
    });
  }}
>
  Click Toast
</button>;

<Toast.Container />;