@tramo-digital/react-ui

v0.0.2

Published

3 days ago

tramo.digital - react-ui

0High
0Medium
0Low

@tramo-digital/react-ui

Auto-generated React component library from @tramo-digital/core scaffolds, powered by the Tramo transformation pipeline.

[!WARNING] This library is auto-generated. Don't edit files here directly — changes are overwritten on every transformation run.
Edit source scaffolds in libs/core/src/scaffolds/ui/
Run pnpm transformation to regenerate
Run pnpm nx build @tramo-digital/react-ui for changes to take effect

Installation

npm install @tramo-digital/react-ui @tramo-digital/styles
# or
pnpm add @tramo-digital/react-ui @tramo-digital/styles

Peer dependencies

| Package | Version | | ----------- | ------- | | react | 19.0.0 | | react-dom | 19.0.0 |

Required companion packages

| Package | Purpose | | -------------------------- | -------------------------------- | | @tramo-digital/styles | Design tokens (CSS custom properties) |

[!IMPORTANT] You must install @tramo-digital/styles alongside this package. Without the design tokens, components render without colors, spacing, typography, and other visual properties.

CSS setup

Every consumer must import two CSS files at the root of the application. Both are required for components to render correctly.

// 1. Design tokens — colors, spacing, typography, breakpoints
import '@tramo-digital/styles/css/min.css';

// 2. Component styles — scoped CSS modules for every component
import '@tramo-digital/react-ui/style.css';

Import order matters: design tokens must load before component styles so that CSS custom properties are available when component stylesheets reference them.

Where to place the imports

Place both imports in your application's entry point so they load once and are available globally.

React (Vite / CRA)

// src/main.tsx or src/index.tsx
import '@tramo-digital/styles/css/min.css';
import '@tramo-digital/react-ui/style.css';

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

Next.js (App Router)

// app/layout.tsx
import '@tramo-digital/styles/css/min.css';
import '@tramo-digital/react-ui/style.css';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Astro

---
// src/layouts/Layout.astro
import '@tramo-digital/styles/css/min.css';
import '@tramo-digital/react-ui/style.css';
---
<html lang="en">
  <body><slot /></body>
</html>

[!WARNING] If you skip the design tokens import (@tramo-digital/styles/css/min.css), components will appear unstyled — missing colors, fonts, and spacing.

Quick start

import '@tramo-digital/styles/css/min.css';
import '@tramo-digital/react-ui/style.css';
import { Frame, Hero, Card, GridContainer, GridItem } from '@tramo-digital/react-ui';

function App() {
  return (
    <Frame data={{ as: 'div' }} colorPalette="light" colorSource="palette">
      <GridContainer>
        <GridItem>
          <Hero
            data={{
              content: {
                contentAlignment: 'left',
                headline: { text: 'Welcome to Tramo', size: 'lg', weight: 'bold' },
                textBody: { text: 'Design-to-code transformation', size: 'md' },
                buttons: [
                  { data: { text: 'Get Started', variant: 'primary', size: 'md' } },
                ],
              },
              media: {
                src: 'https://picsum.photos/1400/800',
                alt: 'Hero background',
              },
              overlay: { isOpen: true },
            }}
          />
        </GridItem>
        <GridItem>
          <Card
            data={{
              content: {
                headline: { text: 'Component Card', size: 'lg', weight: 'bold' },
                textBody: { text: 'Auto-generated from core scaffolds', size: 'md' },
                buttons: [
                  { data: { text: 'Learn More', variant: 'secondary', size: 'md' } },
                ],
              },
              src: 'https://picsum.photos/800/600',
              alt: 'Card image',
            }}
          />
        </GridItem>
      </GridContainer>
    </Frame>
  );
}

Available components

All components live under four categories — Primitives, Patterns, Compositions, and Layout — mirroring the scaffold structure in libs/core.

Primitives

Basic building blocks consumed by every higher-level component.

| Component | Purpose | | --------------- | -------------------------------------------- | | Avatar | User avatar | | Badge | Label / status indicator | | Button | Interactive button with variants and states | | Checkbox | Checkbox input | | Frame | Theme wrapper and design-system context provider | | Icon | SVG icons with dynamic loading | | Image | Responsive images with optimization | | Input | Text input field | | InterfaceIcon | Interface-specific icon | | Link | Text link | | List | Ordered / unordered list | | Loader | Loading spinner / skeleton | | Logo | Logo with variants | | Overlay | Overlay for modals and dialogs | | Radio | Radio input | | Select | Dropdown select | | Separator | Visual divider | | TextBlock | Rich text block | | TextBody | Body text | | TextDisplay | Display / hero text | | TextEyebrow | Eyebrow text | | TextHeading | Heading text | | TextQuote | Quotation text | | Textarea | Multi-line text input | | Toggle | Toggle switch | | Video | Video player |

Patterns

Combined building blocks that form reusable UI patterns.

