RenewCMS/docs/design/components.md

Components

Inventory

Component	Nuxt UI base	Props	Emits	Slots	Used on
AuthShell	UPageCard, UColorModeSelect	title, description?	none	default, notice, footer	All public routes
DashboardShell	UDashboardGroup, UDashboardSidebar, UNavigationMenu, UDashboardPanel, UDashboardNavbar, UBreadcrumb	none (reads route.meta and the session store)	none	default, navbar-right	All verified routes
UserMenu	UDropdownMenu, UButton, UAvatar (a bottom sheet below md)	displayName?, username, email	logout	none	DashboardShell
UsersTable	UTable	rows: UserRow[], loading, canManage: boolean, busyIds: Set	cancel-invite, renew-invite	none	Users (md and up)
UserCardList	custom list	same as UsersTable	same as UsersTable	none	Users (below md)
RoleBadge	UBadge	role: 'owner'|'admin'	none	none	Users
SettingsPage	custom card	none (reads GET /v1/settings)	none	none	Settings
InviteStatusBadge	UBadge	status: 'accepted'|'pending'|'expired'	none	none	Users
InviteUserModal	UModal, UForm, UFormField, UInput	none	invited(invite)	none	Users
ProfileCard	custom card (border, padding, optional footer strip)	title, description	none	default, footer	Profile
PageHeader	UPageHeader	title, description?	none	actions, meta	Home, Articles, Integration
ArticleStatusBadge	UBadge	online: boolean, size?: 'sm'|'md', pending?: 'publish'|'unpublish'	none	none	Home, Articles, Editor
ArticleTable	UTabs, UInput, UTable, UDropdownMenu, UPagination	articles: Article[], loading, busyIds: Set	publish, unpublish, delete, copy-url	empty, toolbar-right	Articles (md and up)
ArticleCardList	ULink, UDropdownMenu (custom list)	same as ArticleTable	same as ArticleTable	empty	Articles (below md)
EmptyState	UEmpty	variant: 'no-articles'|'no-results'|'no-drafts'|'no-online', query?	action	none	Home, Articles
ConfirmDialog	UModal via useOverlay	title, description, confirmLabel, pendingLabel, tone: 'danger'|'neutral', action: () => Promise	close(confirmed)	none	Articles, Editor, Pending
NewArticleModal	UModal, UForm, UFormField, UInput, UTextarea	none	created(article)	none	Home, Articles, /article/new
ArticleEditor	UEditor, UEditorToolbar, UDropdownMenu (+ custom Indent extension)	modelValue: string, articleId: number, disabled?	update:modelValue, request-image	none	Editor
ImageUploader	UModal, UFileUpload, UProgress	articleId: number	uploaded(location), close	none	Editor
SaveStatus	custom (span + UButton)	state: 'clean'|'dirty'|'saving'|'saved'|'error'|'offline', savedAt?: Date	retry	none	Editor
PublishControl	UButton	online: boolean, dirty: boolean, pending?: string, disabled?	publish, unpublish	none	Editor
ArticleDetails	UCard (desktop) / USlideover (mobile)	article: Article	copy-url	none	Editor
CharacterCounter	custom	value: number, max: number, min?: number, warnAt?: number	none	none	NewArticleModal, Editor, Register, Accept invite
PasswordStrengthHint	custom (in UFormField #help)	rules: { label, met }[], showErrors: boolean	none	none	Register, Reset, Accept invite
ResultPanel	custom + UButton	tone: 'success'|'error'|'info', icon, title, description, actions: ButtonProps[]	none	default	Pending, Verify, Reset request, Reset, Accept invite, Register (403)
CodeBlock	custom (shiki) + UButton	code: string, lang: string, label?	none	none	Integration
EndpointCard	UCollapsible, UBadge, UTable, UTabs	method: 'GET'|'POST'|'PATCH'|'DELETE', path, description, access, keyAccess, body?, examples: { fetch, curl, response }, errors, sessionOnly?	none	none	Integration
SectionIndex	custom nav (desktop), USelectMenu "Jump to" (mobile)	sections: { id, label }[], active: string	jump	none	Integration
SessionOnlyGroup	UAlert-style note + list rows	routes: { method, path }[]	none	none	Integration
ApiKeysTable	UTable, UBadge	keys: ApiKey[], showCreatedBy: boolean	revoke	none	API keys
CreateApiKeyModal	UModal, UForm, UFormField, UInput	open: boolean	create	none	API keys
ApiKeyReveal	UModal, UAlert, UButton	key: string	done	none	API keys
ErrorView	custom + UButton	kind: 'not-found'|'error'	retry	none	Not found, error boundary
OfflineBanner	UBanner	none (reads useOnline)	none	none	DashboardShell
AppBoot	USkeleton inside DashboardShell	none	none	none	First load of any verified route

Composables behind these components: useSession (it also carries the display name), useUsers (the list and the invite action), useProfile (the display name draft and save), useApi, useArticles (the list cache plus actions shared by the table, cards and editor), useArticleDraft (dirty state, save, and the sessionStorage mirror), useImageUpload (XHR with progress) and useRetryAfter (429 countdown).

Product component specs

Extracted from source/RenewCMS Components Product.dc.html; open it for the drawings.

Components: product

These are the RenewCMS components, built from the primitives on the first page . Each one lists the Nuxt UI parts it's made from, its props, emits and slots, every state, and keyboard and responsive behavior. Components marked custom have no Nuxt UI equivalent.

AuthShell

One centered card for every public screen. The logo sits above the title, and the form or ResultPanel goes in the slot. Footer links, the language chip and the theme select sit outside the card, so the card itself stays about one task.

Log in Welcome back. Log in to manage your articles.

default slot

Forgot password? System

Built from Custom layout component AuthShell.vue : a UPageCard variant="outline" inside a centered main , with AppLogo , and UColorModeSelect size="sm" in the footer, next to the language chip (see LanguageSwitcher). Forms inside it use UForm rather than UAuthForm , because every screen needs states (such as 403, 429 and an inline login during verification) that UAuthForm doesn't expose.

Props, slots Props title: string , description?: string . Slots default , notice (an alert above the title, for session expired or password changed), footer (links). No emits.

A11y The title is the page's h1 , and document.title becomes "Log in · RenewCMS". On route change, focus moves to the h1 . The logo is alt="RenewCMS" and isn't a link, since there's nothing public to go back to.

Responsive 400 px card from sm up, with its top 12 vh from the top. Below sm , the card loses its border and padding drops to 20 px, filling the screen on --ui-bg , and fields and buttons use xl .

DashboardShell

The sidebar has seven destinations for owner and admin (Home, Articles, Media, Users, Activity, Integration, Settings; regular users get Home, Articles, Media, Activity), and the user menu sits at its foot. For owner and admin, Settings expands to a Media group with Variants and Cache (see "Sidebar entry (1l)" in image-variants); it is built with the children of UNavigationMenu, and the same group appears in the mobile drawer. The top bar carries the breadcrumbs and page title. Collapsing the sidebar leaves a 56 px icon rail. Below lg , the sidebar becomes a slideover.

RenewCMS

Home

Articles

Integration

marta Owner

System

Light

Dark

Log out

MA marta

Articles How we price a bathroom renovation

page body

MA

Articles

Mobile top bar. The menu button opens the sidebar as a left slideover.

Built from UDashboardGroup storage="local" › UDashboardSidebar collapsible :resizable="false" :default-size="16" :collapsed-size="4" with the #header (AppLogo), #default ( UNavigationMenu orientation="vertical" :collapsed ) and #footer (UserMenu) slots. Each page is a UDashboardPanel , with a UDashboardNavbar holding UDashboardSidebarCollapse and UBreadcrumb . On mobile, UDashboardSidebarToggle appears and the sidebar's built-in slideover takes over.

UserMenu UDropdownMenu :content="{ side: 'top', align: 'start' }" on a ghost UButton block with a UAvatar and the username. The groups are: the account label; System, Light and Dark as checkbox items; then Log out. There are no profile or password items, because the API doesn't support them. Superseded: see "UserMenu (changed)" under "Added with the Users and Profile screens", which restores the System, Light and Dark items.

Props, slots No props, because the shell reads the user from the session Pinia store. The navbar reads route.meta.title and route.meta.breadcrumb . Slots navbar-right (page actions on mobile) and default . It shows the offline banner when navigator.onLine is false.

A11y The first Tab stop is a "Skip to content" link. The sidebar is a nav labeled "Main", and the current page gets aria-current="page" . In the collapsed rail, items show tooltips and keep their aria-label . The collapse button carries aria-expanded . The mobile slideover traps focus and closes after navigating.

Bend The active nav item uses a sand fill with ink text instead of Nuxt UI's primary-tinted background and left indicator. The shell is set up for this in ui.config.ts .

PageHeader

Articles Everything you've written, online and in draft.

Connect your website New article

Articles Everything you've written, online and in draft.

New article

Built from UPageHeader :title :description , with actions in the #links slot. The ui override is { root: 'py-0 border-0', title: 'text-xl', description: 'text-sm text-muted mt-0.5' } , which brings Nuxt UI's marketing-size header down to dashboard density.

Props, slots title , description? , slot actions (the primary action goes last, so it sits on the right), slot meta (for example, a status badge next to the title in the editor).

Responsive Below md , the actions wrap under the text. The primary action goes full width at 44 px, and secondary actions move into the navbar's overflow menu.

ArticleStatusBadge

Online

Draft

Online

Draft

Publishing…

Unpublishing…

Built from UBadge . Online: color="neutral" variant="solid" icon="i-lucide-globe" . Draft: color="neutral" variant="outline" icon="i-lucide-pencil-line" . Status is shown by the fill, the icon and the word, never by color alone.

Props online: boolean , size?: 'sm' | 'md' (sm in lists, md in the editor header), pending?: 'publish' | 'unpublish' (shows the -ing label with a spinner while the request runs). No emits, because it isn't interactive.

ArticleTable

Search, filter tabs, a sortable table and row actions. Everything happens in the browser on the list it has already loaded. Below md , the table becomes a card list with the same data and actions.

All 6 Online 4 Drafts 2

Search by title

Title Status Created Updated

Online Draft

Built from UTabs + UInput type="search" + UTable (desktop), or a custom ArticleCardList of ULink rows (mobile), switched with useBreakpoints at md . Each row has a UDropdownMenu , and the row actions go through useArticleActions() , which shares one set of calls between the table, the list and the editor.

Props, emits Props articles: Article[] , loading: boolean , busyIds: Set . Emits publish(id) , unpublish(id) , delete(article) , copy-url(id) . Search, tab and sort state lives in the URL query ( ?q=&status=&sort= ). Slots #empty , #toolbar-right .

Behavior Search is case-insensitive and ignores accents, and it matches anywhere in the title. It updates on input, debounced 120 ms. Tab counts always reflect the full list. Dates within 7 days are relative ("2 hours ago"); older ones are absolute ("18 Aug 2026"), with the full timestamp in a title attribute. Clicking a row opens the editor, except clicks on the menu.

States Loading (5 skeleton rows), empty, no results, a filter tab with nothing in it, a row busy, an action failed (toast with Retry, row reverts), and a row vanished (a 404 on any action removes the row and shows an info toast). Row actions are never optimistic: the row updates when the 200 arrives.

A11y The table has a visually hidden caption, "Articles, sorted by last updated, newest first". Each row's menu button is named "Actions for How we price a bathroom renovation". After a search, a polite live region announces "3 articles".

EmptyState

No articles yet Write your first one. It stays a draft until you publish it. New article

No articles match "tiles" Check the spelling, or search for a shorter part of the title. Clear search

No drafts Everything you've written is online. New article

Nothing is online yet Publish a draft and it will appear on your website. Show drafts

Built from UEmpty :icon :title :description :actions variant="naked" , placed in the UTable #empty slot or on the page. The icon tile is overridden to rounded-none bg-elevated .

Props variant: 'no-articles' | 'no-results' | 'no-drafts' | 'no-online' , query?: string . Emits action . Each variant has fixed copy, and the search term is shown in quotes, cut to 40 characters.

A11y The title is an h2 . "No results" is announced through the table's live region. Clear search returns focus to the search field.

ConfirmDialog

Delete this article? "Winter checklist for timber windows" and its 3 images will be deleted. This can't be undone.

Cancel Delete article

Delete this article? "Winter checklist for timber windows" and its 3 images will be deleted. This can't be undone.

Couldn't delete the article, so it's still there. Try again in a moment.

Cancel Deleting…

Left: default. Right: after a failed attempt (the error appears inline), with the retry running (loading).

Built from UModal opened through useOverlay().create(ConfirmDialog) . open() returns a promise that resolves once the action succeeds or the dialog is cancelled. The action runs inside the dialog, so errors show there instead of in a toast behind the overlay.

Props, emits title , description , confirmLabel , pendingLabel , tone: 'danger' | 'neutral' , action: () => Promise . Emits close(confirmed: boolean) . The delete description comes from the title plus images.length , and reads "and its image" for 1 and just the title for 0.

Other uses Cancel registration: "Cancel your registration?" / "Your account will be deleted. You can register again with the same or a different email." / "Cancel registration" / "Keep my account". Leaving with unsaved changes uses the neutral tone.

A11y role="alertdialog" . Focus starts on Cancel, and Enter doesn't confirm by default. While the action runs, the dialog can't be dismissed, both buttons are disabled, and aria-busy is set. On success, focus goes to the next row, or the page heading if there isn't one.

ArticleEditor, SaveStatus, PublishControl, CharacterCounter

The editor is made of four components that work together. The header holds the read-only title, status, SaveStatus, Save and PublishControl. A sticky toolbar sits above the writing surface, which uses the content type scale. The counter sits at the foot.

How we price a bathroom renovation Draft

Unsaved changes

Save

Save and publish

Every bathroom is different, but the way we price them isn't. We start with a visit, measure everything, and write down what stays .

What goes into the price

Stripping out and making good

Plumbing moves, if any

Details

Created 12 Mar 2026, 09:14 Updated Today, 11:02 ID 12 Images 3

Public API URL /v1/article/12 Returns 404 until the article is online.

4 318 / 10 000

Unsaved changes dirty, Save enabled

Saving… saving, Save disabled

Saved at 11:02 saved, Save disabled

Save failed Retry error, changes kept

Publish draft, saved

Unpublish online

9 240 / 10 000 body ≥ 90%

10 214 / 10 000 214 characters over. Shorten the text or remove an image. Formatting counts too. over limit, Save disabled

ArticleEditor UEditor v-model content-type="html" :extensions + UEditorToolbar :editor :items layout="fixed" . TipTap v3 StarterKit already includes Underline and Link. TextAlign handles alignment and Image handles images. Formatting is a UDropdownMenu with Paragraph and Headings 1–4 ( h1 is kept because the public site controls how the title appears). Indent and outdent call sinkListItem / liftListItem in lists. For paragraphs, a small custom Indent extension writes data-indent="1–4" , because TipTap has no paragraph indent. Clear formatting runs unsetAllMarks().clearNodes() . The editor surface gets class="article-content" .

Props, emits modelValue: string (HTML), articleId: number , disabled? . Emits update:modelValue , request-image . Exposes insertImage(src, alt) and focus() . The toolbar reflects the active state (bold is on at the cursor) using aria-pressed .

SaveStatus A custom inline span aria-live="polite" , driven by useArticleDraft() : 'clean' | 'dirty' | 'saving' | 'saved' | 'error' . Saved shows the time and switches to "Saved 5 min ago" after an hour. The error state's Retry is a UButton size="xs" variant="outline" . Ctrl/⌘ S saves. Leaving with unsaved changes triggers onBeforeRouteLeave (ConfirmDialog, neutral tone) and beforeunload . There is no autosave , so the owner controls exactly what is sent. The draft is mirrored to sessionStorage so it survives a session expiry.

PublishControl A single UButton . Draft → primary "Publish"; draft with unsaved changes → "Save and publish" (PATCH body, then PATCH publish; if the save fails, it doesn't publish); online → outline "Unpublish". Unpublishing doesn't save pending changes, so the draft edits stay pending. Toasts: "Article published", with the description "Title" is now online. ; "Article unpublished", It's a draft again and hidden from your website.

CharacterCounter A custom component in mono type. Props value: number , max: number , min?: number , warnAt?: number (default 0.9). The title uses [...str].length , so accents and emoji count as one, matching Go's validator, which counts runes. The body uses the HTML string length, which is what the API receives. The warning and error states add an icon and text, not just color. A visually hidden live region announces the change only when a threshold is crossed, not on every keystroke.

Responsive Below lg , the details panel becomes a right slideover, opened with i-lucide-panel-right . Below md , the header wraps: back, title and badge on the first row, then SaveStatus and the counter. Save and Publish move to a sticky bottom bar (44 px). The toolbar scrolls horizontally with fade edges and keeps undo, redo and the image button pinned at the start.

ImageUploader

Opens from the editor's image button in a small modal. Files are checked in the browser before anything is sent. A JPEG, PNG or WEBP then goes through a crop-and-resize step before it uploads; an SVG skips straight to uploading. After a successful upload the image goes in at the cursor and the modal closes.

Drop an image here Choose file PNG, JPEG, WEBP, SVG · max 10 MB

idle

Drop to upload

dragging over

Crop and resize north-wall.jpg · 3.9 MB

crop, default: whole image selected, width "1600 px"

Crop and resize north-wall.jpg · 3.9 MB

crop, ratio locked to 16:9

Crop and resize north-wall.jpg · 3.9 MB

crop, crop narrower than the chosen width

north-wall.jpg 43%

Uploading 180 of 420 KB

uploading

Image added

success, closes after 600 ms

"plan.pdf" can't be used Use a PNG, JPEG, WEBP or SVG image, up to 10 MB. Choose another file

rejected: type or size

Upload failed The server didn't accept the file. Your article hasn't changed. Try again

server error

Built from UModal title="Add an image" › UFileUpload accept="image/png,image/jpeg,image/webp,image/svg+xml" :multiple="false" layout="list" + UProgress size="xs" . Uploads go through XMLHttpRequest , because fetch has no upload progress, as FormData with the field name file . The 201 location is inserted with insertImage(location, '') .

Crop and resize A JPEG, PNG or WEBP opens on a 640px-wide modal (md.crop) between the file picker and the upload, replacing the "Add an image" title with "Crop and resize" and the filename/size as the description. The stage shows the image with the crop frame starting as the whole image: a rule-of-thirds grid (lines at 33.3 %/66.6 %), four 12×12 px corner handles, and a pixel-size label (mono, bottom-left, dark pill) that tracks the frame's current size. The frame is tabindex="0", aria-label="Crop area. Arrow keys move it, Shift and arrow keys resize it."; dragging moves it, dragging a handle resizes it, arrow keys nudge it by 1 px and Shift+arrow keys resize it.

Aspect ratio is a radiogroup of five pills — Original, Free, 16:9, 4:3, 1:1 — plus Rotate and Reset actions above it. Width is a second radiogroup — Original, 1600 px (default), 1200 px, 800 px. A mono line below reads "Uploads as {width} × {height} px · about {size}", where the estimated size is shown in KB under 1 MB and in MB above it. When the chosen width is larger than the crop's own width, the output stays at the crop's size (never upscaled) and an info row explains why: "The crop is {crop width} px wide, so it's uploaded at that size. Enlarging it would make it blurry." The footer becomes "Choose another file" (back to the file picker, data-act="upload-pick" from idle) and "Upload image" (starts the upload with the cropped, resized file). SVGs never see this step: they upload as soon as they're chosen. The "in progress" state afterwards reports the resized file's size, e.g. "Uploading 180 of 420 KB".

Validation Before uploading, the uploader checks both the MIME type and the file extension, and that size ≤ 10 × 1024 × 1024 . The size error names the file size: "north-wall.tif is 14.2 MB. Images can be up to 10 MB." A server 400 shows the same message as a client-side rejection.

Props, emits articleId: number . Emits uploaded(location) , close . A 401 hands off to the global session flow. A 404 means the article was deleted, which the editor handles.

A11y, touch The drop zone is a labeled button, so Enter opens the file picker. Progress is exposed as role="progressbar" with aria-valuenow , and the result is announced. On touch screens the drop text is hidden and "Choose file" becomes the main action. Dropping a file directly onto the editor surface also opens the uploader with that file.

CodeBlock and EndpointCard

GET /v1/article/{id}

Returns one article. Drafts return 404 to anonymous callers, the same as an id that doesn't exist.

fetch curl Response

JavaScript Copied

const res = await fetch( 'https://cms.renew.example/v1/article/12' )

if (res.status === 404 ) return notFound()

const article = await res.json()

CodeBlock This is a custom component, because Nuxt UI's prose code blocks rely on Nuxt Content and don't work in a plain Vue app. Highlighting is done ahead of time with shiki (a dual github-light / github-dark theme remapped to the semantic colors: keywords info, strings success, numbers warning, comments muted). The header shows the language label and a ghost copy UButton , which switches to "Copied" for 2 s through useClipboard . Props code , lang , label? . Long lines scroll horizontally and never wrap.

EndpointCard UCard › a method UBadge (GET is solid ink) + the path in mono + a description, with UTabs (fetch, curl, Response) showing a CodeBlock each. Props method , path , description , examples: { fetch, curl, response } . Snippets use the current location.origin .

A11y The copy button is named "Copy JavaScript example", and its result is announced. Code is a focusable pre ( tabindex="0" ) so keyboard users can scroll it. Syntax colors pass 4.5:1 on --ui-bg-elevated in both themes.

PasswordStrengthHint

At least 8 characters not met yet

At least 8 characters met

At least 8 characters not met on submit

Passwords match reset screen only

Built from A custom ul in the password UFormField 's #help slot. Props rules: { label: string, met: boolean }[] , showErrors: boolean . There is no meter or score, because the API only requires 8 characters.

A11y The list is the field's aria-describedby . Each item has hidden text reading "met" or "not met". A change is announced once, when the rule becomes met.

ResultPanel

Check your email If an account exists for that email, a password reset link has been sent. The link expires in 1 hour.

Back to log in

This link has expired Reset links work once, for 1 hour. Request a new one and use it within the hour.

Request a new link

Too many attempts For your security, wait a moment before trying again. You can try again in 0:42 .

Try again in 0:42 API pending

Built from A custom component that fills AuthShell's slot: an icon tile, h1 title, description and UButton block size="lg" actions. Props tone: 'success' | 'error' | 'info' , icon , title , description , actions: ButtonProps[] . Slot default for extras such as the inline login on verify.

A11y When the panel replaces a form, focus moves to its title and the panel is role="status" , or role="alert" for errors. The countdown updates every second visually but is announced only at the start and when it reaches zero.

Error pages and offline banner

You're offline. You can keep writing, but saving and publishing will wait until you're back online.

404 Page not found The link may be mistyped, or the page may have moved. Go to Home All articles

Error Something went wrong This page couldn't load. Your saved work is safe. Try again, and if it keeps happening, restart the RenewCMS server. Try again Go to Home

Built from UError isn't used because it's built for Nuxt's error.vue . Instead there's a custom ErrorView (props kind: 'not-found' | 'error' ), rendered inside UDashboardPanel when the user is logged in and inside AuthShell otherwise. The offline banner is a UBanner color="neutral" at --z-banner , shown and hidden with useOnline() . Once the connection returns it switches to "You're back online" for 3 s.

A11y The error title is the page h1 and gets focus on render. The banner is role="status" , and it can't be dismissed while offline. The offline state blocks Save and Publish and says why in their tooltip.

Added with the Users and Profile screens

The Product components board was not regenerated for these. They are written from source/RenewCMS Screens Back-office.dc.html, source/AppFrame.dc.html and the Prototype. Their exact values come from AppFrame.

UserMenu (changed)

The chip at the foot of the sidebar no longer logs out on click. It opens the account menu, which lists Profile, the theme choice, the language choice and Log out.

• Chip: 40 px high, an initials avatar (26 px, sand #d4c5b0 with ink text), the name, and a chevrons-up-down icon. aria-haspopup="menu", aria-expanded, title "Account". While the menu is open, or while /profile is the current page, it takes --rc-sand with #111111 text.
• Name: the display name when there is one, otherwise the username. Initials come from the first letters of the first two words of the display name, uppercased. Without a display name they come from the username.
• Desktop menu: a 224 px popover anchored above the chip on its left edge, with --rc-shadow-pop. Header: the name in semibold, the email below it in muted 12 px, a bottom border. Items are 32 px: Profile (circle-user), a separator, a "Theme" section label, System, Light and Dark (14 px text, a check icon at the right edge on the current choice), a separator, a "Language" section label, English and Français (same row as the theme items, a check icon on the current one), a separator, Log out (log-out). Section labels are 11 px, weight 500, uppercase, letter-spacing .04em, --ui-text-muted, padded 6px 8px 2px. The current page's item is highlighted with --ui-bg-elevated. The theme items are radio-style: choosing one applies at once and keeps the menu open. Nuxt UI: type: 'checkbox' items bound to useColorMode().preference.
• Mobile: the account row in the navigation drawer opens a bottom sheet over an --rc-overlay scrim, with a grab handle. Header: 36 px avatar, name in 15 px semibold, email in muted text. Items are 48 px at 15 px text; the theme and language items keep the same order, section labels (padded 8px 16px 2px) and separators.
• Language items: a menuitemradio group named by the "Language" label. Each item is labelled with the language's own name (English, Français) and carries lang="en" / lang="fr". Choosing one applies the language at once and keeps the menu open, like the theme items. See LanguageSwitcher.
• Keyboard: Escape or a click outside closes it. Arrow keys move between items.
• The board now draws the theme items, so the chip, menu and sheet need no visual exception. The board highlights Profile even on Home; the app highlights it only on /profile.

DashboardShell (changed)

The navigation gains Users (users icon) between Articles and Integration, in the sidebar and in the mobile drawer. Breadcrumbs for the new pages are "Users" and "Profile". It later gains Settings (settings icon) after Integration, with the breadcrumb "Settings". Activity (history icon) sits between Users and Integration; see screens/activity.md, "Sidebar".

UsersTable, UserCardList

Superseded by "UsersTable, UserCardList (changed)" below.

Skeleton rows appear after 150 ms of loading.

InviteStatusBadge

A 22 px outline-less badge with a 12 px icon and the word, so status is never shown by color alone.

Status	Icon	Fill and text
Accepted	circle-check	--rc-success-soft, --ui-success
Pending	mail	--rc-warning-soft, --ui-warning
Expired	clock-alert	transparent, --ui-text-muted, border --ui-border-accented

InviteUserModal

A UModal with one field, following the NewArticleModal pattern: title "Invite a user", the text "We'll email them a link to choose a username and password. The link expires after 3 days.", an Email field (placeholder "name@example.com", focused on open), Cancel and "Send invite". While sending, the field is disabled, the button reads "Sending…" and the dialog can't be dismissed. A field error shows under the input, a request failure shows an alert above the buttons, and the address always stays in the field. On success it closes and emits the new invite.

ProfileCard

A bordered card with 20 px padding (16 px on mobile), a semibold 14 px title, a muted description, and its content. An optional footer strip sits below a top border on --ui-bg-muted, with the status text on the left and the action on the right. The Display name card uses the footer; Account and Password do not.

The Display name field uses CharacterCounter with a maximum of 60, counted in Unicode characters, in the mono style on the right of the help row. Read-only fields (username, email, password) are disabled inputs on --ui-bg-elevated with a lock icon at the right.

Themed primitives

Extracted from source/RenewCMS Components Primitives.dc.html.

Components: themed primitives

These are Nuxt UI components with the Ledger config applied. Every specimen reads the real --ui-* variables, so the theme switch on the right changes the whole page. The product components are on a second page .

Button

There are five roles. A screen gets one primary button. Danger is used only for irreversible actions, and always inside a confirmation step.

New article primary

Cancel secondary

Preview ghost

Delete article danger

icon-only

Save sm 28

Save md 32

Save lg 40

Save xl 44, touch

Publish default

Publish hover

Publish focus-visible

Publish active

Publish disabled

Publishing… loading

Delete article danger hover

Cancel secondary hover

Preview ghost hover

Nuxt UI UButton . Primary color="primary" variant="solid" · secondary color="neutral" variant="outline" · ghost color="neutral" variant="ghost" · danger color="error" variant="solid" · icon-only square icon="i-lucide-ellipsis" :aria-label wrapped in UTooltip .

Loading :loading swaps the leading icon for i-lucide-loader-circle and disables the button. The label changes to the -ing form ("Publishing…") and the button width stays fixed, so the layout doesn't jump. loading-auto is used on async @click handlers.

Keyboard, ARIA Native , activated with Enter or Space. Icon-only buttons need an aria-label . Loading sets aria-busy="true" . Disabled buttons stay focusable only when a tooltip explains why they're disabled.

Responsive md on desktop, xl (44 px) below md . Primary page actions go full width in sticky footers on 390 px screens.

Bend Disabled opacity is 40% instead of Nuxt UI's 75%, because a 75% black button still looks clickable. Hover darkens the button one step instead of using Nuxt UI's /75 alpha, so the label keeps its contrast.

Input, password input, textarea

One outline style for every field. Focus adds a 2 px ink ring inside the edge. Errors turn the edge brick red and always come with a message, never color alone.

marta default, placeholder

marta hover

mar focus

ma error

owner@renew.example disabled / read-only

plaster leading icon, clear

•••••••••• password, hidden

limewash2026 password, shown

A short first paragraph. You can keep writing in the editor. textarea, autoresize 3–8 rows

Nuxt UI UInput variant="outline" color="primary" , :highlight bound to the field error so the edge turns red. The search field is icon="i-lucide-search" with a #trailing clear UButton . UTextarea autoresize :rows="3" :maxrows="8" .

Password UInput :type="shown ? 'text' : 'password'" with a #trailing ghost UButton . aria-label reads "Show password" or "Hide password", with aria-pressed and aria-controls . autocomplete is current-password on log in and new-password on register and reset. Showing the password never clears or moves focus.

States Default, hover (edge goes to muted), focus (2 px ink), filled, error, disabled, read-only (same look as disabled but selectable and focusable, used for the email on the reset screen). Fields are 16 px text below md .

Placeholder Placeholders use --ui-text-muted (5.7:1) and only show an example. The label always carries the meaning.

Form field

A label on top, then the control, then the help text or the error in the same spot. The right-hand hint slot holds the character counter. Every field in the product is required, so none are marked.

Username 5 / 20

marta 3 to 20 characters. You'll use it to log in.

Username 2 / 20

ma Use at least 3 characters.

Email marta@renew Enter a full email address, like name@example.com.

Nuxt UI UForm :schema :state @submit + UFormField name label help , with the counter in the #hint slot. Validation runs on blur and on submit, then on every input once a field has an error, so the error clears as soon as it's fixed. The schema mirrors the API rules exactly, so a validator 400 shouldn't reach the UI.

ARIA Nuxt UI links the label and aria-describedby (help or error) and sets aria-invalid . On a failed submit, focus moves to the first invalid field. Error text sits in the help slot, so there is no layout shift.

Checkbox, switch, select

All three are square. The Preview toggle in the editor is the only switch. The select sets sort order in the mobile article list. No screen needs a checkbox yet, but it's themed so it matches if one gets added.

Off

On

Focus

Disabled

Preview off

Preview on

Focus

Disabled

Newest updated first

Newest updated first

Oldest updated first

Nuxt UI UCheckbox , USwitch (slots base and thumb set to rounded-none ), USelect :items value-key="value" , whose content uses --shadow-popover .

Keyboard Space toggles a checkbox or switch. The select opens with Enter, Space or ↓, moves with the arrow keys and type-ahead, and closes with Esc, returning focus to the trigger. The switch uses role="switch" and aria-checked , and its visible label is its name.

Badge

Badges show status or a count. They never replace a button. Solid ink is for the one state that matters most in a list. Soft semantic badges are for system messages.

Online

Draft

12

success

info

warning

error

GET

Online · md

Nuxt UI UBadge . Solid ink color="neutral" variant="solid" · outline color="neutral" variant="outline" · count color="neutral" variant="soft" size="sm" · semantic variant="soft" . Sizes are sm (22 px, in tables) and md (26 px, in the editor header).

ARIA Badges are text, not live regions. When a status changes, the announcement comes from the toast.

Alert

Alerts are for messages that belong to a page and stay until the situation changes. Anything that confirms an action someone just took is a toast instead.

Your session expired Log in again to pick up where you left off.

Password changed Log in with your new password.

Almost at the length limit 9 240 of 10 000 characters used. Images and formatting count too.

Couldn't load your articles Check your connection and try again.

Try again

Nuxt UI UAlert variant="soft" :color :icon :title :description :actions . close only on alerts that are safe to dismiss (password changed, session expired). The error alert has no close button because its retry is the way out.

ARIA Info, success and warning use role="status" and error uses role="alert" . Alerts that are already there when the page loads aren't announced again. The description text uses --ui-text-toned rather than the semantic color, so long text stays readable.

Toast

Toasts confirm that an action finished or failed. Each one has a short title and, at most, one action.

Article published "Winter checklist for timber windows" is now online.

That article no longer exists It was deleted somewhere else, so we removed it from the list.

Couldn't unpublish The server didn't respond.

Retry

Placement Bottom right on desktop, 24 px from the edges. Bottom center at full width minus 16 px on mobile, above the sticky action bar.

Duration Success and info close after 5 s. Errors with retry stay until dismissed or retried. The timer pauses on hover and on focus.

Stack At most 3 visible, newest at the bottom. A fourth pushes out the oldest non-error toast. Repeating the same action replaces its toast instead of adding a new one.

Nuxt UI UApp :toaster="{ position: 'bottom-right', duration: 5000, max: 3 }" . Toasts are raised with useToast().add({ id, title, description, color, icon, actions, duration }) , where id is the action plus the article id so a repeat replaces the old toast. Errors use duration: 0 . The progress bar is off.

ARIA The Reka toast region announces politely, and errors assertively. F8 jumps to the region. Esc closes the focused toast.

Modal and slideover

Modals ask a question or hold a short form. Slideovers carry navigation and side panels on small screens. Both sit over a 40% ink overlay.

Leave without saving? You have changes to "How we price a bathroom renovation" that haven't been saved.

Discard changes Keep editing

Details

Created 12 Mar 2026, 09:14 Updated Today, 11:02 ID 12 Images 3

Nuxt UI UModal :title :description with the #footer slot for actions, width sm:max-w-md . Opened programmatically with useOverlay().create(ConfirmDialog) . USlideover side="right" for details, side="left" for mobile navigation (built into UDashboardSidebar ).

Button order The safe action is primary and sits on the right, where the eye lands. In destructive confirmations, the danger button is on the right and Cancel on the left (see ConfirmDialog). On mobile the buttons stack full width, with the primary on top.

Keyboard, ARIA Focus is trapped and starts on the least destructive button. Esc and the overlay close it unless it's :dismissible="false" , which is used while an action is running. Focus returns to the trigger. The title is the aria-labelledby and the description is the aria-describedby .

Responsive Below sm , modals sit 16 px from the screen edges and slideovers take the full width. Motion follows the foundations: 240 ms, and instant with reduced motion.

Dropdown menu and tooltip

The row-action menu is the main dropdown. Delete always comes last, below a separator, in brick red. Tooltips name icon-only buttons and show their keyboard shortcut.

Edit

Unpublish

Copy API URL

Delete…

Bold Ctrl B

Nuxt UI UDropdownMenu :items :content="{ align: 'end' }" , with items grouped in nested arrays so separators appear automatically. The Delete item is color: 'error' , and its label ends in "…" because it opens a confirmation. UTooltip :text :kbds="['ctrl', 'b']" :delay-duration="400" .

Keyboard The menu opens with Enter, Space or ↓. Arrow keys and type-ahead move through it, Home and End jump to the ends, and Esc closes it and returns focus. Tooltips appear on focus as well as hover and never hold information that isn't also in the aria-label .

Touch Tooltips don't show on touch, so every icon-only control on mobile also appears in a labeled menu or has a visible label.

Tabs

Tabs filter the article list. Each count comes from the full list, so it doesn't change while you search.

All 6

Online 4

Drafts 2

Focused

From left: selected, default, hover, focus-visible.

Nuxt UI UTabs variant="link" color="neutral" :content="false" :items v-model . The count goes in the #trailing slot as the mono sm count badge. The value syncs to ?status=online|draft so the filtered view can be linked.

Keyboard Roving tabindex: Tab enters the tab list on the selected tab, and ← and → move and activate. Each tab's accessible name includes its count, for example "Drafts, 2 articles".

Responsive Tabs stay in one row at 360 px, which is why the labels are short. Each tab is 44 px tall on touch.

Table and pagination

Rows are 44 px with hairline separators, and only the Updated column sorts. Pagination appears only when a filter shows more than 25 articles.

Title Status Updated

How we price a bathroom renovation default 2 hours ago

Choosing lime plaster for old stone walls hover Yesterday

Before and after: the Rue Verte kitchen focus-visible 3 days ago

Winter checklist for timber windows busy 5 days ago

26–50 of 142 1 2 3 … 6

Nuxt UI UTable :data :columns v-model:sorting v-model:global-filter v-model:pagination :loading with TanStack getPaginationRowModel , and @select for row click. UPagination :total :items-per-page="25" :sibling-count="1" show-edges , active item color="primary" variant="solid" .

States Default, hover ( bg-elevated ), focus-visible (2 px inset ring), busy (a row action is running: 50% opacity, a spinner in the status cell, aria-busy , actions disabled), loading (skeleton rows), empty (EmptyState in the #empty slot).

Keyboard, ARIA Each row's title is a real link to the editor, so Tab reaches it and Enter opens it. The rest of the row is a click target for the mouse only. The sort header is a button with aria-sort . Pagination is a nav labeled "Pages", and the current page has aria-current .

Skeleton, avatar, kbd, separator

MA marta

JV jan_vries

BO bob

Ctrl

S

Save

Skeleton USkeleton blocks shaped like the real layout: the same row heights, a badge-sized block and a date-sized block. The pulse runs at 1.6 s and stops with reduced motion. The container is aria-busy="true" and a visually hidden live region says "Loading articles". Skeletons appear only after 150 ms, so fast responses never flash.

Avatar UAvatar :alt="username" size="xs|sm" . The initials come from the username: split on anything that isn't a letter or digit, take the first letter of the first two parts, or the first two letters if there is only one part, then uppercase. Sand #d4c5b0 with ink text (11.2:1) in both themes. It's decorative ( aria-hidden ) because the username is always shown next to it.

Kbd UKbd variant="outline" , only inside tooltips and the editor's shortcut hints. The editor shortcuts are Ctrl/⌘ S to save, plus TipTap's defaults: B, I, U, Z and Shift Z.

Separator USeparator uses --ui-border by default and --ui-border-accented between groups in dense toolbars. It's decorative, with role="none" , except between menu groups.

Color mode

Three choices: System (the default), Light and Dark. The toggle at the top of this page is the component itself, so you can try it.

Nuxt UI In the user menu: a UDropdownMenu group of three type: 'checkbox' items bound to useColorMode().preference . On auth screens: UColorModeSelect in the footer. Nuxt UI's UColorModeButton isn't used because it only toggles between light and dark and hides the system option. colorMode: true in the plugin handles storage and applying the .dark class before first paint.

ARIA Menu items use menuitemradio , with aria-checked on the current choice. The segmented variant is a radiogroup named "Theme".

LanguageSwitcher

Two choices: English and Français. Each is always written in its own language, whatever the interface language. It appears in two places and never as a form select.

• Account menu (signed in): a "Language" section between the theme items and Log out. See UserMenu (changed).
• Auth footer (signed out): a chip beside the System theme chip, in the footer outside the card. The chip is 28 px high on desktop and 44 px on mobile, 8 px side padding, 1 px --ui-border-accented border, --ui-text-toned text, a 14 px lucide languages icon, then the current language's own name. aria-haspopup="menu", aria-expanded, aria-label "Language: English". While open it takes --ui-bg-elevated. The footer sits at the right with an 8 px gap between the two chips.
• Auth popover: opens above the chip (bottom 36 px, right-aligned, 168 px wide), --ui-bg, 1 px --ui-border, --rc-shadow-pop, 4 px padding, role="menu" named "Language". Rows are 32 px (44 px on mobile), 14 px text, menuitemradio with lang, a 16 px check icon at the right edge on the current one. Choosing a row applies the language and closes the popover; Escape or an outside click closes it without changing anything.
• The choice persists across reloads and applies to every screen at once.

Added with roles, invite actions and Settings

Written from source/RenewCMS Screens Back-office.dc.html and source/AppFrame.dc.html. The Product components board was not regenerated for these.

UsersTable, UserCardList (changed)

Columns Email, Display name, Role, Invite status, Created (sorted descending, with an arrow-down icon on the header) and an unlabeled actions column. Grid minmax(0,1.3fr) minmax(0,1fr) 84px 120px 110px 150px, 12 px gap, 36 px header on --ui-bg-elevated, 48 px rows with a top border. Below md the same rows become cards with a 68 px minimum height: the email line, the display name below it when set, then role badge, status badge and "Created {date}" on one line, then the row action as a 44 px button.

The email cell is medium weight and highlighted, with a mono "you" tag on the current user's row. The display name is highlighted, or a muted — when empty. The row of a just-sent or just-renewed invite has --ui-bg-elevated. Skeleton rows have one bar per column. The username is not shown.

RoleBadge

A 20 px badge in IBM Plex Mono 11 px medium, 7 px side padding, no icon.

Role	Fill	Text	Border
owner	--ui-primary	--ui-bg	--ui-primary
admin	transparent	--ui-text-toned	--ui-border-accented

Row action button (Users)

A 28 px outline button on desktop (12 px medium text, 13 px icon, 9 px side padding, --ui-border-accented border, --ui-bg fill, no wrapping), 44 px on mobile (14 px side padding, 14 px icon). Cancel invite: user-x, text --ui-error. Renew invite: refresh-cw, text --ui-text-highlighted. While busy: the label becomes "Renewing…", the icon loader-circle, opacity 50 %, disabled. Nuxt UI: UButton variant="outline" size="xs" with the classes above.

Cancel goes through ConfirmDialog with tone: 'danger': title "Cancel this invite?", the description names the address, the cancel button reads "Keep invite" and the confirm button "Cancel invite", pending label "Cancelling…", and a failure shows a notice inside the dialog.

SettingsPage

A page header (title "Settings", subtitle "Workspace information."), then one card holding a "Version" row. See screens/settings.md.

Added with Media

Exact values live in source/MediaFrame.dc.html. Copy and states are in media and media-picker.

Component	Nuxt UI base	Props	Emits	Used in
MediaToolbar	UTabs, UInput, USelectMenu, UButtonGroup	tab, q, sort, view, counts	update:tab, update:q, update:sort, update:view	Media
MediaGrid	custom (buttons in a grid)	items, selected: Set, loading	open(id), toggle(id)	Media
MediaTable, MediaCardList	UTable, custom list	same as MediaGrid	same as MediaGrid	Media (md and up, below md)
MediaBulkBar	custom, UButton	count	delete, clear	Media
MediaDetailPanel	USlideover	id	close, rename, delete, copy-url, review-duplicates	Media
MediaUploadPanel	UProgress, UButton	rows	use-existing(row), upload-anyway(row), retry(row), cancel, dismiss	Media
DuplicateGroups	custom cards	groups	merge(group, keepId)	Media
MediaThumb	custom	item, size	none	Media, picker
MediaBadge	UBadge	kind: 'unused'|'duplicate'|'used'|'online'|'draft', label	none	Media, picker
RenameDialog, MergeDialog, DeleteMediaDialog	ConfirmDialog, UForm	item(s)	done	Media
MediaPicker	UTabs inside ImageUploader	articleId	picked(item, alt)	Editor

ImageUploader (changed): it gains the Upload and Library tabs and the "Already in your library" card. The remove-image confirm becomes neutral and only detaches the image from the article.

Added with Updates

Exact values live in source/AppFrame.dc.html (the Settings and Home states). Copy and states are in settings and home.

Component	Nuxt UI base	Props	Emits	Used in
UpdatesCard	custom card, UProgress, UButton, UCollapsible	status: UpdateStatus, role	check, update, restart, copy-command	Settings
UpdateStatusBlock	custom (polite live region)	tone, icon, title, text, meta, pendingTag?, action? (in-block Restart, Ready only)	none	UpdatesCard
UpdateProgress	UProgress	label, text, value or indeterminate	none	UpdatesCard
ReleaseNotes	UCollapsible	version, date, items	none	UpdatesCard
ServerCommand	UButton, code block	line	copy	UpdatesCard (Not prepared)
RestartOverlay	custom full-page role="status"	title, text, startedAt, slow	reload	App shell
UpdateBanner	UAlert	state: 'available'|'ready'	go-to-settings, dismiss	Home (owner)
UpdatePill	UBadge	none	none	DashboardShell Settings item (dot on mobile)

Added with Media cleanup

PurgeDuplicatesDialog

Used by Settings ("Purge now") and Media, Duplicates tab ("Purge duplicates"). Built on UModal, sm:max-w-md, bottom sheet on mobile, cancel first, confirm is color="error".

• Props: open, preview (groups, copies, articles, list[], more), status (loading | ready | purging | nothing | error | partial | conflict).
• While purging: confirm shows loader-circle and reads "Purging…"; dismissible false, Cancel disabled.
• Group row: 40×30 thumbnail, filename, "Kept · used in N articles", right-aligned "N copies merged". Max 5 rows, then "and N more groups".
• Notices sit above the summary in a UAlert (soft): error for failure, warning for partial and conflict.
• Emits purged (with counts). The parent shows the toast.

MediaCleanupCard

Settings card. USwitch (square, rounded-none), UInputNumber with "days" suffix, read-only lines, divider, outline button. Saves on change and on blur or Enter; shows "Saving…" then "Saved" in the header. Read-only mode disables controls, hides the button and shows an info UAlert.

Media toolbar button

Secondary UButton icon merge, label "Purge duplicates", after the sort menu on desktop; full width in the stacked toolbar on mobile (44 px).

Added with Activity

Source: source/activity-spec.js (component inventory) and source/ActivityFrame.dc.html. All built on existing Nuxt UI v4 components and tokens; no new token.

Component	Nuxt UI base	Props	Emits	Slots	Used on
ActivityPage	custom page	none (reads the session role)	none	none	Activity
ActivitySummaryStrip	UCard (as button)	summary, loading, activeFilter	apply-filter	none	Activity (owner, admin)
ActivityFilterBar	UInput, USelectMenu, UButton, UBadge	filters, people, canFilterPeople	update:filters, clear	none	Activity
ActivityTable	UTable (day separator rows), UAvatar, UBadge, UPagination, USelectMenu	items, total, page, size, loading	open, update:page, update:size	empty	Activity (md and up)
ActivityCardList	UCard	same as ActivityTable	open	empty	Activity (below md)
ActivityDetailsPanel	USlideover (right on desktop, bottom on mobile), UCard, UButton	item, index, total, open	previous, next, close	none	Activity
ActivityDiff	custom list	changes	none	none	ActivityDetailsPanel
ActivityFeedCard	UCard, UAvatar, UButton	items, loading, error, own	retry	none	Home
RetentionCard	UCard, USelectMenu, UAlert, UButton	settings, canEdit	saved	none	Settings (owner)

• Sparkline: seven div bars inside the strip card, no chart library. The strip cards are real buttons with the card as their label.
• Day separators are full-width rows of the table. The "When" cell carries the exact time as its title.
• The sentence is composed from the action code and params with the i18n messages (English and French); the target name is user content and is not translated.
• Failed and security rows use --rc-error-soft / --ui-error and --rc-warning-soft / --ui-warning for emphasis, always paired with an icon or a word, never colour alone.

Added with Image variants

The full inventory with the Nuxt UI mapping is in image-variants. New components: Variants table (and its mobile card row), Variant row (image detail), Variant form, Split comparison slider (ImageCompare, a custom component on a native range input, since Nuxt UI has no match), Stat tile, Bar list, Top-N list, Type-to-confirm dialog, Variant select, Variants badge, Filter, Request reference card. Alerts, toasts, dialogs, empty states and skeletons are reused as they are. The only token not already in the system is --rc-on-sand.