Components

Systhema's components are React components styled by the CSS that @systhemaui/core generates from your design tokens. @systhemaui/react works in any React app; @systhemaui/next re-exports it and swaps in Next.js versions where next/link, next/image or next/navigation help. Every page in this section shows the component live, rendered with the default tokens.

import { Button, Card, Chip, Heading, Paragraph, Stack } from '@systhemaui/next'

export default function Demo() {
  return (
    <Card style={{ maxWidth: 480 }}>
      <Stack gap="xs">
        <Chip>New</Chip>
        <Chip>Components</Chip>
      </Stack>
      <Heading.h3>Build from tokens</Heading.h3>
      <Paragraph>Change a color or a radius in Figma, sync, and every component follows.</Paragraph>
      <Stack gap="sm">
        <Button.a href="#gallery" variant="primary">
          Browse
        </Button.a>
        <Button.a href="#token-driven-variants" variant="secondary">
          About variants
        </Button.a>
      </Stack>
    </Card>
  )
}

InstallationLink to this section

In a Next.js app, install @systhemaui/next with core:

pnpm add @systhemaui/core @systhemaui/next

In a React app without Next.js, install @systhemaui/react instead:

pnpm add @systhemaui/core @systhemaui/react

The packages come from the private GitHub Packages registry; see Registry access. The components also need the Tailwind CSS plugin and packages.react in systhema.config.ts, so their classes are generated; see Installation and Next.js.

Importing componentsLink to this section

Every page in this section imports from @systhemaui/next, as a Next.js project would:

import { Button, Heading, Section } from '@systhemaui/next'

In a React app, import the same names from @systhemaui/react. Where @systhemaui/next ships its own implementation, the component page has a "Next.js" section that says what changes. A few low-level helpers exist in @systhemaui/react only; Utilities lists them.

Most components are server-safe and render in a Server Component. The interactive ones (Accordion, Gallery, Carousel, Header, the listeners, the cookie banner) are client components that you render from a Server Component as they are.

GalleryLink to this section

ProviderLink to this section

LayoutLink to this section

Page chromeLink to this section

TypographyLink to this section

ActionsLink to this section

MediaLink to this section

ContentLink to this section

FormsLink to this section

PostsLink to this section

BehaviourLink to this section

UtilitiesLink to this section

Token-driven variantsLink to this section

Props such as variant, theme and layoutBackground take values from your project's tokens, not from a fixed list in the code. The token export names the variants (for example the keys under button in the responsiveSizing and colorSystem collections), and systhema-core sync turns each one into three things:

1. a CSS class, <component>-<variant> (button-primary, card-highlighted), whose rules read that variant's token variables;
2. a member of the matching TypeScript union in the generated types (ButtonVariant, CardVariant), so an unknown variant is a type error;
3. an entry in the client token snapshot, which the component reads at render time to pick the class.

So adding a tertiary button in Figma and syncing gives you variant="tertiary", typed and styled, without touching component code. Omitting variant picks the first variant in the tokens. theme works the same way with the color-system modes: it sets data-theme, and the token variables of that mode apply inside the element.

With the default Systhema tokens, the unions are:

import { Button, Card, Column, Columns, Heading, Paragraph, Stack } from '@systhemaui/next'

export default function Demo() {
  return (
    <Stack direction="col" gap="md" style={{ width: '100%' }}>
      <Stack gap="sm">
        <Button.button variant="primary">primary</Button.button>
        <Button.button variant="secondary">secondary</Button.button>
      </Stack>
      <Columns columns={2} gap="md">
        <Column>
          <Card variant="default">
            <Heading.h5>default</Heading.h5>
            <Paragraph type="small">CardVariant</Paragraph>
          </Card>
        </Column>
        <Column>
          <Card variant="highlighted">
            <Heading.h5>highlighted</Heading.h5>
            <Paragraph type="small">CardVariant</Paragraph>
          </Card>
        </Column>
      </Columns>
    </Stack>
  )
}

See Design tokens for how tokens flow from Figma to CSS, and Themes and backgrounds for how theme and layoutBackground nest.

AccessibilityLink to this section

The components are held to WCAG 2.2 for semantics, ARIA, keyboard use, forms, media and motion; contrast and target sizes depend on your tokens. Each page has an "Accessibility" section, and Accessibility sums up what the system guarantees.

RelatedLink to this section

• Next.js integration
• Styling
• Payload blocks, which render these components