Vista del kit
SaaS Dashboard Kit
15 alternativas de Header
50
Build a production-ready SaaS Dashboard Kit as a coherent Next.js 15 application.
PRODUCT CONTEXT
- Industry: SaaS.
- Goal: A complete workspace for metrics, projects, onboarding and demo conversion.
- Brand tokens: primary #7c3aed, secondary #06b6d4, background #09090b.
- Use React 19, TypeScript, Tailwind CSS, shadcn/ui, semantic HTML, WCAG AA, responsive layouts and reduced-motion support.
KIT COMPONENTS
## Header — Aurora SaaS Header (header-001)
Build a production-ready “Aurora SaaS” website header using React, TypeScript, Tailwind CSS, shadcn/ui and Lucide icons. Use a glass composition with primary #7c3aed, secondary #ec4899, and background #09090b. Implement sticky with scroll shadow, logo, primary navigation, active state, CTA, search trigger, theme-ready styles, user menu and mobile navigation. Dropdowns must support keyboard navigation, Escape, focus management, click outside, aria-expanded, aria-controls and semantic nav landmarks. Avoid hover-only access. Include desktop, tablet and mobile states, reduced-motion support, WCAG AA contrast, route integration and reusable typed navigation data. Return the complete component, dependencies and usage example; do not include proprietary logos or secret keys.
## Navegación — Aurora Floating Nav (navigation-001)
Build a production-ready “Aurora Floating Nav” navigation component using React, Next.js, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion and Lucide icons. Use a floating pattern in horizontal orientation with primary #8b5cf6, secondary #ec4899, and background #09090b. Include typed navigation data, active route, nested items, badges, icons, disabled entries, keyboard navigation and responsive behavior. Implement disclosure with aria-expanded and aria-controls, semantic nav landmarks, roving tabindex where appropriate, Escape and outside-click handling, focus restoration, 44px touch targets and WCAG AA contrast. Avoid hover-only menus and invalid nested links/buttons. Support loading, permission-filtered, empty and collapsed states. Animate transform/opacity, respect reduced motion and prevent layout shift. Return component code, demo, dependencies, route integration and tests.
## Sidebar — Midnight SaaS Console Sidebar (sidebar-003)
Build a production-ready “Midnight SaaS Console” sidebar using React, Next.js, TypeScript, Tailwind CSS, shadcn/ui Sidebar, Framer Motion and Lucide icons. Use a rail left-side layout for a saas product with primary #f97316, secondary #facc15, and background #fff7ed. Include brand, workspace selector, search, grouped navigation, active route, nested collapsible items, badges, favorites, user menu and footer action. Support expanded, icon-only collapsed, hover-expand, loading, empty, permission-filtered and mobile drawer states. Persist desktop preference without causing hydration mismatch. Add semantic nav landmarks, tooltips for icon-only mode, aria-expanded/controls, keyboard access, Escape, focus trapping/restoration, 44px targets and WCAG AA contrast. Avoid invalid nested controls. Animate transform/opacity, respect reduced motion and prevent content layout shift. Return typed data, reusable components, layout integration, dependencies and tests.
## Cards — Midnight SaaS Card (card-003)
Build a production-ready “Midnight SaaS” saas card using React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion and Lucide icons. Use a horizontal composition with primary #f97316, secondary #facc15, and background #fff7ed. Include semantic title, supporting text, visual placeholder, metadata, badge, primary action and overflow menu. Support default, hover, focus-visible, selected, loading, skeleton, empty, disabled and error states. Make the whole-card link pattern valid without nested interactive elements. Add typed props, responsive image aspect ratios, line clamping, keyboard access, visible focus, WCAG AA contrast and reduced-motion behavior. Animate transform and opacity without layout shift. Return component code, demo data, dependencies, usage example and tests.
## Botones — Violet AI Spark Button (button-014)
Build a production-ready “Violet AI Spark” button component using React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion and Lucide icons. Display the label “Generate with AI” with a spark visual treatment, soft shape, plus icon, primary…
## Formularios — Blue Enterprise Demo Form (form-010)
Build a production-ready “Blue Enterprise Demo” demo form using React, TypeScript, Tailwind CSS, shadcn/ui, React Hook Form and Zod. Use a minimal layout with colors #38bdf8, #818cf8, and #071325. Include the fields Full name, Email address, Message, clear labels, helpful descriptions, required/optional indicators, inline validation, loading, disabled, success, empty and server-error states. Prevent duplicate submissions; validate on client and server; sanitize and normalize inputs; add CSRF protection and rate limiting; never expose secrets. Support keyboard navigation, visible focus, autocomplete, aria-describedby, aria-invalid, aria-live summaries and WCAG AA contrast. Make it responsive and respect reduced motion. Return reusable typed components, Zod schema, server action/API example, dependencies and tests.
COHERENCE RULES
Unify every component under the kit tokens, typography, spacing, radii, states and data model. Connect navigation, sidebar, cards, calls to action and forms into real user flows. Remove conflicting palettes and duplicate controls. Include loading, empty, success and error states, mobile navigation, metadata, accessibility, analytics events, tests and README. Return the complete file tree and implementation.
Personalizar kit completo