Split Screen
Split screen accordion with expanding partitions.
Main Features of Split Screen
How to Use Split Screen in Next.js
Installation Guide for Split Screen
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
items | AccordionItem[] | [{id: '1', label: '01', title: '...', description: '...'}, ...] | Array of accordion items with id, label, optional title, description, and content. |
backgroundColor | string | transparent | Background color of the component (hex, rgb, or hsl). |
containerBorderColor | string | #e4e4e7 | Border color of the container (hex, rgb, or hsl). |
activeItemBgColor | string | #f4f4f5 | Background color of the active item (hex, rgb, or hsl). |
inactiveItemBgColor | string | #ffffff | Background color of inactive items (hex, rgb, or hsl). |
itemHoverBgColor | string | #fafafa | Background color of items on hover (hex, rgb, or hsl). |
itemBorderColor | string | #e4e4e7 | Border color between items (hex, rgb, or hsl). |
labelColor | string | #18181b | Color of item labels (hex, rgb, or hsl). |
titleColor | string | #18181b | Color of item titles (hex, rgb, or hsl). |
descriptionColor | string | #71717a | Color of item descriptions (hex, rgb, or hsl). |
defaultActive | number | null | null | Index of the initially active item (null for none). |
height | string | 20rem | Height of the accordion container (CSS value). |
borderRadius | string | 0.75rem | Border radius of the container (CSS value). |
Related Components
When to Use
Ideal for edgy fashion editorials, technical archives, and Next.js platforms that want a dramatic 'Split Screen' aesthetic. Use this layout to communicate structural scale and digital craft through large, expanding partitions.
Best Practices
Maintain consistent spacing within your design system by using it for focal content blocks. Follow React best practices by pairing it with bold, professional typography. Optimize for performance by using efficient layout-id transitions.
Why This Component Matters in Modern UI Development
Split-screen layouts communicate power, mystery, and structural honesty. This production-ready UI template helpsคุณ build an interface that feels authoritative and solid, breaking the 'standard' vertical list rules.
Frequently Asked Questions
QWhy 'Split Screen'?
The component features large horizontal partitions that 'push' each other aside, simulating the raw structural honesty of architectural blueprint expansion.
QCan I adjust colors?
Yes, both the primary 'activeItemBgColor' and background colors are fully configurable allowedคุณ to create 'Industrial' or 'Cyber' agency effects.
QIs it mobile responsive?
The partitions and typographic scales adapt dynamically for mobile, Ensuring the bold narrative remains impactful and structural on small screens.