UI Overview

Leave Localhost ships a shared UI package at packages/ui that both the product app (apps/app) and the marketing site (apps/marketing) import from. The package is built on shadcn/ui, Radix primitives, Tailwind CSS v4, and class-variance-authority for variant-driven styling.

Package at a Glance

What Lives Here

The UI package owns everything that is shared across apps:

• Components — pre-styled, accessible primitives (Button, Card, Dialog, Sidebar, etc.) exported individually from @leavelocalhost/ui/<component>.
• Design tokens — CSS custom properties for colors, radii, shadows, and typography defined in src/globals.css.
• Utilities — the cn() helper for merging Tailwind classes, callAll() for composing event handlers, and useDoubleCheck() for destructive-action confirmation UX.
• Hooks — useIsMobile() for responsive behavior at the 768 px breakpoint.

What Belongs Elsewhere

• Product-only UI — components that only appear in the authenticated app belong in apps/app/src/components or co-located _components directories.
• Marketing-only UI — landing-page sections, pricing cards, and other public-facing components belong in apps/marketing.

Included Components

The package exports the following components via individual entry points:

Importing Components

Every component is exported through a dedicated entry point, not a barrel index.ts. Import from the specific path:

import { Button } from "@leavelocalhost/ui/button";
import { cn } from "@leavelocalhost/ui/utils";

Do not use deep imports into src/. The exports map in package.json defines the public API.

Utility Exports

cn(...inputs)

Merges class names with clsx and tailwind-merge. Use this everywhere you compose Tailwind classes:

import { cn } from "@leavelocalhost/ui/utils";

<div className={cn("p-4", isActive && "bg-primary")} />;

callAll(...fns)

Calls multiple event handlers in sequence. Useful when composing behavior from different sources:

import { callAll } from "@leavelocalhost/ui/utils";

<button onClick={callAll(onTrack, onClose)} />;

useDoubleCheck()

Returns { doubleCheck, getButtonProps } to implement two-click confirmation for destructive actions. On first click the button enters a "confirm" state; on second click the action fires. Pressing Escape or blurring the button resets.

import { useDoubleCheck } from "@leavelocalhost/ui/utils";

const { doubleCheck, getButtonProps } = useDoubleCheck();

<Button
  variant={doubleCheck ? "destructive" : "ghost"}
  {...getButtonProps({ onClick: handleDelete })}
>
  {doubleCheck ? "Are you sure?" : "Delete"}
</Button>;

useIsMobile()

Returns true when the viewport is narrower than 768 px. Used by the Sidebar component to switch between desktop and mobile layouts:

import { useIsMobile } from "@leavelocalhost/ui/use-mobile";

Next Reads

• shadcn/ui — adding and customizing shadcn components.
• Theming — design tokens and CSS custom properties.
• Dark Mode — how dark mode works.
• Internationalization (i18n) — internationalization setup.
• Customizing the Dashboard — modifying the sidebar, header, and navigation.