Cre8 A2ui React

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

Converted and distributed by TomeVault — claim your Tome and manage your conversions.