CMS Panel
An interactive admin panel component for simulating and previewing CMS field configurations. Useful for testing how content editors interact with components.
Loading...
Installation
pnpm add @corew500/uiUsage
import { CMSPanel, CMSPanelField } from "@corew500/ui/cms-panel"
import { Input } from "@corew500/ui/input"
<CMSPanel locale="en" title="Component Fields">
<CMSPanelField label="Label">
<Input value={label} onChange={(e) => setLabel(e.target.value)} />
</CMSPanelField>
</CMSPanel>With Description
<CMSPanel
locale="en"
title="Button Fields"
description="Configure button appearance for the CMS."
>
<CMSPanelField label="Label">
<Input value={label} onChange={(e) => setLabel(e.target.value)} />
</CMSPanelField>
</CMSPanel>API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| locale | string | — | The current locale code to display (e.g., 'en', 'fr') |
| title | string | CMS Fields | Custom title for the panel header (defaults to "CMS Fields") |
| description | string | — | Footer description text explaining the demo |
| size | enum | — | — |
Accessibility
Keyboard Navigation
- All form controls maintain proper tab order
Additional
- - Panel is a semantic grouping container
- Field labels are associated with their inputs
Localization
Translatable Content
- - Title and description props should contain pre-translated text
Additional
- Locale badge displays the current content language code
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label* | string | — | Field label |
| hint | string | — | Optional field description |