Skip to content

Feature: CWA Admin UI Component Kit #236

Description

@silverbackdan

Summary

Build a self-contained, polished component kit for the admin UI — covering modal inputs, selects, buttons, tabs, info fields, and standalone admin page layouts. Structured similarly to Nuxt UI (slot-based composition, headless-first primitives, base/variant/size layers) but implemented entirely within this module using cwa: prefixed Tailwind utilities. No third-party design system dependency.

Why not Nuxt UI

Adding Nuxt UI as a module dependency would impose it as a transitive dep on every consuming app. More critically, Nuxt UI injects its own theme tokens and utility classes globally — a consuming app's Nuxt UI configuration (colours, fonts, spacing) would bleed into the admin UI styles. The cwa: prefix isolation only protects Tailwind utilities; it does not protect against a shared Nuxt UI runtime injecting conflicting CSS variables.

Nuxt UI's source is a good structural reference for how to organise the kit (slot composition, headless primitives, variant layers) — but everything is implemented natively.

Surface areas

  • Modal UI — consolidate existing rough components in src/runtime/templates/components/core/admin/form/ into a coherent kit: inputs, selects, textareas, radio tab groups, checkboxes, buttons, info fields, section labels
  • Standalone admin pages (src/layer/pages/_cwa/) — list views, data tables, form layouts, page-level navigation
  • Manager bar — tab bars, stack breadcrumbs, focus overlays; themeable style variants (current dark-panel aesthetic as one option, not the only one)
  • Base primitives — tabs (headless, composable into modal tabs, manager tabs, radio tabs), dropdowns, badges, tooltips

Scope

Admin-only. Public-facing CWA components (layouts, page templates, user components) are owned by consuming apps and intentionally unstyled by this module.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions