twenty-ui bridge

A thin pass-through to twenty-sdk/ui— Twenty CRM's own design system, the same one the CRM uses internally — exposed at the @8maverik8/twenty-design/twenty-uisubpath so it's a one-import switch from our Radix-based primitives.

Why two import paths?

Our Radix-based primitives are built for Normal DOM (this docs site, any standalone Next.js app). They use [data-state="open"] selectors that the Twenty Remote DOM bridge strips at the host boundary (only data-testid survives — see HTML_COMMON_PROPERTIES_CONFIG). So we provide a second import path that re-exports Twenty's own Linaria-extracted components, which the SDK verifies render correctly inside front-component'ов.

// Normal DOM (Next.js docs, standalone apps, anything browser-native)
import { Button, Tag, Card } from '@8maverik8/twenty-design';
//   ↑ Radix-based, full `data-state` styling, our --t-* tokens

// Twenty Remote DOM (inside a front-component bundled for Twenty CRM)
import { Button, Tag, Card } from '@8maverik8/twenty-design/twenty-ui';
//   ↑ re-exported from twenty-sdk/ui — Linaria-extracted CSS,
//     verified inside Twenty's UILibraries Storybook stories.

Usage in a front-component

import { defineFrontComponent } from 'twenty-sdk/define';
import { useRecordId } from 'twenty-sdk/front-component';
import { Button, Tag, ThemeProvider } from '@8maverik8/twenty-design/twenty-ui';

const MyPanel = () => {
  const recordId = useRecordId();
  return (
    <ThemeProvider colorScheme="light">
      <Tag color="blue" text="Active" variant="solid" />
      <Button title="Save" accent="blue" onClick={() => save(recordId)} />
    </ThemeProvider>
  );
};

export default defineFrontComponent({
  universalIdentifier: '…',
  name: 'my-panel',
  description: 'Panel content',
  component: MyPanel,
});

What's available

Full surface comes from twenty-sdk/ui (which re-exports the twenty-ui package). Categorized index below — names import directly from the bridge.

Peer dependency

The bridge needs twenty-sdkat runtime. It's declared as an optional peer of @8maverik8/twenty-design— consumers building front-component'ы already have it (they need defineFrontComponentfrom there anyway). Consumers that only use the Normal-DOM root export aren't required to install it.

yarn add twenty-sdk twenty-client-sdk
# or
pnpm add twenty-sdk twenty-client-sdk