Skip to content
OZEAON Wiki

UI Primitives

src/components/ui/ is the shared presentational layer used across every feature area. It is split into eleven domain-scoped folders, each with an index.ts barrel, plus a handful of root-level utility files. Consumers import from the root barrel (@/components/ui) rather than from per-folder paths.

Folders

Section titled “Folders”

Each folder has a dedicated catalog page:

  • actions — button-shaped primitives: ButtonGroup, IconButton, LikeButton, LoadingButton
  • cards — card shells and surfaces: CondensedCard*, CollapsibleCard
  • comments — comment thread components: EntityComments, CommentThread, CommentForm, and friends
  • display — read-only fragments: CategoryBadges, CardFooter, Tags, EmptyState, and ~15 others
  • errors — error UI components
  • forms — form wrappers and field primitives
  • images — image display utilities
  • inputs — controlled input components
  • layout — layout shells and feed utilities: GenericInfiniteFeed, ResponsiveCardList, TwoColumnShell, SidebarShell
  • overlays — modals, drawers, and popovers
  • skeletons — loading skeleton components

Root-level files (ExternalLink.tsx, DynamicMarker.tsx, sidebar.tsx, utils.tsx) provide loose utilities not large enough for their own folder.

Import Convention

Section titled “Import Convention”

Import from the root barrel. The root index.ts re-exports everything from the folder barrels, so there is no need to reach into a subfolder:

import { IconButton, EntityComments, TwoColumnShell } from "@/components/ui";

Feature components (src/components/articles, src/components/projects, etc.) follow the same pattern and compose from this layer rather than duplicating it.

Section titled “Related Links”