DS
Published-package documentation wired to the real DS runtime so the same routes reveal how tenant and engine reshape identical component contracts.
Rottay / modernPublished package
Premium Docs

Design System Showroom

Primary
#FFFFFF
Rottay
Radius
14px
Surface shape
DensitynormalPlatform Flagship
NavigatorLibrary map
8 sections212 routes
Foundations first, then primitives, patterns, structures, and surfaces. Keep this rail legible enough to scan without hunting.
Foundations4 documented routes
4
Tokens
Themes
109
49
24
36
3
1
2
Runtime fingerprintToken readout from the active provider chain.
Live DS
Runtime
PlatformRottay
Rottay / ModernPlatform Flagship
Primary
#FFFFFFSecondary #A0A0A5
Radius
Compact runtime evidence across 3+ token signals.
Published DS package · Component Layer · Rottay / modernShared route metadata for the active runtime, kept inline so the shell reads like a thin header band.
Palette
#FFFFFFRottay
Chrome
Modernrenderer posture
Radius
14pxsurface shape
Density
normalPlatform Flagship
Reference summaryExpandable/collapsible content panelLayout primitives should create consistent rhythm and adaptability before product-specific styling appears.
How to read this pageUse the showroom switchers in the sidebar to change engine and tenant, then judge this primitive in the live preview before styling around it locally.
At a glanceThe meta cards below are the quickest read on how this primitive behaves across the current runtime.
Tier
PrimitiveThe lowest reusable UI contract.
Category
Engines
Icons
PrimitivesCurrent section
93
Display
Inputs
Feedback
Layout
Patterns49 documented routes
Data
Forms
Visualization
Communication
Feedback
Workflow
Navigation
Commerce
Customization
Identity
Shell
Structures24 documented routes
Headers
Workspace
Shell
Record
Dashboard
Feedback
Surfaces36 documented routes
Admin
Data
Experience
Forms
Operations
Workspace
Verticals3 documented routes
Platform
Bit Hire
Evnto
Playground1 documented routes
Playground
Developers2 documented routes
Developers
14pxxl 18px
Density
normalBorder-light cards
Accent
Badge
roundedtop bar · solid dividers
PrimitivesLayoutCollapse

Collapse

Active profilePlatform Flagship
Runtime postureRottay / modern
Primitives reference for Collapse.
Runtime controls
TenantRottay
EngineModern
LayoutFoundational layout tools that make everything else look considered rather than improvised.
Best paired with
all tiersEscalate to patterns or surfaces when workflow logic starts dominating.
Use it when
assembling sections
creating page rhythm
defining responsive shells
Review checklist
spacing systems
alignment
responsive adaptation
Common pairings
all tiers
surface recipes
content-heavy pages
Live preview

Compare the same primitive across engines

Sidebar controls drive thisCollapse
This is the primary runtime verification surface for the component. Engine and tenant changes should land in the rendered DS primitive itself, not in showroom-local wrapper styling.
Preview heuristics
Compare hierarchy, spacing, and interaction feedback before any page-level styling.
The rendered primitive should carry the engine and tenant differences by itself.
If it only looks right inside local wrapper chrome, the primitive or preview needs more work.
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.
Rottay3 live engines
Consumption

Import and usage

Keep the primitive contract visible. These snippets are meant to help teams consume the base component before they wrap or escalate it.Browse all Layout
Adoption postureStart with Collapse, not a wrapperImport directly from the design system package, verify the base behavior across 3 engines here, and only wrap when workflow logic starts repeating.
The primitive should stay legible before any page-specific chrome is layered on top.
Usage notes
Import directly from the design system package and keep composition simple first.
Use category-appropriate props before creating wrapper APIs that hide the base contract.
Escalate to patterns or surfaces only when workflow logic clearly outweighs local UI concerns.
API surface

Props

Curated reference for fast browsing. Verify edge-case props against the source until this table is extracted directly from the DS.
Reference scan5 documented props1 required and 4 optional rows are listed here so teams can review the contract without digging through source immediately.
Confirm uncommon edge cases against the component implementation until this table is extracted automatically.
Reference disciplineThe table below is tuned for quick scanning in docs. For unusual composition or engine-specific behavior, treat the DS source as the final authority.
Collapse propsProp contracts stay readable across dark-first and light-first tenants.
5 props1 required4 optional
Required
Optional
Optional
Optional
Optional
Related components

Continue within Layout