| Component | Purpose | | ------------- | ------------------------------------- | | Author | Author byline | | Breadcrumb | Breadcrumb navigation | | Card | Content card with actions | | Content | Typography and text content wrapper | | FormGroup | Labeled form field group | | Navigation | Navigation with prev/next controls | | StripBanner | Thin promotional banner strip | | Teaser | Teaser / preview card |

Compositions

Higher-level, page-section components.

| Component | Purpose | ------------------ | Accordion | Banner | Carousel | Collage | ContentGrid | Faq | Footer | Header | Hero | HeroEnhanced | LinkGroup | MediaQuote | MediaSplit | MediaText | QuoteBanner | QuoteSection | StatementSection | Tabs | | ------------------------------------------------- | | Collapsible content sections | | Notification and alert banners | | Image and content slider | | Multi-image collage layout | | Auto-grid layout for structured content | | FAQ section | | Site footer | | Site header / navigation bar | | Hero section with CTA | | Enhanced hero with additional layout options | | Jump-link navigation group | | Quote with accompanying media | | Background media on top, content split below | | Side-by-side media and text | | Full-width quote banner | | Multi-quote section | | Bold statement section | | Tabbed content panels |

Layout

Structural layout primitives.

| Component | Purpose | | --------------- | ------------------------------ | | Container | Max-width content wrapper | | Drawer | Slide-out drawer panel | | GridContainer | CSS-grid parent container | | GridItem | Grid child with span control | | Stack | Vertical / horizontal flex stack |

Hooks

The library ships with React hooks for common design-system concerns.

| Hook | Purpose | | ---------------- | -------------------------------------------- | | useBreakpoint | Track the active responsive breakpoint | | useDataLoader | Fetch and cache component blueprint data | | useStore | Access the shared @tramo-digital/store |

import { useBreakpoint } from '@tramo-digital/react-ui';

function ResponsiveSection() {
  const bp = useBreakpoint();

  return bp === 'lg'
    ? <DesktopLayout />
    : <MobileLayout />;
}

TypeScript support

Every component exports its own props type:

import { Button, type ButtonProps } from '@tramo-digital/react-ui';

const PrimaryButton: React.FC<ButtonProps> = (props) => (
  <Button {...props} data={{ text: 'Click me', variant: 'primary', size: 'md' }} />
);

Styling

Components use CSS Modules internally and consume design tokens from @tramo-digital/styles. You can customize appearance in two ways:

Override tokens — set CSS custom properties on a parent element.
Pass className — components accept a className prop for additional styling.

<Button
  className="my-custom-button"
  data={{ text: 'Click me', variant: 'primary', size: 'lg' }}
/>

Theming with `Frame`

Wrap your app (or a section) in Frame to switch between light and dark modes. Frame sets the appropriate data-* attributes that drive the token cascade.

import { Frame } from '@tramo-digital/react-ui';

<Frame data={{ as: 'div' }} colorPalette="dark" colorSource="palette">
  {/* All children render with dark-mode tokens */}
</Frame>

Module exports

| Export path | Description | | ------------------------------------ | ------------------------------------------ | | @tramo-digital/react-ui | All components and hooks | | @tramo-digital/react-ui/style.css | Compiled component CSS bundle | | @tramo-digital/styles/css/min.css | Design tokens (from companion package) |

Development workflow

Edit source scaffolds in libs/core/src/scaffolds/ui/
Run pnpm transformation to regenerate this library
Run pnpm nx build @tramo-digital/react-ui to compile
Test in the React dev app with pnpm nx run @tramo-digital/react-app:dev
View stories with pnpm nx run @tramo-digital/react-ui:storybook

Build and test

# Build the library
pnpm nx build @tramo-digital/react-ui

# Lint
pnpm nx lint @tramo-digital/react-ui

# Storybook
pnpm nx run @tramo-digital/react-ui:storybook

The build produces ESM, CJS, and TypeScript declaration outputs via Vite with tree-shakable, module-preserving rollup.

Transformation pipeline

This library is generated by the AI-powered transformation engine in tools/pipeline. Each scaffold in libs/core is analyzed, optimized for React patterns (hooks, JSX, event handling), and output with TypeScript definitions and CSS Modules.

For details, see transformation-executor.md.

Related packages

@tramo-digital/core — source scaffolds (edit here)
@tramo-digital/styles — design tokens and CSS
@tramo-digital/types — shared TypeScript definitions
@tramo-digital/icons — SVG icon library
@tramo-digital/store — shared state management
@tramo-digital/vue-ui — Vue component library
@tramo-digital/vanilla-ui — Vanilla JS components

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@tramo-digital/react-ui

Installation

Peer dependencies

Required companion packages

CSS setup

Where to place the imports

Quick start

Available components

Primitives

Patterns

Compositions

Layout

Hooks

TypeScript support

Styling

Theming with Frame

Module exports

Development workflow

Build and test

Transformation pipeline

Related packages

Theming with `Frame`