Use the components

Start with the smallest example that demonstrates what you need. Totems combines React Bootstrap components, focused Totems components, and direct third-party integrations.

Find a working reference

Use src/routes/components/ to inspect a component in context. Then follow its imports to the reusable implementation or upstream library. The matching guide in docs/components/ explains the supported integration and its limits.

Standard buttons, cards, modals, and form controls generally use React Bootstrap directly. Totems adds theme styling rather than a replacement API for every Bootstrap component.

Compose a page header

src/components/page/PageHeader.tsx accepts a title, description, breadcrumbs, actions, and an optional back action. For a file under src/routes/pages/, use:

import PageHeader from "../../components/page/PageHeader";

<PageHeader
  title="Workspace notes"
  description="Guidance for your team."
  breadcrumbs={[{ label: "Workspace" }, { label: "Notes" }]}
/>;

This is a JSX fragment to place inside your component. The title becomes the page's h1; do not place another h1 inside it. Actions remain caller-owned: supply their handlers, loading states, and permissions.

Use tables with TanStack

src/components/data-table/DataTable.tsx renders a native TanStack table instance. The page configures useReactTable() and passes the result as table; Totems supplies the table presentation.

Keep columns, data, sorting, filtering, pagination, and remote requests in your page or application code. Client pagination needs getPaginationRowModel(); server pagination needs the matching TanStack manual configuration and totals. Rendering a pagination control does not fetch another server page.

Use loading, error, emptyMessage, and filteredEmptyMessage for distinct outcomes. loading does not automatically disable all controls; builtInToolbarDisabled affects the built-in toolbar, while caller-provided filters and actions need their own disabled state.

The current presentation does not render every TanStack capability. Features such as virtualization, column pinning, or expandable rows need suitable feature-specific markup. Consult docs/components/data-tables.md before assuming a headless option supplies visible UI.

Keep native library APIs

React Select, Tiptap, chart libraries, and Calendar retain their own APIs. There is no universal Totems wrapper that normalizes them all.

For React Select, the compatibility classes are className="react-select-container" and classNamePrefix="react-select". Preserve the visible label and matching inputId. For Tiptap, use its native editor hooks and content component; choose storage and rendering rules for your own application.

Adapt responsibly

Keep native labels, keyboard behavior, and feedback while simplifying the example. Remove demonstration-only controls you do not need. Check empty content, long text, errors, and narrow widths before treating an extracted component as finished.

Use Forms and validation for controlled inputs and Demo data and services for the application responsibilities behind the UI.