Skip to main content

@ttoss/components

React components for the ttoss ecosystem. ESM only package.

Quick Start​

pnpm add @ttoss/components @ttoss/ui @emotion/react @ttoss/react-hooks

View all components in Storybook

Components​

All components are theme-aware and integrate seamlessly with @ttoss/ui.

OAuthConsent​

OAuth consent screen with flat and GitHub-style hierarchical scopes. Granting a parent scope automatically locks all descendants. All visible copy is injected via the labels prop — no hardcoded strings. Docs

import { OAuthConsent } from '@ttoss/components';

<OAuthConsent
  clientName="My App"
  logoUri={searchParams.get('logo_uri') ?? undefined}
  scopes={[
    {
      key: 'openid',
      label: 'OpenID Connect',
      description: 'Verify your identity',
      required: true,
    },
    {
      key: 'profile',
      label: 'Profile',
      description: 'Read your public profile information',
    },
  ]}
  onAuthorize={async (grantedScopes) => {
    const res = await authorize({ scopes: grantedScopes });
    return { ok: res.ok };
  }}
  onAuthorized={() => {
    window.location.href = resumeUrl;
  }}
  onDeny={() => navigate('/')}
  labels={{
    title: 'Authorize access',
    requestedBy: (name) => (
      <>
        <strong>{name}</strong> is requesting access.
      </>
    ),
    permissionsHeading: 'Requested permissions',
    approve: 'Authorize',
    deny: 'Deny',
    invalidRequestTitle: 'Invalid request',
    invalidRequestBody: 'Missing required OAuth parameters. Please try again.',
  }}
/>;

Accordion​

Accessible accordion component with collapsible content sections. Docs

import { Accordion } from '@ttoss/components';

<Accordion
  items={[
    {
      title: 'Section 1',
      content: 'Content for section 1',
    },
    {
      title: 'Section 2',
      content: 'Content for section 2',
    },
  ]}
/>;

DatePicker​

Date range picker with presets and mobile support. Docs

import { DatePicker } from '@ttoss/components';

<DatePicker
  label="Select period"
  value={dateRange}
  onChange={setDateRange}
  presets={[
    {
      label: 'Last 7 days',
      getValue: () => ({
        from: subDays(new Date(), 7),
        to: new Date(),
      }),
    },
  ]}
/>;

Dates, the placeholder and the calendar's month and weekday names follow the I18nProvider locale (the calendar supports English, Spanish and Portuguese, falling back to English). Preset labels are yours to translate.

Drawer​

Slide-out panels from screen edges. Docs

import { Drawer } from '@ttoss/components';

<Drawer open={isOpen} direction="right" size="300px">
  <div>Drawer content</div>
</Drawer>;

EnhancedTitle​

Structured title section with icon, badges, and metadata. Docs

import { EnhancedTitle } from '@ttoss/components';

<EnhancedTitle
  icon="fluent:shield-24-filled"
  title="Starter Plan"
  frontTitle="$49.90/mo"
  description="Perfect for small teams"
  variant="primary"
  topBadges={[
    {
      label: 'Active',
      variant: 'positive',
      icon: 'fluent:checkmark-circle-24-filled',
    },
  ]}
  bottomBadges={[
    { label: 'OneClick Tracking', icon: 'fluent:checkmark-24-filled' },
  ]}
/>;

FileUploader​

Controlled file uploader with drag-and-drop, previews, and validation. Docs

import { FileUploader } from '@ttoss/components';

<FileUploader
  onUpload={async (file, onProgress) => {
    const result = await uploadToServer(file);
    return { url: result.url, id: result.id, name: result.name };
  }}
  files={files}
  onUploadComplete={(file, result) => setFiles([...files, result])}
  onRemove={(file, index) => setFiles(files.filter((_, i) => i !== index))}
  accept="image/*,.pdf"
  maxSize={10 * 1024 * 1024}
  maxFiles={5}
/>;

InstallPwa​

PWA installation prompt component.

import { InstallPwa } from '@ttoss/components';

<InstallPwa />;

JsonEditor​

JSON editor component. Re-exports from json-edit-react. Docs

import { JsonEditor } from '@ttoss/components';

<JsonEditor data={jsonData} setData={setJsonData} />;

JsonView​

JSON viewer component. Re-exports from react-json-view-lite.

import { JsonView } from '@ttoss/components';

<JsonView data={jsonData} />;

List​

Unordered lists with customizable items. Docs

import { List, ListItem } from '@ttoss/components';

<List>
  <ListItem>First item</ListItem>
  <ListItem>Second item</ListItem>
</List>;

LockedOverlay​

Block and display locked features or restricted content within a container. Unlike modals, overlays block only their parent container. Docs

import { LockedOverlay } from '@ttoss/components';

<Box sx={{ position: 'relative' }}>
  <LockedOverlay
    isOpen={isOpen}
    onRequestClose={() => setIsOpen(false)}
    header={{
      icon: 'fluent:lock-closed-24-filled',
      title: 'Premium Feature',
      description: 'Available in Pro plan only',
      variant: 'primary',
    }}
    actions={[
      {
        label: 'Upgrade Now',
        icon: 'fluent-emoji-high-contrast:sparkles',
        variant: 'primary',
        onClick: handleUpgrade,
      },
    ]}
  >
    <Text>This feature is only available for Pro users.</Text>
  </LockedOverlay>
