Components

import { useState } from "react";
import { CloseButton } from "@/components/bootstrap/close-button";
import { Modal } from "@/components/bootstrap/modal";

export function DeleteProject() {
  const [show, setShow] = useState(false);
  const close = () => setShow(false);

  return (
    <>
      <button type="button" className="btn btn-danger" onClick={() => setShow(true)}>
        Delete project
      </button>
      <Modal show={show} onHide={close} aria-labelledby="delete-title">
        <div className="modal-header">
          <h2 className="modal-title h5" id="delete-title">Delete project</h2>
          <CloseButton onClick={close} />
        </div>
        <div className="modal-body">This cannot be undone.</div>
        <div className="modal-footer">
          <button type="button" className="btn btn-secondary" onClick={close}>Cancel</button>
          <button type="button" className="btn btn-danger" onClick={close}>Delete</button>
        </div>
      </Modal>
    </>
  );
}

<Offcanvas show={show} onHide={() => setShow(false)} placement="end" aria-labelledby="filters-title">
  <div className="offcanvas-header">
    <h2 className="offcanvas-title h5" id="filters-title">Filters</h2>
    <CloseButton onClick={() => setShow(false)} />
  </div>
  <div className="offcanvas-body">...</div>
</Offcanvas>

<Dropdown>
  <DropdownToggle as="button" type="button" className="btn btn-primary dropdown-toggle">
    Actions
  </DropdownToggle>
  <DropdownMenu className="dropdown-menu-end">
    <a className="dropdown-item" href="#">Edit</a>
    <a className="dropdown-item" href="#">Archive</a>
  </DropdownMenu>
</Dropdown>

<Alert variant="success" dismissible>
  Your changes have been saved.
</Alert>

<Accordion defaultActiveKey="shipping">
  <AccordionItem eventKey="shipping">
    <AccordionHeader>Shipping</AccordionHeader>
    <AccordionBody>Orders ship within two days.</AccordionBody>
  </AccordionItem>
  <AccordionItem eventKey="returns">
    <AccordionHeader>Returns</AccordionHeader>
    <AccordionBody>Return an order within a month.</AccordionBody>
  </AccordionItem>
</Accordion>

<button
  type="button"
  className="btn btn-light"
  aria-expanded={open}
  aria-controls="details"
  onClick={() => setOpen(!open)}
>
  Details
</button>
<Collapse in={open} id="details">
  <div className="pt-3">...</div>
</Collapse>

<TabContainer defaultActiveKey="profile">
  <ul className="nav nav-tabs" role="tablist">
    <li className="nav-item" role="presentation">
      <TabLink eventKey="profile" className="nav-link">Profile</TabLink>
    </li>
    <li className="nav-item" role="presentation">
      <TabLink eventKey="security" className="nav-link">Security</TabLink>
    </li>
  </ul>
  <div className="tab-content">
    <TabPane eventKey="profile">...</TabPane>
    <TabPane eventKey="security">...</TabPane>
  </div>
</TabContainer>

import { useToast } from "@/components/bootstrap/toast";

export function SaveButton() {
  const showToast = useToast();

  return (
    <button
      type="button"
      className="btn btn-primary"
      onClick={() => showToast({ message: "Saved", type: "success" })}
    >
      Save
    </button>
  );
}

<Tooltip content="Archive the project">
  <button type="button" className="btn btn-light">Archive</button>
</Tooltip>

<Popover title="Billing" content="Invoices are sent on the 1st.">
  <button type="button" className="btn btn-light">Billing</button>
</Popover>

<VanillaCalendar options={{ selectedDates: [today] }} />
<DataTable data={rows} columns={columns} options={{ responsive: true }} className="table table-striped" />
<FullCalendar initialView="dayGridMonth" editable events={events} />
<QuillEditor theme="snow" defaultValue="<p>Hello</p>" onChange={(html) => setBody(html)} />
<MaskedInput className="form-control" mask="(999) 999-9999" />
<Select options={options} isMulti aria-labelledby="states-label" />