UI Development

Build user interfaces with the Redpanda UI Registry.

Activation Conditions

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

Quick Reference

Action	Rule
Use components	use-ui-registry.md
Add spacing	style-no-margin-on-registry.md
Customize look	style-use-variants.md
Use icons	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

If editing files in 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

See rules/ directory for detailed guidance.