Explore interactive examples of the shared component library. Each demo is implemented with Radix primitives and is ready for Playwright automation.
Five ready-to-use compositions built from the navigation primitives. Each example maps 1:1 with the Storybook stories for rapid QA while browsing the demo gallery.
Application shell for authenticated dashboards with quick access to support and account actions.
Use this header for core product areas like the student dashboard. Desktop navigation uses the menu component while actions highlight the primary authentication flow.
Focused learning surface that surfaces global search and upgrade prompts alongside subject navigation.
Highlight discovery and search when students are exploring coursework. The upgrade button showcases how to introduce monetization pathways without overwhelming the navigation.
Creator-focused layout with notifications, quick publishing, and an account dropdown anchored to the avatar.
Give content creators direct access to their stats and publishing flow. The avatar dropdown demonstrates how Radix-powered menus integrate into the header pattern.
High-focus exam experience with progress breadcrumbs, countdown timer, and primary submission controls.
Ideal for timed assessments and practice exams where progress and actions must always stay visible.
Combine with the pagination component for per-question navigation and use the badge to surface the timer.
Public marketing header featuring primary navigation, sales CTA, and a gradient backdrop for hero pages.
Pair this header with landing pages or open marketing surfaces. The gradient background draws attention to the top navigation while keeping call-to-action buttons prominent.
We use essential cookies to make Brainliest work. With your permission, we’d also like to use analytics and marketing cookies to improve your experience.