Live CortexUI Surface

This block renders live CortexUI contract metadata in the docs DOM so AI View can inspect real machine-readable elements instead of only code examples.

AI View can now inspect a live status region, form fields, actions, and table entities on every docs page.

AI-addressable docs entities
Item	State
Search docs	Ready
Inspect metadata	Visible in AI View

Box

The base layout primitive. A polymorphic element that renders any HTML element.

Purpose

Box is the foundation of all layout in CortexUI. It provides:

A consistent styling interface
Polymorphic rendering via the as prop
The base for all other primitives

Usage

import { Box } from '@cortexui/primitives';

// Renders a <div> by default
<Box padding="16px">Content</Box>

// Renders a <section>
<Box as="section" padding="24px">
  <h2>Section title</h2>
</Box>

// Renders a <main>
<Box as="main">
  <p>Main content</p>
</Box>

Props

Prop	Type	Default	Description
as	`keyof JSX.IntrinsicElements`	`'div'`	HTML element to render
children	`ReactNode`	—	Content
...rest	any	—	All HTML attributes for the target element

ℹ

Note

Box intentionally has minimal styling opinions. It's a structural primitive, not a design component.

How Components Use It

// ActionButton uses Box for its wrapper
function ActionButton({ children }) {
  return (
    <Box as="button" data-ai-role="action" ...>
      {children}
    </Box>
  );
}