ShipFast Docs

Appearance

Other Components ​

Utility and layout components for common UI patterns.

Tabs ​

Organize content into tabbed sections.

javascript
import Tabs from "@/components/Tabs";

<Tabs />

Useful for: pricing toggles (monthly/annual), feature comparisons, segmented content.

A popup dialog overlay.

javascript
import Modal from "@/components/Modal";

<Modal />

Built on daisyUI's modal system. Use for: confirmations, forms, detail views.

To trigger programmatically with daisyUI:

javascript
// Open
document.getElementById("my-modal").showModal();

// In JSX
<button onClick={() => document.getElementById("my-modal").showModal()}>
  Open
</button>
<dialog id="my-modal" className="modal">
  <div className="modal-box">
    <h3>Modal Title</h3>
    <p>Modal content here.</p>
  </div>
  <form method="dialog" className="modal-backdrop">
    <button>close</button>
  </form>
</dialog>

BetterIcon ​

A wrapper for displaying SVG icons with consistent sizing and alignment.

javascript
import BetterIcon from "@/components/BetterIcon";

<BetterIcon>
  {/* Your SVG here */}
</BetterIcon>

Use with Heroicons or Lucide icons.

WithWithout ​

A before/after comparison table showing life without your product vs. with it.

javascript
import WithWithout from "@/components/WithWithout";

<WithWithout />

Two columns: "Without [AppName]" (pain) and "With [AppName]" (relief). Effective near the top of the page after the Problem section.

See Also ​