Production-Ready UI Blocks
Beautiful, responsive UI blocks built entirely with Ninna UI. Copy, paste, and make them your own. Works with Next.js, Vite, and React Router.
1. Browse
Find the block you need from our curated collection.
2. Copy
Click the copy button to grab the full source code.
3. Customize
Paste into your project and customize with Tailwind CSS.
Sign In
Centered login card with email/password fields, social login buttons, remember me checkbox, and forgot password link.
Sign Up
Registration card with name/email/password fields, password strength indicator, terms checkbox, and social sign-up buttons.
Reset Password
Multi-step password reset flow with Stepper: email entry, verification code input, and new password form with success confirmation.
OTP Verification
Two-factor authentication screen with 6-digit PinInput, countdown timer, resend code action, and verified success state.
Settings Page
Complex form layout with grouped sections, toggles, selects, and save actions.
User Profile
Cover banner, avatar, bio sidebar, stats grid, skill badges, and tabbed content with repositories, activity, and starred items.
Notifications Panel
Interactive notification feed with filtering tabs, unread indicators, activity types, and action buttons.
Onboarding Wizard
Multi-step user onboarding flow with Stepper, verification code input, and progress tracking.
Command Palette
Keyboard-driven command palette with search, grouped results, keyboard shortcuts, arrow-key navigation, and footer hints.
File Upload Zone
Drag-and-drop file upload with progress bars, file type icons, size formatting, remove action, and accepted-format badges.
Hero Header
Full-width hero section with gradient background, headline, description, dual CTAs, and stats row.
Testimonials Carousel
Social proof section with star ratings, customer quotes, avatars, and company logo attribution.
Stats & Metrics
Visual data dashboard with icons, animated number looks, and trend indicators for key business metrics.
Team Grid
Responsive team member gallery with profile photos, role badges, social links, and custom hover states.
Call to Action Banner
High-impact conversion section with deep gradients, dual action buttons, and trust indicators.
Features Grid
9 feature cards with icons, color-coded category badges, titles, and descriptions in a responsive 3-column grid with a CTA strip.
Pricing Table
3-tier pricing comparison with feature lists, badges, and CTAs.
FAQ Section
Expandable question/answer list with accordion pattern.
Contact Form
Contact form with validation, field groups, and success feedback.
Error & Status Pages
4Error 404 - Not Found
Styled 404 error page with large typography, search icon illustration, and navigation links.
Error 500 - Server Error
Internal server error page with warning illustration, error details, retry action, and support link.
Error 403 - Forbidden
Access denied page with shield illustration, permission explanation, and navigation options.
Maintenance Page
Scheduled maintenance page with progress indicator, estimated time, status updates, and notification signup.
Article Card Grid
Blog post cards with images, tags, author info, and date.
Article Page
Full blog post layout with table of contents, action bar, author bio, prev/next navigation, and related articles sidebar.
Newsletter Subscribe
Full-width newsletter CTA with email input, validation, success state, social proof stats, and recent issue previews.
Blog Category Filter
Blog listing page with category pill tabs, search bar, filterable article card grid, empty state, and pagination.
Comments Section
Threaded comment section with nested replies, like and reply actions, comment input with avatar, and load more.
Changelog
Timeline-style release notes with version badges, color-coded change types, and load older releases.
Product Card Grid
Responsive product grid with images, star ratings, price tags, discount badges, wishlist toggle, and quick-add-to-cart overlay.
Shopping Cart
Full shopping cart with quantity controls, item removal, promo code input, order summary sidebar, and empty-state illustration.
Checkout Form
Multi-step checkout with Stepper: shipping address, payment method with encrypted badge, order review, and confirmation state.
Order Confirmation
Post-purchase confirmation page with order ID, delivery timeline, shipping/payment cards, itemized receipt, and download actions.
Split Marketing Hero
Landing page header with dual layout: marketing copy on left, interactive code preview on right.
Feature Comparison
Comprehensive pricing comparison matrix with highlighted plans, and detailed feature breakdowns.
Social Proof Banner
Trusted logo wall accompanied by high-level business metrics and milestone badges.
Cookie Consent
Privacy-first cookie banner with minimal floating state and detailed granular preference settings.
Social Profile Links
Branded mobile-first profile page for social bios with featured links and integrated social icons.
Dashboard
Sidebar navigation with stat cards, data table, and header layout.
Data Table with Filters
Sortable data table with search, role/status Select filters, checkbox row selection, bulk actions, and pagination.
Calendar with Events
Monthly calendar view with event indicators, upcoming events sidebar, and add-event modal interaction.
Activity Timeline
Vertical activity stream with status icons, relative timestamps, rich content cards, and collapsible threads.
Empty State Showcase
Multi-scenario empty states for search, inbox, and access control with contextual primary actions.