UI Development

Activation Conditions

• Building/creating UI components or pages
• Keywords: "design system", "ui", "frontend", "registry", "component"
• Modifying existing registry components

Quick Reference

use-ui-registry.md

style-no-margin-on-registry.md

style-use-variants.md

icon-system.md

Workflow

1. Fetch Documentation

FIRST: Use MCP tool mcp__redpanda-ui__search-docs or mcp__redpanda-ui__get_component

2. Check Existing Components

ls src/components/redpanda-ui/

Critical Rules

ALWAYS

• Use Registry components from

  src/components/redpanda-ui/

• Call

  mcp__redpanda-ui__get_component

  as first action before writing UI code
• Install components via CLI

NEVER

• Use

  @redpanda-data/ui

  (deprecated) - see no-legacy
• Copy/paste registry source (install via CLI)
• Install external UI libraries without user request
• Use inline

  style

  prop on registry components
• Add margin

  className

  directly to registry components

WHEN MODIFYING REGISTRY COMPONENTS

src/components/redpanda-ui/

1. Document the change in a comment with

   // UPSTREAM: <reason>

2. Keep changes minimal and backwards-compatible
3. Track for eventual contribution to upstream registry

Rules

rules/