Build with Corva UI

@corva/ui is the shared application library for Corva frontend apps. The current scaffolder installs it and configures the standard app shell, so a new project can import supported resources immediately.

Do not add a second @corva/ui installation after generating the app.

Start with the standard app shell

import { AppContainer, AppHeader } from '@corva/ui/componentsV2';
import { useAppCommons } from '@corva/ui/effects';

export default function App() {
  const { appKey } = useAppCommons();

  return (
    <AppContainer header={<AppHeader />} testId={appKey}>
      <main>Your app content</main>
    </AppContainer>
  );
}

• AppContainer fills the available app space and provides the containment expected by responsive and fullscreen components.
• AppHeader reads app, asset, and settings context. New apps enable Header V3 through manifest.json.
• useAppCommons exposes the public app context to the rest of your component tree.

Public package areas

Import	Use for
@corva/ui/componentsV2	Current components for app shells, controls, feedback, layout, and overlays
@corva/ui/effects	Supported hooks such as useAppCommons and completion selection helpers
@corva/ui/clients	Authenticated Platform API, Data API, and real-time clients
@corva/ui/styles/common	SCSS colors, spacing, transitions, and shared tokens
@corva/ui/testing	AppTestWrapper and app-context testing support
@corva/ui/icons	Corva and Icon Park icon exports

Use @corva/ui/components only when maintaining legacy code that has not migrated to componentsV2.

Choose a component

Before creating custom UI:

1. Search the Corva UI Storybook.
2. Check the component's props and examples.
3. Use its loading, empty, disabled, and error behavior where provided.
4. Add custom styling around the component rather than copying its implementation.

This keeps drilling and completion apps visually consistent with Corva and reduces accessibility and fullscreen-frame issues.

Use shared styles

SCSS-enabled apps can import Corva UI tokens:

@use '@corva/ui/styles/common' as common;

.panel {
  padding: common.spacing(2);
  color: common.$palette_t1;
  background: common.$palette_b2;
  transition: common.transition(background, color);
}

Prefer semantic Corva UI variables over hard-coded colors. They are designed to follow the active Corva theme.

Test components with app context

Components that use useAppCommons, AppHeader, or other app resources need the test provider:

import { render } from '@testing-library/react';
import { AppTestWrapper } from '@corva/ui/testing';

render(
  <AppTestWrapper app={mockApp} well={mockWell} onSettingChange={jest.fn()}>
    <App />
  </AppTestWrapper>
);

Start with the mocks generated by @corva/create-app, then model the drilling or completion assets the test actually uses.

AI-assisted lookup

Newly generated projects include Corva UI MCP configuration for Cursor, Codex, and Claude Code. The installed server can search components and return documentation for components, hooks, clients, constants, theme tokens, icons, and testing utilities.

For an older project, run this from the app root:

npx -p @corva/ui corva-ui-mcp-setup

The setup extends existing .mcp.json, .cursor/mcp.json, and .codex/config.toml files instead of replacing their other server entries.