</Box>;

Markdown​

Render markdown content with theme integration. Docs

import { Markdown } from '@ttoss/components';

<Markdown
  components={{
    a: ({ children, ...props }) => <Link {...props}>{children}</Link>,
  }}
>
  # Heading Some **bold** text
</Markdown>;

Floating dropdown panel with a configurable trigger icon. Use NavList as children for navigation items. Docs

import { Menu, NavList } from '@ttoss/components';

<Menu>
  <NavList
    variant="menu"
    items={[
      { href: '/dashboard', label: 'Dashboard', icon: 'mdi:home-outline' },
      { href: '/settings', label: 'Settings', icon: 'mdi:cog-outline' },
    ]}
  />
</Menu>;

// Custom trigger icon
<Menu menuIcon="mdi:dots-vertical">
  <NavList variant="menu" items={items} />
</Menu>;

MetricCard​

Display metrics with progress visualization, status indicators, and contextual information. Docs

import { MetricCard } from '@ttoss/components';

<MetricCard
  metric={{
    type: 'number',
    value: 8,
    max: 10,
    label: 'Active Users',
    icon: 'mdi:account-group',
  }}
/>;

Navigation lists for sidebars, menus, and dropdowns with icons, grouping, and routing integration. Docs

import { NavList } from '@ttoss/components';

<NavList
  items={[
    { id: '1', label: 'Home', href: '/', icon: 'mdi:home' },
    { id: '2', label: 'Profile', href: '/profile', icon: 'mdi:account' },
  ]}
  variant="sidebar"
  LinkComponent={NextLink}
/>;

Theme-aware modals with accessibility features. Docs

import { Modal } from '@ttoss/components';

<Modal
  isOpen={isOpen}
  onRequestClose={() => setIsOpen(false)}
  style={{ content: { backgroundColor: 'secondary' } }}
>
  Modal content
</Modal>;

NotificationCard​

Display notification messages with actions. Docs

import { NotificationCard } from '@ttoss/components';

<NotificationCard
  title="Notification Title"
  message="Notification message"
  onClose={() => {}}
/>;

NotificationsMenu​

Menu component for displaying notifications. Docs

import { NotificationsMenu } from '@ttoss/components';

<NotificationsMenu
  notifications={[{ id: '1', title: 'New message', read: false }]}
  onNotificationClick={(notification) => {}}
/>;

Debounced search input with loading states. Docs

import { Search } from '@ttoss/components';

<Search
  value={searchText}
  onChange={setSearchText}
  loading={isLoading}
  debounce={300}
/>;

SpotlightCard​

Interactive card with spotlight effect, icon, and action buttons. Docs

import { SpotlightCard } from '@ttoss/components';

<SpotlightCard
  icon="mdi:rocket-launch"
  title="Launch Product"
  description="Deploy your product to production"
  primaryButton={{ label: 'Deploy', onClick: handleDeploy }}
  secondaryButton={{ label: 'Preview', onClick: handlePreview }}
/>;

Table​

Flexible tables with sorting and pagination. Uses TanStack Table. Docs

import { Table, useReactTable, createColumnHelper } from '@ttoss/components';

const table = useReactTable({
  data,
  columns: [
    columnHelper.accessor('name', { header: 'Name' }),
    columnHelper.accessor('email', { header: 'Email' }),
  ],
  getCoreRowModel: getCoreRowModel(),
});

<Table>
  <Table.Head>
    {table.getHeaderGroups().map((headerGroup) => (
      <Table.Row key={headerGroup.id}>
        {headerGroup.headers.map((header) => (
          <Table.Header key={header.id}>
            {flexRender(header.column.columnDef.header, header.getContext())}
          </Table.Header>
        ))}
      </Table.Row>
    ))}
  </Table.Head>
  <Table.Body>
    {table.getRowModel().rows.map((row) => (
      <Table.Row key={row.id}>
        {row.getVisibleCells().map((cell) => (
          <Table.Cell key={cell.id}>
            {flexRender(cell.column.columnDef.cell, cell.getContext())}
          </Table.Cell>
        ))}
      </Table.Row>
    ))}
  </Table.Body>
</Table>;

Tabs​

Tab navigation with content panels. Docs

import { Tabs } from '@ttoss/components';

<Tabs>
  <Tabs.TabList>
    <Tabs.Tab>Tab 1</Tabs.Tab>
    <Tabs.Tab>Tab 2</Tabs.Tab>
  </Tabs.TabList>
  <Tabs.TabContent>
    <Tabs.TabPanel>Content 1</Tabs.TabPanel>
    <Tabs.TabPanel>Content 2</Tabs.TabPanel>
  </Tabs.TabContent>
</Tabs>;

Toast​

Toast notification system. Docs

import { Toast } from '@ttoss/components';

<Toast
  message="Success message"
  type="success"
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
/>;