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

| 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/:

• Document the change in a comment with // UPSTREAM: <reason>

• Keep changes minimal and backwards-compatible

• Track for eventual contribution to upstream registry

Rules

See rules/ directory for detailed guidance.