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(),
      }),
    },
  ]}
/>;

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)}
/>;