If Collapse is close but not quite right, scan nearby primitives in the same tier before jumping to a heavier surface or pattern abstraction.Browse all Layout
Next moveStay within Layout firstCategory siblings usually solve adjacent states while preserving the same primitive contract level and runtime expectations.
Escalate to patterns or surfaces only when the interaction model itself changes.
Also in Layout3 engines
AspectRatioContainer that maintains a fixed aspect ratio
Peer primitive within the same category set.Open detail
Aspect Ratio
Box
Collapse
Container
Divider
Flex
Grid
Hide
Layout
Responsive Slot
Scroll Area
Show
Space
Splitter
Stack
Navigation
Overlay
Same tenant, isolated engine
ClassicAnt Design
Live provider
LayoutCollapse
3 live engines
Live DS output
ModernDaisyUI
Live provider
LayoutCollapse
3 live engines
Live DS output
RusticVanilla CSS
Live provider
LayoutCollapse
3 live engines
Live DS output
Published entrypoint@rottay/design-systemUse the shared package surface as the default import path for Collapse. It keeps adoption readable and future extraction work straightforward.
Base tier: Layout
EntrypointKeep imports directReach for the published DS export first so teams can read the contract at a glance.
ImportPublished package entrypoint, ready to copy.
tsx
1 line
Consumption
Runtime-aware snippet
Baseline exampleStart with CollapseUse the smallest valid composition first, then layer in product-specific wrappers only when the workflow truly needs them.
UsagePaste-ready example that shows the base contract first.
tsx
4 lines
Consumption
Runtime-aware snippet
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
children
ReactNode
none
Layout children arranged by the component.
gap
number | string
none
Spacing between child elements.
align
string
none
Cross-axis alignment for layout primitives that support it.
className
string
none
Additional CSS class names.
style
CSSProperties
none
Inline style overrides.
childrenRequired
ReactNodenone
Layout children arranged by the component.
gapOptional
number | stringnone
Spacing between child elements.
alignOptional
stringnone
Cross-axis alignment for layout primitives that support it.
classNameOptional
stringnone
Additional CSS class names.
styleOptional
CSSPropertiesnone
Inline style overrides.
Also in Layout3 engines
BoxGeneric layout box replacing raw div
Peer primitive within the same category set.Open detail
Also in Layout3 engines
ContainerMax-width centered content wrapper
Peer primitive within the same category set.Open detail
Also in Layout3 engines
DividerHorizontal or vertical content separator
Peer primitive within the same category set.Open detail
Tenant permissions
Role changes apply immediately across all routes.
Escalation rules
Runtime fingerprint
Runtime
PlatformRottay
Rottay / ModernPlatform Flagship
Primary
#FFFFFFSecondary #A0A0A5
Radius
14pxxl 18px
Compact runtime evidence across 2+ token signals.
Note
Check rhythm, spacing, and whether the component creates obvious structure rather than empty scaffolding.
Tenant permissions
Role changes apply immediately across all routes.
Escalation rules
Secondary approvers inherit workspace defaults.
Runtime fingerprint
Runtime
PlatformRottay
Rottay / ModernPlatform Flagship
Primary
#FFFFFFSecondary #A0A0A5
Radius
Compact runtime evidence across 2+ token signals.
Note
Check rhythm, spacing, and whether the component creates obvious structure rather than empty scaffolding.
â–¶Tenant permissions
Role changes apply immediately across all routes.
â–¶Escalation rules
Secondary approvers inherit workspace defaults.
Runtime fingerprint
Runtime
PlatformRottay
Rottay / ModernPlatform Flagship
Primary
#FFFFFFSecondary #A0A0A5
Radius
Compact runtime evidence across 2+ token signals.
Note
Check rhythm, spacing, and whether the component creates obvious structure rather than empty scaffolding.
ImportTSX
Quick copy
import { Collapse } from '@rottay/design-system';
UsageTSX
Quick copy
<Collapse gap={16}>
  <Box>Primary content</Box>
  <Box>Supporting content</Box>
</Collapse>
Density
normalBorder-light cards
Accent
Badge
roundedtop bar · solid dividers
Motion
springHover lift 2px
14pxxl 18px
Density
normalBorder-light cards
Accent
Badge
roundedtop bar · solid dividers
Motion
springHover lift 2px
14pxxl 18px
Density
normalBorder-light cards
Accent
Badge
roundedtop bar · solid dividers
Motion
springHover lift 2px