Components

August 3, 2026 · View on GitHub

UI components organized by purpose.

components/
├── ui/        → Primitives (reusable across projects)
├── layout/    → Site chrome (customize per project)
└── effects/   → Animation & visual enhancements

Direct Imports (Recommended)

// UI Components - import directly for better clarity
import { Image } from '@/components/ui/image'
import { Link } from '@/components/ui/link'
import { Menu } from '@/components/ui/menu'
import { Select } from '@/components/ui/select'
import { Tabs } from '@/components/ui/tabs'
import { Toast } from '@/components/ui/toast'
import { Marquee } from '@/components/ui/marquee'

// Layout Components
import { Wrapper } from '@/components/layout/wrapper'
import { Header } from '@/components/layout/header'
import { Footer } from '@/components/layout/footer'

// Effects Components (GSAPRuntime is auto-loaded via OptionalFeatures - do not import manually)

Component Inventory

For the full, always-current component / hook / utility inventory, see COMPONENTS.md, generated by bun run generate:manifest.

UI Components

Built on Base UI for accessibility.

Component	Purpose
`image/`	Optimized images (always use this, never `next/image`)
`link/`	Smart navigation (auto-detects external)
`form/`	Form components with validation
`select/`	Custom dropdowns (accessible, Base UI)
`menu/`	Dropdown menus
`accordion/`	Expandable sections
`tabs/`	Tab navigation
`tooltip/`	Hover hints
`alert-dialog/`	Confirmation dialogs
`toast/`	Notifications
`checkbox/`	Checkboxes
`switch/`	Toggle switches
`fold/`	Scroll-based folding
`scrollbar/`	Custom scrollbars
`real-viewport/`	Sets the `--scrollbar-width` CSS property
`marquee/`	Infinite scrolling text
`sanity-image/`	Sanity-optimized image component
`not-configured/`	Placeholder for unconfigured integrations

Layout Components

Component	Purpose
`wrapper/`	Page wrapper (theme, WebGL, Lenis)
`header/`	Site header/navigation
`footer/`	Site footer
`lenis/`	Smooth scrolling

<Wrapper theme="dark" webgl lenis>
  <section>Your content</section>
</Wrapper>

Effects Components

GSAPRuntime is automatically loaded via OptionalFeatures in the root layout - do not import it manually.

Component	Purpose
`gsap/`	GSAP + Tempus integration (auto-loaded)
`progress-text/`	Scroll-based text reveal

Best Practices

// ✅ Always use custom Image
import { Image } from '@/components/ui/image'
<Image src="/photo.jpg" alt="Photo" aspectRatio={16/9} mobileSize="100vw" desktopSize="50vw" />

// ✅ Always use custom Link
import { Link } from '@/components/ui/link'
<Link href="/about">Internal</Link>
<Link href="https://example.com">External</Link>

// ✅ CSS Modules + Tailwind
import s from './component.module.css'
<div className={cn(s.wrapper, 'flex items-center')} />