Eclipse Navigation Sidebar
A modern fintech navigation layout with dark eclipse theme — near-black background with subtle blue glow accents.
Features
- Sidebar navigation with 5 main items (Dashboard, Portfolio, Transactions, Analytics, Settings)
- Active state indicator with blue highlight and dot marker
- Badge counts on navigation items (e.g. Transactions: 12)
- Pro Upgrade card at bottom of sidebar with gradient background
- Top bar with search input, notifications bell with indicator dot, and user profile
- Tooltips on nav items and notification bell
- Dashboard placeholder with stat cards (Total Balance, Today's P&L, Open Positions)
- Recent Activity feed with deposits and trades
- Space Grotesk + DM Sans font pairing for modern fintech feel
- Blue glow decorative line on sidebar border
- Dark mode optimized — designed dark-first with
dark: variants
- WCAG AA compliant text contrast
Usage
import EclipseNavSidebar from '@/registry/eclipse-nav-sidebar/registry-item';
export default function Layout() {
return <EclipseNavSidebar />;
}
Customization
- Nav items: Edit the
navItems array to add/remove navigation links
- Colors: Adjust the blue accent (
#3b82f6) for different brand colors
- User info: Replace hardcoded user name and email
- Content area: Replace the placeholder dashboard with your actual page content
