CRE8 A2UI React — Agent-to-UI Schema

React component library for the CRE8 design system. 72 components organized by category.

System Overview

library: "@tmorrow/cre8-react"
version: "1.0.0"
framework: React
componentCount: 72
naming: PascalCase (Cre8Button, Cre8Card, etc.)

Component Categories

Quick Patterns

Page Layout

<Cre8Layout>
  <Cre8Header>
    <Cre8GlobalNav>
      <Cre8GlobalNavItem href="/">Home</Cre8GlobalNavItem>
    </Cre8GlobalNav>
  </Cre8Header>
  <main>
    <Cre8LayoutContainer>
      {/* Page content */}
    </Cre8LayoutContainer>
  </main>
  <Cre8Footer />
</Cre8Layout>

Login Form

<Cre8Card>
  <Cre8Heading type="h2">Sign In</Cre8Heading>
  <Cre8Field label="Email" type="email" />
  <Cre8Field label="Password" type="password" />
  <Cre8Button text="Sign In" variant="primary" fullWidth />
</Cre8Card>

Data Table

<Cre8Table>
  <Cre8TableHeader>
    <Cre8TableRow>
      <Cre8TableHeaderCell>Name</Cre8TableHeaderCell>
      <Cre8TableHeaderCell>Status</Cre8TableHeaderCell>
    </Cre8TableRow>
  </Cre8TableHeader>
  <Cre8TableBody>
    <Cre8TableRow>
      <Cre8TableCell>Item 1</Cre8TableCell>
      <Cre8TableCell><Cre8Badge text="Active" /></Cre8TableCell>
    </Cre8TableRow>
  </Cre8TableBody>
</Cre8Table>

Tabbed Content

<Cre8Tabs>
  <Cre8Tab label="Tab 1" selected />
  <Cre8Tab label="Tab 2" />
  <Cre8TabPanel>Content for Tab 1</Cre8TabPanel>
  <Cre8TabPanel>Content for Tab 2</Cre8TabPanel>
</Cre8Tabs>

Reference Files

Load component details as needed:

• •references/actions.md — Cre8Button, Cre8DangerButton
• •references/forms.md — Field, Select, Checkbox, Radio, DatePicker
• •references/layout.md — Layout, Card, Grid, Section, Hero, Band
• •references/navigation.md — Header, Footer, Nav components, Tabs, Breadcrumbs
• •references/disclosure.md — Accordion, Modal, Dropdown, Popover, Tooltip
• •references/feedback.md — Alert, Badge, LoadingSpinner, Progress
• •references/data.md — Table, List, LinkList, Tag, Chart

AI Implementation Rules

Buttons

• •Use variant="primary" for main CTA (one per view)
• •Use variant="secondary" for secondary actions
• •Use Cre8DangerButton only for destructive actions
• •Keep text short: max 3 words, Title Case

Forms

• •Always provide label for form fields
• •Use appropriate type for Cre8Field (email, password, tel, etc.)
• •Group related checkboxes in Cre8CheckboxField
• •Group radio buttons in Cre8RadioField with shared name

Layout

• •Wrap pages in Cre8Layout
• •Use Cre8LayoutContainer for max-width content
• •Use Cre8Card to group related content
• •Use Cre8Grid + Cre8GridItem for grid layouts

Navigation

• •Use Cre8Header with Cre8GlobalNav for site header
• •Use Cre8PrimaryNav for main navigation
• •Use Cre8Breadcrumbs for hierarchical navigation
• •Use Cre8Tabs for content switching

Feedback

• •Use status prop: "info", "success", "warning", "error"
• •Use Cre8Alert for page-level messages
• •Use Cre8InlineAlert for contextual messages
• •Use Cre8Badge for status indicators