DS
Premium Docs

Design System Showroom

Published-package documentation wired to the real DS runtime so the same routes reveal how tenant and engine reshape identical component contracts.
Rottay / modern
Published package
Primary
#0A0A0A
Rottay
Radius
14px
Surface shape
DensitynormalPlatform Flagship
NavigatorLibrary map
8 sections
212 routes
Foundations first, then primitives, patterns, structures, and surfaces. Keep this rail legible enough to scan without hunting.
Foundations4 documented routes
4
Tokens
Themes
Engines
Icons
109
97
Display
Inputs
Feedback
Layout
Navigation
Overlay
21
Headers
Workspace
Record
Dashboard
Feedback
36
Admin
Data
Experience
Forms
Operations
Workspace
3
Platform
Bit Hire
Evnto
1
Playground
2
Developers
Runtime fingerprintToken readout from the active provider chain.
Live DS
Runtime
Platform
Rottay
Rottay / ModernPlatform Flagship
Primary
#0A0A0ASecondary #6B6B6B
Radius
14pxxl 18px
Density
normalBorder-light cards
Accent
Badge
Compact runtime evidence across 3+ token signals.
Published DS package · Pattern Library · Rottay / modernShared route metadata for the active runtime, kept inline so the shell reads like a thin header band.
Palette
#0A0A0ARottay
Chrome
Modernrenderer posture
Radius
14pxsurface shape
Density
normalPlatform Flagship
Patterns
Workflow
Moderation Gallery

Moderation Gallery

Active profilePlatform Flagship
Runtime postureRottay / modern
Patterns reference for Moderation Gallery.
Runtime controls
TenantRottay
Patterns/Workflow/Moderation Gallery
Workflow
3 engines
Runtime-driven docs
ModerationGallery

Moderation Gallery

Content moderation gallery with approve/reject actions
Workflow patterns should accelerate decision making while keeping status and exceptions obvious.
How to read this page
Use the showroom switchers in the sidebar to change engine and tenant. The comparison grid below keeps the active tenant and swaps engines so we can inspect the pattern instead of page-local editorial chrome.
TierPatternReusable workflow or composition contract.
GroupWorkflowStart with queue clarity.
Best paired withCollectionHeaderUsually lands inside DecisionInboxSurface.
Live preview

Compare the same pattern across engines

Sidebar tenant drives this
Moderation Gallery
This comparison is the documentation surface. If the pattern only reads well inside local chrome, we should fix the pattern or its preview runtime before teams style around it.

Preview heuristics

3 items
Compare density, action placement, and state readability before aesthetic flavor.
Judge the pattern itself, not any showroom-local framing around it.
If the pattern only works with extra chrome, the pattern or preview runtime still needs work.

Structure pairing

3 items
CollectionHeader
SelectionPreviewRail
TableToolbar
Rottay
3 live engines
Same tenant, isolated engine
Consumption

Import and usage

Treat the pattern as a reusable task contract. Keep route-specific business rules outside and use these snippets as the fast-reading baseline.
Consumption contract

Usage notes

3 items
Import from the published package rather than building route-local wrappers first.
Pass data, config, and callbacks while keeping product semantics in the consuming app.
Escalate to a surface only once the whole screen contract is stable, not just the task module.

Surface fit

3 items
DecisionInboxSurface
OperationalSurface
KanbanSurface
API surface

Props

6 rows
Moderation Gallery propsProp contracts stay readable across dark-first and light-first tenants.
6 props
1 required
5 optional
Fast readStart with required props, then scan defaults before dropping to per-row details.
Contract postureThis reference stays intentionally concise so the primitive contract remains scannable.
Name
Type
Default
Required
Description
Required
Optional
Optional
Optional
Optional
Optional
Related patterns

Continue within Workflow

Browse all
Approval Inbox
3 engines
Inbox for pending approval requests
Approval Workflow
3 engines
Visual approval chain with status tracking
Operational Ledger
3 engines
Tabular ledger for operational transactions
Shift Matrix
3 engines
Staff scheduling matrix with drag assignment
Primitives97 documented routes
PatternsCurrent section
48
Data
Forms
Visualization
Communication
Workflow
Approval Inbox
Approval Workflow
Operational Ledger
Shift Matrix
Navigation
Misc
Structures21 documented routes
Surfaces36 documented routes
Verticals3 documented routes
Playground1 documented routes
Developers2 documented routes
roundedtop bar · solid dividers
EngineModern
Engine comparisonEngine comparisonThe active tenant stays real while the same component is rendered by every engine. The wrapper stays intentionally quiet so engine differences come from the DS itself.
ClassicAnt Design
Live provider
Workflow patternModerationGallery
Check queue clarity, decision support, and whether state changes are driven by the shared DS contract.
Media by ops-team
Pending
ops-teamApr 18
142 views
growth-teamApr 18
284 views
partnerApr 19
51 views
ModernDaisyUI
Live provider
Workflow pattern
ModerationGallery
Check queue clarity, decision support, and whether state changes are driven by the shared DS contract.
Media by ops-team
Pending
ops-teamApr 18
142 views
growth-teamApr 18
284 views
partnerApr 19
51 views
RusticVanilla CSS
Live provider
Workflow pattern
ModerationGallery
Check queue clarity, decision support, and whether state changes are driven by the shared DS contract.
Media by ops-team
Pending
ops-teamApr 18
142 views
growth-teamApr 18
284 views
partnerApr 19
51 views

What to evaluate

3 items
queue clarity
decision affordances
status transitions

Structure pairing

3 items
CollectionHeader
SelectionPreviewRail
TableToolbar

Surface fit

3 items
DecisionInboxSurface
OperationalSurface
KanbanSurface
ImportPublished package entrypoint, ready to copy.
tsx
1 line
Consumption
Runtime-aware snippet
ImportTSX
Quick copy
import { ModerationGallery } from '@rottay/design-system';
UsagePaste-ready example that shows the base contract first.
tsx
5 lines
Consumption
Runtime-aware snippet
UsageTSX
Quick copy
<ModerationGallery
  data={data}
  config={config}
  onAction={handleAction}
/>
items
WorkflowItem[]
none
Queue items, stages, or records involved in the workflow.
status
string
none
Current workflow state or runtime filter applied to the queue.
onDecision
(decision) => void
none
Decision callback for approve, reject, assign, or escalation actions.
disabled
boolean
false
Disables workflow actions while data or permissions are unresolved.
className
string
none
Additional class names for product-specific composition and layout hooks.
style
CSSProperties
none
Inline overrides for one-off layout or diagnostic preview adjustments.
items
Required
WorkflowItem[]none
Queue items, stages, or records involved in the workflow.
status
Optional
stringnone
Current workflow state or runtime filter applied to the queue.
onDecision
Optional
(decision) => voidnone
Decision callback for approve, reject, assign, or escalation actions.
disabled
Optional
booleanfalse
Disables workflow actions while data or permissions are unresolved.
className
Optional
stringnone
Additional class names for product-specific composition and layout hooks.
style
Optional
CSSPropertiesnone
Inline overrides for one-off layout or diagnostic preview adjustments.
Moderation Gallery
Media by growth-team
Approved
Media by partner
Rejected
Media by growth-team
Approved
Media by partner
Rejected
Media by growth-team
Approved
Media by partner
Rejected