@third-loop/react

Third Loop's React component library — a curated set of presentational, service-free UI components, form controls, theming, and hooks for building browser applications.

This package is the public surface of the Third Loop frontend. The internal implementation packages are bundled in at build time, so you install just this one package plus its React peer dependencies.

Installation

npm install @third-loop/react
# peer dependencies
npm install react react-dom

React 19 is required (react and react-dom are peer dependencies).

Styles

The components ship their styles in a single stylesheet. Import it once, near your application entry point:

import '@third-loop/react/styles.css';

This stylesheet includes the design tokens (CSS variables) the components read for light and dark themes. Fonts are intentionally not bundled; opt in separately with import '@tlfe/design-system/fonts.css' if you want the Geist typeface, or supply your own.

Usage

import { ThemeProvider, FormField, TextInput, Button } from '@third-loop/react';
import '@third-loop/react/styles.css';

export const App = () => (
  <ThemeProvider defaultTheme="auto">
    <FormField label="Name">
      <TextInput placeholder="Ada Lovelace" />
    </FormField>
    <Button variant="primary" onClick={() => console.log('clicked')}>
      Save
    </Button>
  </ThemeProvider>
);

Every component is fully typed; prop and variant types are exported alongside each component (for example ButtonProps, ButtonVariant).

What is included

The public API is defined entirely by the package entry point. It currently exports:

• Primitives — Button, Checkbox, form controls (TextInput, Textarea, Select, RadioGroup, FormField).
• Generic components — SegmentedControl, LinearProgressBar, ProgressMeter, SkeletonLoader, Tooltip, LoadingSpinner, SearchBar.
• Overlays and navigation — GenericModal, GenericPortal, DropdownMenu, Logo.
• Theming — ThemeProvider, useTheme, ThemeToggle. Wrap your app once and every component follows the selected light / dark / auto theme via the data-theme attribute.
• Widgets — composed building blocks that take their data and handlers via props (ConfirmDeletion, TextViewer, SmallChat).
• Hooks — useClickOutside, useCopyToClipboard, useDebouncedValue.

What is not included

The surface is deliberately curated. Service-coupled components (file upload, sharing, admin/billing) and the HTTP / SSE client layer are intentionally excluded so this package stays presentational and dependency-light. The client layer is planned for a later release.

License

Apache-2.0.