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.
Magic Link Auth
Passwordless magic-link sign-in with 3-step flow: email input, sent confirmation with resend countdown, and verified success state. Includes OAuth fallback buttons.
OTP Verification
Two-factor authentication screen with 6-digit PinInput, countdown timer, resend code action, and verified success state.
Reset Password
Multi-step password reset flow with Stepper: email entry, verification code input, and new password form with success confirmation.
Sign Up
Registration card with name/email/password fields, password strength indicator, terms checkbox, and social sign-up buttons.
OAuth Social Wall
Full-screen split auth wall: brand panel with headline, testimonials, and trust badges on the left; GitHub/Google/Apple OAuth buttons with social proof on the right.
API Keys Settings
Manage secret API keys for programmatic access, including generation and revocation.
Billing Settings
A comprehensive subscription and billing management page with active plan, payment methods, and invoice history.
Command Palette
Keyboard-driven command palette with search, grouped results, keyboard shortcuts, arrow-key navigation, and footer hints.
Data Export Modal
Export wizard with format selector (CSV/JSON/XLSX/PDF), collapsible field-group picker, progress bar state, and download success confirmation.
File Manager View
A comprehensive document and file manager interface featuring grid and list view toggles, folder navigation, search, and detailed file cards with dropdown actions.
File Upload Zone
Drag-and-drop file upload with progress bars, file type icons, size formatting, remove action, and accepted-format badges.
Media Gallery
Masonry image gallery with tag filters, click-to-lightbox with keyboard navigation, multi-select toolbar with bulk download/share/delete, and list view toggle.
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.
Project Kanban Board
Interactive task management board with drag-and-drop cards, priority labels, assignee avatars, and column progress indicators.
Search Results Page
Full-page search results with type filter sidebar, active filter chips, sort control, result cards with snippet and metadata, empty state, and pagination.
Settings Page
Complex form layout with grouped sections, toggles, selects, and save actions.
Sidebar Navigation
Collapsible app sidebar with workspace switcher, grouped nav items with badges, search shortcut, upgrade prompt, user footer dropdown, and mobile drawer.
Subscription Quotas
Visual dashboard for tracking plan usage, API requests, and storage limits.
Team Management
A settings view to invite users, manage roles (Admin, Member, Viewer), and view pending invitations.
Transfer Funds Form
A secure and complex form flow for transferring money, including account selectors with balances, currency inputs, and a confirmation state.
User Preferences Center
A comprehensive tabbed settings interface covering Profile, Security, Notifications, and API Keys.
User Profile
Cover banner, avatar, bio sidebar, stats grid, skill badges, and tabbed content with repositories, activity, and starred items.
Wallet Balance Cards
A grid of beautifully styled digital credit cards and wallet balances with quick actions.
Webhook Management
Manage webhook endpoints, event subscriptions, and view delivery logs.
Contact Form
Contact form with validation, field groups, and success feedback.
Call to Action Banner
High-impact conversion section with deep gradients, dual action buttons, and trust indicators.
FAQ Section
Expandable question/answer list with accordion pattern.
Features Grid
9 feature cards with icons, color-coded category badges, titles, and descriptions in a responsive 3-column grid with a CTA strip.
Hero Header
Full-width hero section with gradient background, headline, description, dual CTAs, and stats row.
Hero Video Background
High-impact hero section with cinematic video background, glassmorphism overlays, and dual CTAs.
How It Works
4-step numbered section with icon circles, desktop connecting line, mobile arrow connectors, feature highlights per step, and a bottom CTA strip.
Pricing Comparison Grid
Detailed pricing matrix with feature comparison, plan highlights, and monthly/annual toggles.
Pricing Table
3-tier pricing comparison with feature lists, badges, and CTAs.
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.
Testimonials Carousel
Social proof section with star ratings, customer quotes, avatars, and company logo attribution.
Error & Status Pages
5Error 403 - Forbidden
Access denied page with shield illustration, permission explanation, and navigation options.
Error 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.
Rate Limit (429)
429 Too Many Requests page with a live countdown timer, animated progress bar, retry button (enabled when countdown completes), rate-limit detail table, and upgrade CTA.
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.
Author Profile Card
Rich author cards with avatar, bio, follower/following/post stats, topic tags, social links, recent posts with engagement counts, and an interactive follow toggle.
Blog Category Filter
Blog listing page with category pill tabs, search bar, filterable article card grid, empty state, and pagination.
Changelog
Timeline-style release notes with version badges, color-coded change types, and load older releases.
Comments Section
Threaded comment section with nested replies, like and reply actions, comment input with avatar, and load more.
Newsletter Subscribe
Full-width newsletter CTA with email input, validation, success state, social proof stats, and recent issue previews.
Reading Progress
Sticky top reading-progress bar that tracks scroll depth, a floating share sidebar (Twitter/LinkedIn/copy link), and a back-to-top FAB — with a full simulated article.
Checkout Form
Multi-step checkout with Stepper: shipping address, payment method with encrypted badge, order review, and confirmation state.
Ecommerce Filters
A responsive sidebar for product filtering, including category checkboxes, price range sliders, brand search, and star-rating filters.
Invoice / Receipt
Printable invoice with company header, client billing block, itemized line table, subtotal/discount/tax/total summary, payment confirmation, and print/download actions.
Multi-Step Checkout
A comprehensive e-commerce checkout flow divided into three steps: Shipping, Payment, and Review. Features order summary sidebar and custom radio selections for shipping methods.
Order Confirmation
Post-purchase confirmation page with order ID, delivery timeline, shipping/payment cards, itemized receipt, and download actions.
Product Card Grid
Responsive product grid with images, star ratings, price tags, discount badges, wishlist toggle, and quick-add-to-cart overlay.
Product Detail Page
Full e-commerce PDP with image gallery, color & variant selectors, quantity control, add-to-cart, wishlist, trust badges, and tabbed description/specs/reviews.
Shopping Cart
Full shopping cart with quantity controls, item removal, promo code input, order summary sidebar, and empty-state illustration.
Wishlist Page
Saved items grid with discount badges, out-of-stock overlays, move-to-cart action with state feedback, bulk add-to-cart, and empty state with CTA.
Bento Grid Features
A trendy, asymmetrical bento-box style feature showcase grid with micro-animations.
Cookie Consent
Privacy-first cookie banner with minimal floating state and detailed granular preference settings.
Feature Comparison
Comprehensive pricing comparison matrix with highlighted plans, and detailed feature breakdowns.
Mega Footer
Full-featured site footer with newsletter signup, 4-column navigation links with badges, brand & social column, status indicator, locale selector, and bottom legal bar.
Integrations Grid
Logo grid of integrations with category filter tabs, search input, connect/disconnect toggle per card, popular badges, and a request-integration CTA card.
Split Marketing Hero
Landing page header with dual layout: marketing copy on left, interactive code preview on right.
Logo Cloud
Animated dual-row marquee of partner logos with animated/grid variant toggle, stats row, and customer testimonial quote.
Newsletter Popup
A delayed or exit-intent modal designed for lead capture, featuring a split layout and a clear dismiss action.
Professional Portfolio Grid
High-end project gallery with immersive hover effects, category filtering, client testimonials, and case study previews.
Scrolling Logo Ticker
An infinite-scroll marquee for trusted brands and partners, using CSS animations for smooth performance. Ideal for B2B/SaaS landing pages.
Social Profile Links
Branded mobile-first profile page for social bios with featured links and integrated social icons.
Social Proof Banner
Trusted logo wall accompanied by high-level business metrics and milestone badges.
Video Showcase
16:9 video player with custom play/pause/mute controls, progress bar, feature highlights, and a split copy-alongside layout with trust stats.
Activity Feed
A chronological audit log and event stream featuring avatars, timestamps, varied icon states, and nested content payloads. Ideal for SaaS dashboards and team collaboration tools.
Analytics Overview
Full analytics dashboard with SVG sparklines, bar chart, traffic sources, top pages table, time-range selector (7d/30d/90d/1y), and mini stat cards.
Calendar with Events
Monthly calendar view with event indicators, upcoming events sidebar, and add-event modal interaction.
Service Status Page
Real-time infrastructure monitoring dashboard with system health cards, region-specific status, and historical uptime charts.
Crypto Portfolio Dashboard
A specialized data dashboard view for tracking cryptocurrency assets, balances, and market trends.
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.
Empty State Showcase
Multi-scenario empty states for search, inbox, and access control with contextual primary actions.
Log Viewer
Terminal-style log feed with level filter buttons, service dropdown, search input, live streaming toggle, auto-scroll, color-coded log levels, and clear action.
RBAC Permissions Matrix
A robust grid interface for managing Role-Based Access Control (RBAC) permissions across various resources.
Report Builder Filters
Advanced filter panel with date range + quick shortcuts, multi-select dropdowns with chip display, range sliders, and a saved presets sidebar with add/remove.
Stat Cards Grid
A dashboard-ready grid of metric cards showing a primary value, a trend indicator, and a minimal SVG sparkline.
Activity Timeline
Vertical activity stream with status icons, relative timestamps, rich content cards, and collapsible threads.
Transaction History
A detailed financial data table for displaying transactions, with filtering, amounts formatting, and status badges.
AI Chat Interface
Modern chat interface with threaded conversations, AI status indicators, and multi-modal attachments.
AI Code Viewer
A specialized code viewer block with syntax highlighting and an expandable AI assistant panel for code explanations and optimization tips.
AI Document Analyzer
A split-screen interface with a document view on the left and an AI chat/insights panel on the right.
AI Generative Editor
A rich text editor interface featuring a floating AI command palette for generating, summarizing, and editing text.
AI Prompt Input
A rich, expandable textarea specifically designed for AI chatting, featuring file attachment buttons and slash-command hints.