# Creative Tim UI — Blocks & Components Library
> 393+ ready-to-use React/Next.js UI blocks built on shadcn/ui and Tailwind CSS.
> Built by Creative Tim — 300+ open source UI products used by 2.8 million developers over the last decade.
> Docs: https://www.creative-tim.com/ui/docs
> API key required for PRO blocks — get one at: https://www.creative-tim.com/ui/pricing

## Installation

### Option 1 — Creative Tim CLI (recommended)
```bash
# Add a block by name
npx @creative-tim/ui@latest add banner-01

# Add multiple blocks
npx @creative-tim/ui@latest add banner-01 hero-01 navbar-with-search
```

### Option 2 — shadcn CLI with full registry URL
```bash
# Add a block via the shadcn CLI
npx shadcn@latest add https://www.creative-tim.com/ui/r/banner-01.json
```

Replace `banner-01` with any block name listed below.

## AI Agent Skill

An agent skill is available for Claude Code, Cursor, Cline, and 40+ other AI coding agents.
It encodes Creative Tim's design philosophy, all install commands, PRO API key setup, and design rules — so agents generate blocks consistently without being told each time.

```bash
npx skills add creativetimofficial/ui
```

Skill source: https://github.com/creativetimofficial/ui/tree/main/skills/creative-tim-ui
Skill page: https://skills.sh/creativetimofficial/ui/creative-tim-ui

## Collections

- [Web 3](https://www.creative-tim.com/ui/blocks/web3-collection): Complete Web3 and blockchain interface components for React and Next.js. Build decentralized applications with wallet connections, crypto charts, NFT displays, and blockchain authentication flows.
- [Application Admin UI](https://www.creative-tim.com/ui/blocks/application-admin): Professional admin dashboard and application UI components for React and Next.js. Build complete admin panels with widgets, charts, tables, modals, sidebars, dropdowns, and data management interfaces.
- [Marketing & Presentation](https://www.creative-tim.com/ui/blocks/marketing-presentation): Eye-catching marketing and presentation components for React and Next.js. Build landing pages, testimonials, hero sections, contact forms, team pages, authentication flows, and newsletter subscriptions.
- [Content UI](https://www.creative-tim.com/ui/blocks/content-ui): Versatile content and editorial components for React and Next.js. Build blogs, feature sections, FAQ pages, stats displays, error pages, maintenance screens, and rich content presentations.
- [Ecommerce UI](https://www.creative-tim.com/ui/blocks/ecommerce-ui): Complete ecommerce and shopping UI components for React and Next.js. Build online stores with product listings, banners, pricing tables, order tracking, customer overviews, and category displays.
- [AI agents](https://www.creative-tim.com/ui/blocks/ai-agents): AI agent and autonomous commerce components for React and Next.js. Build AI-powered interfaces, agent payments, HTTP-based stablecoin transactions, and autonomous commerce experiences using the x402 protocol.

## Categories & Blocks

### Account
> Beautiful and customizable account management components for React and Next.js. Build user profiles, settings, authentication flows, and account dashboards with ready-to-use blocks.
> Browse: https://www.creative-tim.com/ui/blocks/application-admin/account

- [account-basic-info-01](https://www.creative-tim.com/ui/r/account-basic-info-01.json): Personal information management form
- [account-2fa-01](https://www.creative-tim.com/ui/r/account-2fa-01.json): Two-factor authentication setup
- [account-change-password-01](https://www.creative-tim.com/ui/r/account-change-password-01.json): Change password form with validation
- [account-notifications-01](https://www.creative-tim.com/ui/r/account-notifications-01.json): Notification preferences management
- [account-sessions-01](https://www.creative-tim.com/ui/r/account-sessions-01.json): Active sessions and devices management
- [account-avatar-upload-01](https://www.creative-tim.com/ui/r/account-avatar-upload-01.json): Profile avatar upload and management
- [account-integrations-01](https://www.creative-tim.com/ui/r/account-integrations-01.json): Third-party integrations management
- [api-keys-manager](https://www.creative-tim.com/ui/r/api-keys-manager.json): API keys management with scopes, rotation, and policies
- [integration-setup-wizard](https://www.creative-tim.com/ui/r/integration-setup-wizard.json): Three-step integration setup wizard with progress tracking

### AI Agents
> Modern AI agent interface components and chat UI blocks for React and Next.js. Create conversational AI experiences, streaming responses, and interactive agent interfaces.
> Browse: https://www.creative-tim.com/ui/blocks/ai-agents/ai-agents

- [ai-assistant-panel](https://www.creative-tim.com/ui/r/ai-assistant-panel.json): AI assistant side panel with prompts and history
- [ai-chat-streaming-01](https://www.creative-tim.com/ui/r/ai-chat-streaming-01.json): AI chat with streaming responses and thinking process
- [ai-image-generator-01](https://www.creative-tim.com/ui/r/ai-image-generator-01.json): AI image generator with upload and editor capabilities
- [ai-video-generator-01](https://www.creative-tim.com/ui/r/ai-video-generator-01.json): AI video generation agent with preview
- [x402-ai-agent-chat-01](https://www.creative-tim.com/ui/r/x402-ai-agent-chat-01.json): AI agent chat with x402 pay-per-request protocol
- [ai-audio-generator-01](https://www.creative-tim.com/ui/r/ai-audio-generator-01.json): AI audio generation with waveform and playback controls
- [ai-multi-step-agent-01](https://www.creative-tim.com/ui/r/ai-multi-step-agent-01.json): Multi-step AI agent with plan, execute, and verify phases
- [ai-code-assistant-01](https://www.creative-tim.com/ui/r/ai-code-assistant-01.json): AI code assistant with syntax-highlighted diff output
- [ai-file-attachment-01](https://www.creative-tim.com/ui/r/ai-file-attachment-01.json): AI chat with file and image attachment support
- [ai-voice-transcription-01](https://www.creative-tim.com/ui/r/ai-voice-transcription-01.json): Voice-to-text transcription with live recording visualization
- [ai-tool-use-01](https://www.creative-tim.com/ui/r/ai-tool-use-01.json): AI agent showing live tool calls with inputs and outputs
- [ai-document-qa-01](https://www.creative-tim.com/ui/r/ai-document-qa-01.json): Document upload with AI question answering and citations
- [ai-workflow-status-01](https://www.creative-tim.com/ui/r/ai-workflow-status-01.json): Multi-agent workflow pipeline with node status visualization
- [ai-chatbot-onboarding-01](https://www.creative-tim.com/ui/r/ai-chatbot-onboarding-01.json): Multi-step chatbot onboarding flow with progress tracking
- [ai-agent-activity-01](https://www.creative-tim.com/ui/r/ai-agent-activity-01.json): Live AI agent activity feed with token and cost tracking

### Pages
> Complete, ready-to-use full-page layouts for React and Next.js. Drop in a full page — dashboards, management views, and multi-section layouts composed from multiple blocks. Install with one command and customize to your needs.
> Browse: https://www.creative-tim.com/ui/blocks/ai-agents/pages

- [agent-management-list-01](https://www.creative-tim.com/ui/r/agent-management-list-01.json): AI agent management dashboard with agents list and status overview
- [agent-management-create-01](https://www.creative-tim.com/ui/r/agent-management-create-01.json): Create a new AI agent with a multi-step configuration wizard
- [agent-management-tasks-01](https://www.creative-tim.com/ui/r/agent-management-tasks-01.json): Agent task board with kanban-style columns and task assignment
- [agent-management-detail-01](https://www.creative-tim.com/ui/r/agent-management-detail-01.json): Single AI agent detail view with performance metrics, activity log, and configuration
- [agent-management-analytics-01](https://www.creative-tim.com/ui/r/agent-management-analytics-01.json): AI agent analytics dashboard with cost tracking, token usage, and performance charts

### Authentication
> Secure authentication components and login flows for React and Next.js. Build sign-in forms, registration pages, password reset flows, and authentication interfaces.
> Browse: https://www.creative-tim.com/ui/blocks/marketing-presentation/authentication

- [authentication-01](https://www.creative-tim.com/ui/r/authentication-01.json): Simple sign-in form with email, password, and Google authentication
- [authentication-02](https://www.creative-tim.com/ui/r/authentication-02.json): Sign-in form with image and social authentication options
- [authentication-03](https://www.creative-tim.com/ui/r/authentication-03.json): Simple sign-up form with social authentication
- [authentication-04](https://www.creative-tim.com/ui/r/authentication-04.json): Password reset form with background image
- [authentication-05](https://www.creative-tim.com/ui/r/authentication-05.json): Sign-in form with full background image and trust badge
- [authentication-06](https://www.creative-tim.com/ui/r/authentication-06.json): Sign-in with company benefits showcase

### Banner
> Attention-grabbing banner components for React and Next.js. Build notification banners, promotional headers, announcement bars, and call-to-action banners with dismissible options.
> Browse: https://www.creative-tim.com/ui/blocks/ecommerce-ui/banner

- [banner-01](https://www.creative-tim.com/ui/r/banner-01.json): Basic banner with call-to-action button and dismiss
- [banner-02](https://www.creative-tim.com/ui/r/banner-02.json): Simple banner variations with centered text and actions
- [banner-03](https://www.creative-tim.com/ui/r/banner-03.json): Welcome banner with title and description
- [banner-04](https://www.creative-tim.com/ui/r/banner-04.json): Banner with alert icon and action buttons
- [banner-05](https://www.creative-tim.com/ui/r/banner-05.json): Banner with company logo and call-to-action
- [banner-06](https://www.creative-tim.com/ui/r/banner-06.json): Banner with inline link and dismiss functionality
- [banner-07](https://www.creative-tim.com/ui/r/banner-07.json): Simple promotional banner with CTA button

### Calendar
> Professional calendar and scheduling components for React and Next.js. Build event calendars, weekly schedules, daily planners, and event creation forms with date pickers and time management.
> Browse: https://www.creative-tim.com/ui/blocks/content-ui/calendar

- [calendar-01](https://www.creative-tim.com/ui/r/calendar-01.json): Weekly schedule calendar with meeting cards and navigation
- [calendar-02](https://www.creative-tim.com/ui/r/calendar-02.json): Daily calendar view with event cards and organizer details
- [calendar-03](https://www.creative-tim.com/ui/r/calendar-03.json): Create new event form with date picker and guest management

### Card
> Versatile card layout components for React and Next.js. Build content cards with avatars, images, backgrounds, call-to-action buttons, and various layouts for displaying information in organized containers.
> Browse: https://www.creative-tim.com/ui/blocks/content-ui/card

- [card-with-avatar](https://www.creative-tim.com/ui/r/card-with-avatar.json): Content card with header image and author avatar
- [card-with-background-image](https://www.creative-tim.com/ui/r/card-with-background-image.json): Full-background image card with gradient overlay
- [card-with-cta-button](https://www.creative-tim.com/ui/r/card-with-cta-button.json): Content card with call-to-action button
- [card-without-border](https://www.creative-tim.com/ui/r/card-without-border.json): Borderless card with ghost styling
- [simple-card-with-cta](https://www.creative-tim.com/ui/r/simple-card-with-cta.json): Simple card with category tag and CTA button

### Billing
> Professional billing and payment UI components for React and Next.js. Build payment forms, invoices, subscription management, and checkout flows with pre-built blocks.
> Browse: https://www.creative-tim.com/ui/blocks/application-admin/billing

- [billing-information-01](https://www.creative-tim.com/ui/r/billing-information-01.json): Manage billing contacts and company information
- [card-display-01](https://www.creative-tim.com/ui/r/card-display-01.json): Credit card display with dark and light themes
- [payment-method-01](https://www.creative-tim.com/ui/r/payment-method-01.json): Payment method management with edit and delete
- [transaction-history-01](https://www.creative-tim.com/ui/r/transaction-history-01.json): Financial transaction history with trend indicators
- [invoices-01](https://www.creative-tim.com/ui/r/invoices-01.json): Invoice overview with status badges and download
- [billing-addons-selector](https://www.creative-tim.com/ui/r/billing-addons-selector.json): Billing add-ons picker with live pricing summary

### Blog
> Elegant blog components and content layouts for React and Next.js. Create beautiful article grids, post previews, author profiles, and content-rich blog experiences.
> Browse: https://www.creative-tim.com/ui/blocks/content-ui/blog

- [simple-blog-content-01](https://www.creative-tim.com/ui/r/simple-blog-content-01.json): Simple blog content cards
- [blog-cards-layout-01](https://www.creative-tim.com/ui/r/blog-cards-layout-01.json): Blog cards with view more button
- [blog-post-preview-tags-01](https://www.creative-tim.com/ui/r/blog-post-preview-tags-01.json): Blog posts with tags
- [highlighted-blog-posts-01](https://www.creative-tim.com/ui/r/highlighted-blog-posts-01.json): Highlighted blog posts with icons
- [blog-rectangular-images-01](https://www.creative-tim.com/ui/r/blog-rectangular-images-01.json): Blog posts with rectangular images
- [large-blog-preview-01](https://www.creative-tim.com/ui/r/large-blog-preview-01.json): Large blog post preview

### Charts
> Professional chart and data visualization components for React and Next.js. Build bar charts, line charts, area charts, comparison widgets, and interactive data dashboards with Recharts integration for displaying analytics and metrics.
> Browse: https://www.creative-tim.com/ui/blocks/application-admin/charts

- [bar-chart-example](https://www.creative-tim.com/ui/r/bar-chart-example.json): Bar chart with year selector showing overview balance
- [card-charts-example-1](https://www.creative-tim.com/ui/r/card-charts-example-1.json): Three chart cards showing website views, daily sales, and completed tasks
- [card-charts-example-2](https://www.creative-tim.com/ui/r/card-charts-example-2.json): Three chart cards with footer timestamps showing campaign metrics
- [comparison-chart-widget](https://www.creative-tim.com/ui/r/comparison-chart-widget.json): Line chart comparing team productivity across two years
- [line-chart](https://www.creative-tim.com/ui/r/line-chart.json): Multi-line chart showing annual sales performance with footer
- [single-line-chart](https://www.creative-tim.com/ui/r/single-line-chart.json): Single line chart with year selector showing website views traffic

### Contact
> Professional contact form components and section layouts for React and Next.js. Build contact pages, feedback forms, support sections, and communication interfaces.
> Browse: https://www.creative-tim.com/ui/blocks/marketing-presentation/contact

- [contact-sections-01](https://www.creative-tim.com/ui/r/contact-sections-01.json): Simple contact form with contact info
- [contact-sections-02](https://www.creative-tim.com/ui/r/contact-sections-02.json): Contact form with image background
- [contact-sections-03](https://www.creative-tim.com/ui/r/contact-sections-03.json): Contact form with dark info panel
- [contact-sections-04](https://www.creative-tim.com/ui/r/contact-sections-04.json): Minimalist contact with icon cards
- [contact-sections-05](https://www.creative-tim.com/ui/r/contact-sections-05.json): Contact form with map and option selection
- [contact-sections-06](https://www.creative-tim.com/ui/r/contact-sections-06.json): Centered contact with circular icon badges
- [contact-sections-07](https://www.creative-tim.com/ui/r/contact-sections-07.json): Contact form with office location details
- [contact-sections-08](https://www.creative-tim.com/ui/r/contact-sections-08.json): Contact form with area of interest selection
- [contact-sections-09](https://www.creative-tim.com/ui/r/contact-sections-09.json): Dark background contact with detailed info
- [contact-sections-10](https://www.creative-tim.com/ui/r/contact-sections-10.json): Contact form with info cards
- [contact-sections-11](https://www.creative-tim.com/ui/r/contact-sections-11.json): Dark gradient contact form with backdrop blur
- [contact-sections-12](https://www.creative-tim.com/ui/r/contact-sections-12.json): Contact form with background image overlay
- [contact-sections-13](https://www.creative-tim.com/ui/r/contact-sections-13.json): Contact information cards with form
- [contact-sections-14](https://www.creative-tim.com/ui/r/contact-sections-14.json): Gradient background contact form with asterisk fields
- [contact-sections-15](https://www.creative-tim.com/ui/r/contact-sections-15.json): Contact options with quick contact form

### CRUDs
> Complete CRUD interface components and data management blocks for React and Next.js. Build admin panels, data tables, forms, and database management interfaces.
> Browse: https://www.creative-tim.com/ui/blocks/application-admin/cruds

- [cruds-01](https://www.creative-tim.com/ui/r/cruds-01.json): Edit apparel item form with product details
- [cruds-02](https://www.creative-tim.com/ui/r/cruds-02.json): Update retail staff profile form
- [cruds-03](https://www.creative-tim.com/ui/r/cruds-03.json): Stylist account settings with profile photo upload
- [file-manager](https://www.creative-tim.com/ui/r/file-manager.json): File manager with grid/list views and upload dropzone

### Dropdown
> Professional dropdown menu and filter components for React and Next.js. Build priority filters, status filters, checkbox filters, range selectors, searchable filters, and tabbed filter menus for advanced data filtering.
> Browse: https://www.creative-tim.com/ui/blocks/application-admin/dropdown

- [dropdown-with-filter-by-priority](https://www.creative-tim.com/ui/r/dropdown-with-filter-by-priority.json): Priority filter dropdown with colored icons
- [dropdown-with-filter-by-status](https://www.creative-tim.com/ui/r/dropdown-with-filter-by-status.json): Status filter dropdown with colored square icons
- [dropdown-with-filter-with-checkbox](https://www.creative-tim.com/ui/r/dropdown-with-filter-with-checkbox.json): Category filter dropdown with checkboxes and counts
- [dropdown-with-filter-with-range](https://www.creative-tim.com/ui/r/dropdown-with-filter-with-range.json): Price range filter dropdown with presets and custom sliders
- [dropdown-with-filter-with-search](https://www.creative-tim.com/ui/r/dropdown-with-filter-with-search.json): Category filter dropdown with search and collapsible sections
- [dropdown-with-filter-with-tabs](https://www.creative-tim.com/ui/r/dropdown-with-filter-with-tabs.json): Tabbed filter dropdown with multiple filter categories

### Ecommerce
> Professional ecommerce components for React and Next.js. Build product listings, shopping carts, checkout flows, and complete online store experiences.
> Browse: https://www.creative-tim.com/ui/blocks/ecommerce-ui/ecommerce

- [simple-product-details-01](https://www.creative-tim.com/ui/r/simple-product-details-01.json): Simple product details grid
- [grid-ecommerce-01](https://www.creative-tim.com/ui/r/grid-ecommerce-01.json): Product grid with filters
- [promotional-cards-01](https://www.creative-tim.com/ui/r/promotional-cards-01.json): Promotional product cards
- [order-history-01](https://www.creative-tim.com/ui/r/order-history-01.json): Order history table
- [empty-shopping-cart-01](https://www.creative-tim.com/ui/r/empty-shopping-cart-01.json): Empty shopping cart state
- [digital-product-overview-01](https://www.creative-tim.com/ui/r/digital-product-overview-01.json): Digital product with plan options
- [product-description-01](https://www.creative-tim.com/ui/r/product-description-01.json): Product description with gallery
- [dark-product-overview-01](https://www.creative-tim.com/ui/r/dark-product-overview-01.json): Dark themed product overview
- [shopping-cart-01](https://www.creative-tim.com/ui/r/shopping-cart-01.json): Shopping cart with summary
- [checkout-01](https://www.creative-tim.com/ui/r/checkout-01.json): Checkout form with order summary
- [complex-product-description-01](https://www.creative-tim.com/ui/r/complex-product-description-01.json): Product description with accordion
- [interactive-product-preview-01](https://www.creative-tim.com/ui/r/interactive-product-preview-01.json): Interactive room product preview
- [order-details-01](https://www.creative-tim.com/ui/r/order-details-01.json): Order details with timeline
- [product-details-01](https://www.creative-tim.com/ui/r/product-details-01.json): Product details with image carousel
- [product-listing-filters-01](https://www.creative-tim.com/ui/r/product-listing-filters-01.json): Product listing with filters and sort
- [ecommerce-sections-01](https://www.creative-tim.com/ui/r/ecommerce-sections-01.json): Runway video spotlight with product cards
- [ecommerce-sections-02](https://www.creative-tim.com/ui/r/ecommerce-sections-02.json): Luxury product detail page with image gallery

### FAQs
> Clean and accessible FAQ components and help section layouts for React and Next.js. Build knowledge bases, support pages, and frequently asked questions interfaces.
> Browse: https://www.creative-tim.com/ui/blocks/content-ui/faqs

- [simple-faq-01](https://www.creative-tim.com/ui/r/simple-faq-01.json): Simple FAQ with dividers
- [faqs-list-01](https://www.creative-tim.com/ui/r/faqs-list-01.json): FAQ list with accordion
- [faq-left-title-01](https://www.creative-tim.com/ui/r/faq-left-title-01.json): FAQ with left-aligned title and card grid
- [faqs-grid-cta-01](https://www.creative-tim.com/ui/r/faqs-grid-cta-01.json): FAQ grid with CTA section
- [faqs-cards-icons-01](https://www.creative-tim.com/ui/r/faqs-cards-icons-01.json): FAQ cards with icons and CTA
- [faqs-grid-01](https://www.creative-tim.com/ui/r/faqs-grid-01.json): Simple FAQ grid layout

### Footers
> Modern footer components and section layouts for React and Next.js. Build professional website footers with links, social media, newsletters, and navigation.
> Browse: https://www.creative-tim.com/ui/blocks/marketing-presentation/footers

- [footers-01](https://www.creative-tim.com/ui/r/footers-01.json): Simple footer with social links
- [footers-02](https://www.creative-tim.com/ui/r/footers-02.json): Footer with navigation links and subscription
- [footers-03](https://www.creative-tim.com/ui/r/footers-03.json): Website footer with CTA
- [footers-04](https://www.creative-tim.com/ui/r/footers-04.json): Simple dark footer
- [footers-05](https://www.creative-tim.com/ui/r/footers-05.json): Complex dark footer
- [footers-06](https://www.creative-tim.com/ui/r/footers-06.json): Advanced light footer
- [footers-07](https://www.creative-tim.com/ui/r/footers-07.json): Simple footer with country selection
- [footers-08](https://www.creative-tim.com/ui/r/footers-08.json): Simple footer with version number
- [footers-09](https://www.creative-tim.com/ui/r/footers-09.json): Footer with notification and CTA
- [footers-10](https://www.creative-tim.com/ui/r/footers-10.json): Footer with page links
- [footers-11](https://www.creative-tim.com/ui/r/footers-11.json): Website footer with statement
- [footers-12](https://www.creative-tim.com/ui/r/footers-12.json): Website footer with navigation
- [footers-13](https://www.creative-tim.com/ui/r/footers-13.json): Simple centered website footer
- [footers-14](https://www.creative-tim.com/ui/r/footers-14.json): Website footer for apps
- [footers-15](https://www.creative-tim.com/ui/r/footers-15.json): Website footer with quote

### Hero
> Eye-catching hero section components for React and Next.js. Build landing page heroes, call-to-action sections, lead generation forms, and compelling above-the-fold content.
> Browse: https://www.creative-tim.com/ui/blocks/marketing-presentation/hero

- [hero-01](https://www.creative-tim.com/ui/r/hero-01.json): Simple hero section with email capture and large image
- [hero-02](https://www.creative-tim.com/ui/r/hero-02.json): Mobile app hero with app store download buttons
- [hero-03](https://www.creative-tim.com/ui/r/hero-03.json): Hero section with client logos and trust building
- [hero-04](https://www.creative-tim.com/ui/r/hero-04.json): Large image hero with centered content and CTAs
- [hero-05](https://www.creative-tim.com/ui/r/hero-05.json): Email signup hero with checkbox and large image
- [hero-06](https://www.creative-tim.com/ui/r/hero-06.json): Hero with full background image and centered content
- [hero-07](https://www.creative-tim.com/ui/r/hero-07.json): Lead generation hero with email form and testimonials
- [hero-08](https://www.creative-tim.com/ui/r/hero-08.json): Mobile application showcase with announcement badge
- [hero-09](https://www.creative-tim.com/ui/r/hero-09.json): Hero with image and feature content boxes
- [hero-10](https://www.creative-tim.com/ui/r/hero-10.json): Full-screen background hero with dual CTAs
- [hero-11](https://www.creative-tim.com/ui/r/hero-11.json): Lead campaign hero with calendar and email capture
- [hero-12](https://www.creative-tim.com/ui/r/hero-12.json): Left-aligned hero with dual images and CTAs
- [hero-13](https://www.creative-tim.com/ui/r/hero-13.json): Cover image hero with single CTA button
- [hero-14](https://www.creative-tim.com/ui/r/hero-14.json): Video hero with play button and vibrant gradients
- [hero-15](https://www.creative-tim.com/ui/r/hero-15.json): Hero carousel with auto-rotating slides and navigation
- [hero-16](https://www.creative-tim.com/ui/r/hero-16.json): Minimalist hero with social media buttons
- [hero-17](https://www.creative-tim.com/ui/r/hero-17.json): Dark moody hero with background image and social buttons
- [hero-18](https://www.creative-tim.com/ui/r/hero-18.json): Product showcase hero with laptop mockup and CTA

### KPI
> Professional KPI (Key Performance Indicator) card components for React and Next.js. Build metric displays, performance snapshots, dashboard cards with icons, badges, arrows, progress bars, charts, and action buttons to showcase business metrics and analytics.
> Browse: https://www.creative-tim.com/ui/blocks/application-admin/kpi

- [kpi-cards-with-icon](https://www.creative-tim.com/ui/r/kpi-cards-with-icon.json): KPI cards with icons showing metrics and targets
- [kpi-cards-with-badge](https://www.creative-tim.com/ui/r/kpi-cards-with-badge.json): KPI cards with colored badges showing percentage changes
- [kpi-cards-with-arrow](https://www.creative-tim.com/ui/r/kpi-cards-with-arrow.json): KPI cards with arrow indicators showing trends
- [kpi-cards-with-cta](https://www.creative-tim.com/ui/r/kpi-cards-with-cta.json): KPI cards with icons and call-to-action footer links
- [kpi-cards-with-progress-bar](https://www.creative-tim.com/ui/r/kpi-cards-with-progress-bar.json): KPI cards with progress bars and target tracking
- [kpi-cards-with-chart-and-cta](https://www.creative-tim.com/ui/r/kpi-cards-with-chart-and-cta.json): KPI cards with embedded charts and detailed links
- [complex-kpi-cards](https://www.creative-tim.com/ui/r/complex-kpi-cards.json): Complex campaign KPI cards with multiple metrics

### Modals
> Beautiful modal and dialog components for React and Next.js. Build popups, confirmations, forms, and interactive overlay interfaces with accessible components.
> Browse: https://www.creative-tim.com/ui/blocks/application-admin/modals

- [modals-01](https://www.creative-tim.com/ui/r/modals-01.json): Alert modal with confirmation input for reset settings
- [modals-02](https://www.creative-tim.com/ui/r/modals-02.json): Edit profile modal with form inputs and preferences
- [modals-03](https://www.creative-tim.com/ui/r/modals-03.json): Invite members modal with team management
- [modals-04](https://www.creative-tim.com/ui/r/modals-04.json): Update product modal with image gallery and form
- [modals-05](https://www.creative-tim.com/ui/r/modals-05.json): Upload files modal with drag and drop
- [modals-06](https://www.creative-tim.com/ui/r/modals-06.json): Publish capsule collection modal with metadata display
- [modals-07](https://www.creative-tim.com/ui/r/modals-07.json): Change collection visibility settings modal
- [modals-08](https://www.creative-tim.com/ui/r/modals-08.json): Disable collection lock rules modal with alert and impact list
- [modals-09](https://www.creative-tim.com/ui/r/modals-09.json): Transfer showroom ownership modal with form fields and warning
- [modals-10](https://www.creative-tim.com/ui/r/modals-10.json): Permanently remove archive modal with effects list
- [modals-11](https://www.creative-tim.com/ui/r/modals-11.json): Confirm vault deletion modal with text input verification
- [command-palette-modal](https://www.creative-tim.com/ui/r/command-palette-modal.json): Command palette modal with search and shortcuts

### Maintenance
> Professional maintenance and downtime page components for React and Next.js. Build scheduled maintenance notifications, system upgrade messages, and under construction pages with email notifications and social links.
> Browse: https://www.creative-tim.com/ui/blocks/content-ui/maintenance

- [simple-maintenance-block](https://www.creative-tim.com/ui/r/simple-maintenance-block.json): Simple maintenance page with warning icon
- [maintenance-block-with-icon](https://www.creative-tim.com/ui/r/maintenance-block-with-icon.json): Maintenance page with settings gear icon
- [maintenance-block-with-email-input](https://www.creative-tim.com/ui/r/maintenance-block-with-email-input.json): Maintenance page with email notification signup
- [maintenance-block-with-social-links](https://www.creative-tim.com/ui/r/maintenance-block-with-social-links.json): Dark themed maintenance page with social media links

### Newsletter
> Modern newsletter subscription components for React and Next.js. Build email capture forms, subscribe popups, modals, and newsletter sections with validation and call-to-action elements.
> Browse: https://www.creative-tim.com/ui/blocks/marketing-presentation/newsletter

- [newsletter-block-with-dark-background](https://www.creative-tim.com/ui/r/newsletter-block-with-dark-background.json): Newsletter subscription with dark background card
- [newsletter-block-with-left-to-right-layout](https://www.creative-tim.com/ui/r/newsletter-block-with-left-to-right-layout.json): Two-column newsletter subscription with checkbox
- [simple-subscribe-to-newsletter-section](https://www.creative-tim.com/ui/r/simple-subscribe-to-newsletter-section.json): Minimal horizontal newsletter subscription
- [subscribe-to-newsletter-modal](https://www.creative-tim.com/ui/r/subscribe-to-newsletter-modal.json): Newsletter subscription modal dialog
- [subscribe-to-newsletter-popup-with-image](https://www.creative-tim.com/ui/r/subscribe-to-newsletter-popup-with-image.json): Newsletter popup with featured image

### Popup
> Engaging popup and notification components for React and Next.js. Build welcome messages, cookie notifications, subscription forms, success confirmations, and promotional announcements with dismissible options and call-to-action elements.
> Browse: https://www.creative-tim.com/ui/blocks/marketing-presentation/popup

- [introductory-popup](https://www.creative-tim.com/ui/r/introductory-popup.json): Welcome assistance popup with radio options for onboarding needs
- [notification-popup](https://www.creative-tim.com/ui/r/notification-popup.json): Cookie notification popup with settings and acceptance buttons
- [popup-with-image](https://www.creative-tim.com/ui/r/popup-with-image.json): Feature announcement popup with header image and call-to-action
- [simple-request-popup](https://www.creative-tim.com/ui/r/simple-request-popup.json): Account deletion confirmation popup with warning and step-by-step guide
- [subscribe-popup](https://www.creative-tim.com/ui/r/subscribe-popup.json): Newsletter subscription popup with form inputs for name and email
- [success-popup](https://www.creative-tim.com/ui/r/success-popup.json): Upload success notification popup with social media follow buttons
- [welcome-popup-with-cta](https://www.creative-tim.com/ui/r/welcome-popup-with-cta.json): Simple welcome popup with single call-to-action button

### Navbar
> Responsive navigation bar components for React and Next.js. Build top navigation menus, mobile-friendly headers, search bars, breadcrumbs, and navigation layouts with dropdowns, icons, and user profiles.
> Browse: https://www.creative-tim.com/ui/blocks/marketing-presentation/navbar

- [navbar-with-search](https://www.creative-tim.com/ui/r/navbar-with-search.json): Navigation bar with integrated search functionality
- [simple-navbar](https://www.creative-tim.com/ui/r/simple-navbar.json): Simple navigation bar with logo, links, and dropdown
- [white-navbar](https://www.creative-tim.com/ui/r/white-navbar.json): White themed navigation bar with icons
- [transparent-navbar](https://www.creative-tim.com/ui/r/transparent-navbar.json): Transparent navigation bar for overlay use
- [filled-navbar](https://www.creative-tim.com/ui/r/filled-navbar.json): Dark filled navigation bar with white text
- [navbar-with-icons](https://www.creative-tim.com/ui/r/navbar-with-icons.json): Navigation bar with icons and user profile
- [minimalist-navbar](https://www.creative-tim.com/ui/r/minimalist-navbar.json): Minimalist centered navigation bar
- [navbar-with-links](https://www.creative-tim.com/ui/r/navbar-with-links.json): Navigation bar with breadcrumbs and search
- [blurred-navbar-example](https://www.creative-tim.com/ui/r/blurred-navbar-example.json): Blurred glass-morphism navigation bar
- [navbar-example-with-breadcrumbs](https://www.creative-tim.com/ui/r/navbar-example-with-breadcrumbs.json): Navigation bar with breadcrumbs and search

### Overview
> Customer review and testimonial overview components for React and Next.js. Build review sections, rating displays with statistics, customer testimonials with profile images, and comprehensive feedback interfaces.
> Browse: https://www.creative-tim.com/ui/blocks/ecommerce-ui/overview

- [customer-overview-example-1](https://www.creative-tim.com/ui/r/customer-overview-example-1.json): Simple customer review cards with ratings
- [customer-overview-example-2](https://www.creative-tim.com/ui/r/customer-overview-example-2.json): Detailed review section with statistics sidebar
- [customer-overview-example-3](https://www.creative-tim.com/ui/r/customer-overview-example-3.json): Customer reviews with profile images

### Pricing
> Professional pricing and plan comparison components for React and Next.js. Build pricing tables, subscription plans, feature comparisons, and pricing toggles with monthly/annual options.
> Browse: https://www.creative-tim.com/ui/blocks/ecommerce-ui/pricing

- [simple-pricing-block](https://www.creative-tim.com/ui/r/simple-pricing-block.json): Simple pricing grid with 4 pricing tiers
- [pricing-with-switcher](https://www.creative-tim.com/ui/r/pricing-with-switcher.json): Pricing section with monthly/annual toggle
- [pricing-comparison-table](https://www.creative-tim.com/ui/r/pricing-comparison-table.json): Detailed pricing comparison table
- [pricing-block-with-switcher](https://www.creative-tim.com/ui/r/pricing-block-with-switcher.json): Side-by-side pricing with plan type switcher
- [dark-bakground-pricing](https://www.creative-tim.com/ui/r/dark-bakground-pricing.json): Pricing section with dark hero background
- [gradient-background-pricing](https://www.creative-tim.com/ui/r/gradient-background-pricing.json): Pricing with gradient background and monthly/annual toggle
- [highlighted-pricing](https://www.creative-tim.com/ui/r/highlighted-pricing.json): Two-plan comparison with popular badge
- [horizontal-pricing](https://www.creative-tim.com/ui/r/horizontal-pricing.json): Horizontal pricing cards with company option
- [one-plan-pricing](https://www.creative-tim.com/ui/r/one-plan-pricing.json): Single lifetime membership pricing
- [pricing-block-example](https://www.creative-tim.com/ui/r/pricing-block-example.json): Three-tier pricing with check/minus icons
- [pricing-block-with-image](https://www.creative-tim.com/ui/r/pricing-block-with-image.json): Pricing with background image hero
- [request-cta-pricing](https://www.creative-tim.com/ui/r/request-cta-pricing.json): Simple two-plan pricing with demo CTA

### Product List
> Professional product listing and showcase components for React and Next.js. Build product grids, filtered lists, rating displays, and ecommerce product catalogs with customizable layouts.
> Browse: https://www.creative-tim.com/ui/blocks/ecommerce-ui/product-list

- [simple-product-list](https://www.creative-tim.com/ui/r/simple-product-list.json): Simple product listing with prices and color options
- [product-list-block](https://www.creative-tim.com/ui/r/product-list-block.json): Product listing with header and grid layout
- [product-list-grid-layout](https://www.creative-tim.com/ui/r/product-list-grid-layout.json): Product grid with descriptions and sale prices
- [product-list-with-filters](https://www.creative-tim.com/ui/r/product-list-with-filters.json): Product listing with advanced filter system
- [product-list-with-ratings](https://www.creative-tim.com/ui/r/product-list-with-ratings.json): Product listing with ratings and size selection

### Stats
> Professional statistics and metrics components for React and Next.js. Build data showcases, KPI dashboards, achievement displays, growth metrics, and performance indicators with customizable layouts and dark theme variations.
> Browse: https://www.creative-tim.com/ui/blocks/content-ui/stats

- [usage-limits-dashboard](https://www.creative-tim.com/ui/r/usage-limits-dashboard.json): Plan usage limits with progress and add-on management
- [card-stats](https://www.creative-tim.com/ui/r/card-stats.json): Stats with company logos and counts
- [simple-stats-block](https://www.creative-tim.com/ui/r/simple-stats-block.json): Simple 3-column stats with descriptions
- [simple-stats-block-with-titles](https://www.creative-tim.com/ui/r/simple-stats-block-with-titles.json): 4-column stats with heading section
- [stats-with-icons](https://www.creative-tim.com/ui/r/stats-with-icons.json): Stats cards with icons
- [stats-block-with-description-1](https://www.creative-tim.com/ui/r/stats-block-with-description-1.json): 4-column stats with detailed descriptions
- [stats-block-with-description-2](https://www.creative-tim.com/ui/r/stats-block-with-description-2.json): Stats with icons and dual metrics
- [stats-block-with-left-centered-headline](https://www.creative-tim.com/ui/r/stats-block-with-left-centered-headline.json): Split layout stats with left headline
- [default-stats-block](https://www.creative-tim.com/ui/r/default-stats-block.json): Complex stats with featured card
- [dark-stats-block-1](https://www.creative-tim.com/ui/r/dark-stats-block-1.json): Stats carousel with dark background
- [dark-stats-block-2](https://www.creative-tim.com/ui/r/dark-stats-block-2.json): Full-screen dark stats section

### Team
> Professional team member showcase components for React and Next.js. Build team pages, member profiles, organization charts, and employee directories with customizable layouts.
> Browse: https://www.creative-tim.com/ui/blocks/marketing-presentation/team

- [team-permissions-matrix](https://www.creative-tim.com/ui/r/team-permissions-matrix.json): Role-based permissions matrix with approval policies
- [team-01](https://www.creative-tim.com/ui/r/team-01.json): Team block with member cards, location, and contribution metrics
- [team-02](https://www.creative-tim.com/ui/r/team-02.json): Centered team block with rounded profile images
- [team-03](https://www.creative-tim.com/ui/r/team-03.json): Dark grid layout team block with profile descriptions
- [team-04](https://www.creative-tim.com/ui/r/team-04.json): Dark team block with avatar cards and social links
- [team-05](https://www.creative-tim.com/ui/r/team-05.json): Team block with profile descriptions and social links
- [team-06](https://www.creative-tim.com/ui/r/team-06.json): Minimalist team block with centered avatars
- [team-07](https://www.creative-tim.com/ui/r/team-07.json): Simple card layout team block with icon header
- [team-08](https://www.creative-tim.com/ui/r/team-08.json): Large team grid with avatar cards
- [team-09](https://www.creative-tim.com/ui/r/team-09.json): Team block with avatar cards and CTA button
- [team-10](https://www.creative-tim.com/ui/r/team-10.json): Team block with profile descriptions and icon header
- [team-11](https://www.creative-tim.com/ui/r/team-11.json): Team block with profile images and social links
- [team-12](https://www.creative-tim.com/ui/r/team-12.json): Dark team block with rounded avatars
- [team-13](https://www.creative-tim.com/ui/r/team-13.json): Team block with tiles and icon header
- [team-14](https://www.creative-tim.com/ui/r/team-14.json): Dark team cards block
- [team-15](https://www.creative-tim.com/ui/r/team-15.json): Team section with full-width profile cards and circular buttons
- [team-16](https://www.creative-tim.com/ui/r/team-16.json): Two-row team block with gradient overlay cards
- [team-17](https://www.creative-tim.com/ui/r/team-17.json): Two-member team block with horizontal layout

### Table
> Professional data table components for React and Next.js. Build product comparisons, crypto trackers, inventory tables, sales reports, member lists, invoices, and transaction records with sortable columns and interactive features.
> Browse: https://www.creative-tim.com/ui/blocks/application-admin/table

- [support-tickets-table](https://www.creative-tim.com/ui/r/support-tickets-table.json): Support tickets table with SLA and status filters
- [data-table-advanced](https://www.creative-tim.com/ui/r/data-table-advanced.json): Advanced data table with saved views and density controls
- [advanced-comparison-table](https://www.creative-tim.com/ui/r/advanced-comparison-table.json): Product comparison table with ratings
- [crypto-table](https://www.creative-tim.com/ui/r/crypto-table.json): Cryptocurrency market overview table
- [global-sales-table](https://www.creative-tim.com/ui/r/global-sales-table.json): Global sales table with vector map
- [invoices-table](https://www.creative-tim.com/ui/r/invoices-table.json): Invoices management table
- [member-list-table](https://www.creative-tim.com/ui/r/member-list-table.json): Team members list table
- [orders-table](https://www.creative-tim.com/ui/r/orders-table.json): Orders tracking table
- [product-inventory-table](https://www.creative-tim.com/ui/r/product-inventory-table.json): Product inventory table
- [project-management-table](https://www.creative-tim.com/ui/r/project-management-table.json): Project management tracking table
- [top-selling-products-table](https://www.creative-tim.com/ui/r/top-selling-products-table.json): Top selling products table
- [transactions-table](https://www.creative-tim.com/ui/r/transactions-table.json): Transactions history table

### Table Footer
> Professional table footer components for React and Next.js. Build pagination controls, row selection displays, date range filters, progress indicators, and action buttons for data tables with customizable layouts.
> Browse: https://www.creative-tim.com/ui/blocks/application-admin/table-footer

- [simple-table-footer-with-pagination](https://www.creative-tim.com/ui/r/simple-table-footer-with-pagination.json): Simple table footer with page indicator and navigation
- [table-footer-with-checkbox-and-cta](https://www.creative-tim.com/ui/r/table-footer-with-checkbox-and-cta.json): Table footer with row selection checkbox, pagination, and CTA button
- [table-footer-with-date-select-and-cta](https://www.creative-tim.com/ui/r/table-footer-with-date-select-and-cta.json): Table footer with date range filter, total, and export button
- [table-footer-with-row-select-and-pagination](https://www.creative-tim.com/ui/r/table-footer-with-row-select-and-pagination.json): Table footer with rows-per-page selector and pagination controls
- [table-footer-with-text-and-pagination](https://www.creative-tim.com/ui/r/table-footer-with-text-and-pagination.json): Minimal table footer with range indicator and pagination
- [table-footer-with-update-and-progress-bar](https://www.creative-tim.com/ui/r/table-footer-with-update-and-progress-bar.json): Table footer with last update time and progress indicator

### Table Header
> Professional table header components for React and Next.js. Build search bars, filter controls, category tabs, action buttons, and sorting options for data tables with flexible layouts.
> Browse: https://www.creative-tim.com/ui/blocks/application-admin/table-header

- [table-header-with-title-and-cta](https://www.creative-tim.com/ui/r/table-header-with-title-and-cta.json): Table header with title, description, and action buttons
- [table-header-with-search-and-cta](https://www.creative-tim.com/ui/r/table-header-with-search-and-cta.json): Table header with title, search bar, and add button
- [table-header-with-tabs-and-search](https://www.creative-tim.com/ui/r/table-header-with-tabs-and-search.json): Table header with title, category tabs, sort dropdown, and search
- [table-header-with-tags-and-search](https://www.creative-tim.com/ui/r/table-header-with-tags-and-search.json): Table header with title, filter tags, action buttons, and search
- [table-header-with-switch-and-date](https://www.creative-tim.com/ui/r/table-header-with-switch-and-date.json): Table header with title, toggle switch, date picker, and CTA
- [table-header-with-categories-and-select](https://www.creative-tim.com/ui/r/table-header-with-categories-and-select.json): Table header with category badges, radio options, and multiple filters

### Testimonials
> Professional testimonial and social proof components for React and Next.js. Build customer reviews, ratings, case studies, and trust-building sections.
> Browse: https://www.creative-tim.com/ui/blocks/marketing-presentation/testimonials

- [testimonials-01](https://www.creative-tim.com/ui/r/testimonials-01.json): Simple centered testimonials with avatars
- [testimonials-02](https://www.creative-tim.com/ui/r/testimonials-02.json): Testimonial cards with social proof badges
- [testimonials-03](https://www.creative-tim.com/ui/r/testimonials-03.json): Testimonial with statistics and metrics
- [testimonials-04](https://www.creative-tim.com/ui/r/testimonials-04.json): Three column testimonials with star ratings
- [testimonials-05](https://www.creative-tim.com/ui/r/testimonials-05.json): Dark testimonials with avatar and star ratings
- [testimonials-06](https://www.creative-tim.com/ui/r/testimonials-06.json): Company logo testimonial with large quote
- [testimonials-07](https://www.creative-tim.com/ui/r/testimonials-07.json): Interactive testimonials with profile switcher
- [testimonials-08](https://www.creative-tim.com/ui/r/testimonials-08.json): Light testimonials with star ratings
- [testimonials-09](https://www.creative-tim.com/ui/r/testimonials-09.json): Customer story with large heading and avatar
- [testimonials-10](https://www.creative-tim.com/ui/r/testimonials-10.json): Monochromatic testimonials with company logos
- [testimonials-11](https://www.creative-tim.com/ui/r/testimonials-11.json): Testimonial cards with focus state
- [testimonials-12](https://www.creative-tim.com/ui/r/testimonials-12.json): Grid layout testimonials with company logos
- [testimonials-13](https://www.creative-tim.com/ui/r/testimonials-13.json): Dark card testimonial with rounded avatar
- [testimonials-14](https://www.creative-tim.com/ui/r/testimonials-14.json): Light testimonials with card shadow
- [testimonials-15](https://www.creative-tim.com/ui/r/testimonials-15.json): Testimonials with submit button
- [testimonials-16](https://www.creative-tim.com/ui/r/testimonials-16.json): Dark carousel testimonials with navigation
- [testimonials-17](https://www.creative-tim.com/ui/r/testimonials-17.json): Background image carousel testimonials

### Web3 Cards
> Modern Web3 and blockchain card components for React and Next.js. Build wallet connection cards, NFT displays, token interfaces, and decentralized application card layouts.
> Browse: https://www.creative-tim.com/ui/blocks/web3-collection/web3

- [web3-01](https://www.creative-tim.com/ui/r/web3-01.json): NFT collection preview with pixel art
- [web3-02](https://www.creative-tim.com/ui/r/web3-02.json): NFT creator profile with collection gallery
- [web3-03](https://www.creative-tim.com/ui/r/web3-03.json): Top crypto auctions with countdown timer
- [web3-04](https://www.creative-tim.com/ui/r/web3-04.json): Trending NFT collections with gradient overlay
- [web3-05](https://www.creative-tim.com/ui/r/web3-05.json): Top NFT creators with time filter

### x402
> Internet-native payment protocol components for React and Next.js. Build AI agent payments, HTTP-based stablecoin transactions, and autonomous commerce experiences using the x402 protocol.
> Browse: https://www.creative-tim.com/ui/blocks/ai-agents/x402

- [x402-payment-01](https://www.creative-tim.com/ui/r/x402-payment-01.json): x402 payment protocol demonstration with AI agent payments
- [x402-ai-agent-chat-01](https://www.creative-tim.com/ui/r/x402-ai-agent-chat-01.json): AI agent chat with x402 pay-per-request protocol

### Widgets
> Versatile widget components for React and Next.js. Build dashboard widgets, stats cards, join-now sections, and data visualization panels with customizable designs.
> Browse: https://www.creative-tim.com/ui/blocks/application-admin/widgets

- [widgets-01](https://www.creative-tim.com/ui/r/widgets-01.json): Product card widget with image, badges and tags
- [widgets-02](https://www.creative-tim.com/ui/r/widgets-02.json): Dashboard settings and project widgets with dropdown menus
- [widgets-03](https://www.creative-tim.com/ui/r/widgets-03.json): Project progress widgets with completion tracking
- [widgets-04](https://www.creative-tim.com/ui/r/widgets-04.json): Statistics widgets with icons and trend indicators
- [widgets-05](https://www.creative-tim.com/ui/r/widgets-05.json): Revenue and customer stats widgets with growth metrics
- [widgets-06](https://www.creative-tim.com/ui/r/widgets-06.json): Event promotion widget with call-to-action
- [widgets-07](https://www.creative-tim.com/ui/r/widgets-07.json): Join community widget with member count and CTA

### Layout
> Professional category showcase and product layout components for React and Next.js. Build category grids, product collections, navigation sections, and organized content displays.
> Browse: https://www.creative-tim.com/ui/blocks/ecommerce-ui/layout

- [categories-with-full-background](https://www.creative-tim.com/ui/r/categories-with-full-background.json): Product categories with full background and large icons
- [categories-with-icon](https://www.creative-tim.com/ui/r/categories-with-icon.json): Category grid with icons and hover effects
- [categories-with-image](https://www.creative-tim.com/ui/r/categories-with-image.json): Category showcase with product images and features
- [categories-with-links](https://www.creative-tim.com/ui/r/categories-with-links.json): Category grid with subcategory links and navigation
- [simple-categories](https://www.creative-tim.com/ui/r/simple-categories.json): Minimal category cards with clean layout

### Logo
> Professional brand logo showcase components for React and Next.js. Build trust sections, partner displays, client logos, and company ecosystem layouts with various styles and configurations.
> Browse: https://www.creative-tim.com/ui/blocks/content-ui/logo

- [simple-logo-block](https://www.creative-tim.com/ui/r/simple-logo-block.json): Simple logo showcase with brand trust message
- [circle-logos-block](https://www.creative-tim.com/ui/r/circle-logos-block.json): Logo display with circular positioned buttons
- [dark-design-logo-block](https://www.creative-tim.com/ui/r/dark-design-logo-block.json): Dark themed logo showcase with grayscale effect
- [logo-block-with-cards](https://www.creative-tim.com/ui/r/logo-block-with-cards.json): Logo cards with testimonial and company URLs
- [logo-ecosystem](https://www.creative-tim.com/ui/r/logo-ecosystem.json): Interactive ecosystem diagram with logo connections
- [minimalist-logo-block](https://www.creative-tim.com/ui/r/minimalist-logo-block.json): Minimalist logo grid with grayscale styling
- [two-rows-logos](https://www.creative-tim.com/ui/r/two-rows-logos.json): Two-column layout with logos and description

### Content
> Versatile content layout components for React and Next.js. Build blog posts, articles, portfolios, project showcases, comment sections, and rich content presentations with customizable designs.
> Browse: https://www.creative-tim.com/ui/blocks/content-ui/content

- [activity-feed](https://www.creative-tim.com/ui/r/activity-feed.json): Activity feed with grouped updates and filters
- [roadmap-board](https://www.creative-tim.com/ui/r/roadmap-board.json): Roadmap board with now/next/later columns and votes
- [changelog-timeline](https://www.creative-tim.com/ui/r/changelog-timeline.json): Changelog timeline with version cards and tags
- [notification-inbox](https://www.creative-tim.com/ui/r/notification-inbox.json): Notification inbox with read/unread tabs and bulk actions
- [blog-content-block](https://www.creative-tim.com/ui/r/blog-content-block.json): Blog content with tags, image, and social sharing
- [blog-content-block-with-cta-button](https://www.creative-tim.com/ui/r/blog-content-block-with-cta-button.json): Two-column blog layout with image and CTA
- [blog-content-block-with-quotes](https://www.creative-tim.com/ui/r/blog-content-block-with-quotes.json): Blog post with styled quote and author attribution
- [booking-content-block](https://www.creative-tim.com/ui/r/booking-content-block.json): Booking cards for travel and accommodation
- [comments-section](https://www.creative-tim.com/ui/r/comments-section.json): Comments section with reply and like functionality
- [content-block-with-image-filter](https://www.creative-tim.com/ui/r/content-block-with-image-filter.json): Image cards with overlay text and dark filter
- [content-block-with-images](https://www.creative-tim.com/ui/r/content-block-with-images.json): Asymmetric image gallery grid layout
- [content-block-with-logos](https://www.creative-tim.com/ui/r/content-block-with-logos.json): Logo showcase with feature cards
- [content-block-with-paragraphs](https://www.creative-tim.com/ui/r/content-block-with-paragraphs.json): Two-column text and images layout
- [content-cards](https://www.creative-tim.com/ui/r/content-cards.json): Project cards with participants and due dates
- [content-rich-block](https://www.creative-tim.com/ui/r/content-rich-block.json): Multi-column content grid with various layouts
- [dark-content-cards-with-cta](https://www.creative-tim.com/ui/r/dark-content-cards-with-cta.json): Dark-themed content cards with call-to-action
- [simple-blog-post-template](https://www.creative-tim.com/ui/r/simple-blog-post-template.json): Simple blog post template with minimal design
- [social-content-block](https://www.creative-tim.com/ui/r/social-content-block.json): Social profile block with follow button
- [two-column-content-layout](https://www.creative-tim.com/ui/r/two-column-content-layout.json): Two-column layout with dark cards and feature lists
- [two-column-content-layout-with-icons-list](https://www.creative-tim.com/ui/r/two-column-content-layout-with-icons-list.json): Two-column layout with icons and feature descriptions

### Feature
> Professional feature showcase components for React and Next.js. Build product features, service highlights, benefits sections, and feature comparison layouts with icons, images, and call-to-action elements.
> Browse: https://www.creative-tim.com/ui/blocks/content-ui/feature

- [simple-features-block](https://www.creative-tim.com/ui/r/simple-features-block.json): Simple two-column features layout
- [simple-features-block-with-cta](https://www.creative-tim.com/ui/r/simple-features-block-with-cta.json): Simple features grid with CTA buttons
- [simple-features-block-with-icons](https://www.creative-tim.com/ui/r/simple-features-block-with-icons.json): Simple features grid with centered icons
- [simple-features-block-with-image](https://www.creative-tim.com/ui/r/simple-features-block-with-image.json): Features with image and icon cards
- [features-block-with-card](https://www.creative-tim.com/ui/r/features-block-with-card.json): Features grid with featured card
- [features-block-with-icons-and-cta](https://www.creative-tim.com/ui/r/features-block-with-icons-and-cta.json): Feature cards with icons and CTA buttons
- [features-block-with-plain-icons](https://www.creative-tim.com/ui/r/features-block-with-plain-icons.json): Features with simple icon presentation
- [features-block-with-stats](https://www.creative-tim.com/ui/r/features-block-with-stats.json): Features with statistics and image
- [features-block-with-tags](https://www.creative-tim.com/ui/r/features-block-with-tags.json): Features with tag badges
- [features-block-with-company-logo](https://www.creative-tim.com/ui/r/features-block-with-company-logo.json): Features with company logos
- [features-block-with-cta-button-and-logos](https://www.creative-tim.com/ui/r/features-block-with-cta-button-and-logos.json): Features with CTAs and logos
- [complex-features-block](https://www.creative-tim.com/ui/r/complex-features-block.json): Complex alternating image/text features
- [complex-features-block-2](https://www.creative-tim.com/ui/r/complex-features-block-2.json): Complex features with background colors
- [dark-features-block](https://www.creative-tim.com/ui/r/dark-features-block.json): Features with dark background theme
- [detailed-features-block](https://www.creative-tim.com/ui/r/detailed-features-block.json): Detailed features with rich content
- [grid-layout-features-block](https://www.creative-tim.com/ui/r/grid-layout-features-block.json): Grid layout with device mockups
- [icon-enhanced-features-block-with-background](https://www.creative-tim.com/ui/r/icon-enhanced-features-block-with-background.json): Features with background gradient
- [two-rows-features-block](https://www.creative-tim.com/ui/r/two-rows-features-block.json): Two-row feature grid layout

### Order
> Professional order tracking and management components for React and Next.js. Build order details pages, tracking timelines, shipping status displays, order summaries, and delivery management interfaces with customizable layouts.
> Browse: https://www.creative-tim.com/ui/blocks/ecommerce-ui/order

- [track-order-form](https://www.creative-tim.com/ui/r/track-order-form.json): Track order form with map background and featured products
- [compact-track-parcel](https://www.creative-tim.com/ui/r/compact-track-parcel.json): Compact parcel tracking card with vertical timeline
- [order-tracking-timeline](https://www.creative-tim.com/ui/r/order-tracking-timeline.json): Order tracking with horizontal timeline and product details
- [order-tracking-form](https://www.creative-tim.com/ui/r/order-tracking-form.json): Order details with tracking form fields
- [order-with-map](https://www.creative-tim.com/ui/r/order-with-map.json): Order details with map and timeline
- [comprehensive-order-details](https://www.creative-tim.com/ui/r/comprehensive-order-details.json): Comprehensive order details with address management
- [order-details-with-timeline](https://www.creative-tim.com/ui/r/order-details-with-timeline.json): Order details page with timeline and product summary

### Onboarding
> Professional user onboarding and welcome components for React and Next.js. Build multi-step onboarding flows, welcome cards, stepper forms, verification screens, and guided setup experiences with customizable layouts.
> Browse: https://www.creative-tim.com/ui/blocks/marketing-presentation/onboarding

- [onboarding-stepper-form](https://www.creative-tim.com/ui/r/onboarding-stepper-form.json): Onboarding stepper form with multi-step inputs
- [onboarding-welcome-block](https://www.creative-tim.com/ui/r/onboarding-welcome-block.json): Welcome card with icon, title, description, and action buttons
- [user-onboarding](https://www.creative-tim.com/ui/r/user-onboarding.json): Multi-step onboarding flow with stepper, forms, and testimonials

### Sidebar
> Professional sidebar navigation and menu components for React and Next.js. Build dashboard sidebars, app navigation, crypto wallets, calendar views, task managers, and feature-rich sidebar layouts with customizable content.
> Browse: https://www.creative-tim.com/ui/blocks/application-admin/sidebar

- [crypto-sidebar](https://www.creative-tim.com/ui/r/crypto-sidebar.json): Cryptocurrency dashboard sidebar with live price tracking
- [double-sidebar](https://www.creative-tim.com/ui/r/double-sidebar.json): Double sidebar layout with icon navigation and detailed menu
- [double-sidebar-with-chat](https://www.creative-tim.com/ui/r/double-sidebar-with-chat.json): Double sidebar with chat interface and team members list
- [financial-sidebar](https://www.creative-tim.com/ui/r/financial-sidebar.json): Financial dashboard sidebar with balance display and navigation
- [sidebar-with-calendar](https://www.creative-tim.com/ui/r/sidebar-with-calendar.json): Sidebar with integrated calendar view and date selection
- [sidebar-with-cards](https://www.creative-tim.com/ui/r/sidebar-with-cards.json): Sidebar with profile completion progress cards
- [sidebar-with-notification](https://www.creative-tim.com/ui/r/sidebar-with-notification.json): Sidebar with notification alert for new version updates
- [sidebar-with-task-manager](https://www.creative-tim.com/ui/r/sidebar-with-task-manager.json): Task management sidebar with tabs and file upload
- [sidebar-with-team-members](https://www.creative-tim.com/ui/r/sidebar-with-team-members.json): Sidebar with team members list and status indicators

### Coming Soon
> Professional coming soon and launching soon page components for React and Next.js. Build launch pages with countdown timers, email subscriptions, video backgrounds, app previews, and notification signup forms.
> Browse: https://www.creative-tim.com/ui/blocks/marketing-presentation/coming-soon

- [coming-soon-simple](https://www.creative-tim.com/ui/r/coming-soon-simple.json): Simple coming soon page with background image and email signup
- [coming-soon-with-countdown-timer](https://www.creative-tim.com/ui/r/coming-soon-with-countdown-timer.json): Coming soon page with countdown timer and social media links
- [coming-soon-with-countdown-for-apps](https://www.creative-tim.com/ui/r/coming-soon-with-countdown-for-apps.json): App launch coming soon page with iOS and Android download buttons
- [coming-soon-with-countdown-video](https://www.creative-tim.com/ui/r/coming-soon-with-countdown-video.json): Coming soon page with video/image background and waitlist signup

### Error
> Professional error page components for React and Next.js. Build 404 and 500 error pages with various layouts, icons, emoji, background images, and call-to-action buttons for better user experience.
> Browse: https://www.creative-tim.com/ui/blocks/content-ui/error

- [404-error-example-with-tags](https://www.creative-tim.com/ui/r/404-error-example-with-tags.json): 404 error page with navigation link tags
- [404-error-with-icon-links](https://www.creative-tim.com/ui/r/404-error-with-icon-links.json): 404 error page with icon-based link cards
- [500-error-with-background-image](https://www.creative-tim.com/ui/r/500-error-with-background-image.json): 500 server error page with background pattern image
- [500-error-with-cta](https://www.creative-tim.com/ui/r/500-error-with-cta.json): 500 server error page with call-to-action button
- [error-404-with-emoji](https://www.creative-tim.com/ui/r/error-404-with-emoji.json): 404 error page with emoji and friendly messaging
- [minimalist-500-error](https://www.creative-tim.com/ui/r/minimalist-500-error.json): Minimalist 500 error page with warning icon
- [simple-404-error-with-icon](https://www.creative-tim.com/ui/r/simple-404-error-with-icon.json): Simple 404 error page with shopping bag icon

### User Profile
> Professional user profile components for React and Next.js. Build user profile cards, account overviews, profile headers with statistics, social media links, and customizable layouts for displaying user information and achievements.
> Browse: https://www.creative-tim.com/ui/blocks/application-admin/user-profile

- [user-profile-simple](https://www.creative-tim.com/ui/r/user-profile-simple.json): User profile card with background, avatar, social links, and bio
- [user-profile-centered](https://www.creative-tim.com/ui/r/user-profile-centered.json): Centered user profile with navigation and statistics
- [user-profile-with-stats](https://www.creative-tim.com/ui/r/user-profile-with-stats.json): User profile with large avatar and inline statistics
- [user-profile-advanced](https://www.creative-tim.com/ui/r/user-profile-advanced.json): Advanced user profile with statistics grid and action buttons
- [user-profile-with-tabs](https://www.creative-tim.com/ui/r/user-profile-with-tabs.json): User profile with tabbed navigation interface

### Web3 Login
> Modern Web3 authentication components for React and Next.js. Build crypto wallet login interfaces, blockchain selection screens, QR code authentication, and secure Web3 access flows with support for Metamask, Coinbase, Trust Wallet, and other popular crypto wallets.
> Browse: https://www.creative-tim.com/ui/blocks/web3-collection/web3-login

- [choose-crypto-wallet-login](https://www.creative-tim.com/ui/r/choose-crypto-wallet-login.json): Crypto wallet selection login with search and connect functionality
- [scan-qr-code-login](https://www.creative-tim.com/ui/r/scan-qr-code-login.json): QR code scanning authentication with copy and install options
- [simple-crypto-login](https://www.creative-tim.com/ui/r/simple-crypto-login.json): Simplified Web3 login with email and wallet authentication
- [login-with-crypto-wallet-authentication](https://www.creative-tim.com/ui/r/login-with-crypto-wallet-authentication.json): Advanced Web3 login with email/phone tabs and multiple wallet options
- [choose-blockchain-login](https://www.creative-tim.com/ui/r/choose-blockchain-login.json): Blockchain network selection for wallet connection

### Web3 Charts
> Professional Web3 and cryptocurrency chart components for React and Next.js. Build crypto price charts, staking metrics, transaction analytics, blockchain data visualizations, and interactive dashboards with Recharts integration for displaying cryptocurrency data and market statistics.
> Browse: https://www.creative-tim.com/ui/blocks/web3-collection/web3-charts

- [crypto-chart-with-details](https://www.creative-tim.com/ui/r/crypto-chart-with-details.json): Cryptocurrency charts with current price, staking metrics, and wallet transaction details
- [crypto-large-chart-with-one-line](https://www.creative-tim.com/ui/r/crypto-large-chart-with-one-line.json): Large cryptocurrency transaction chart with search and metrics
- [crypto-charts-with-map](https://www.creative-tim.com/ui/r/crypto-charts-with-map.json): Cryptocurrency price chart with interactive world map showing global node distribution
- [crypto-large-chart-with-three-lines](https://www.creative-tim.com/ui/r/crypto-large-chart-with-three-lines.json): Multi-metric cryptocurrency chart comparing transactions, volume, and staking
- [web3-simple-metrics](https://www.creative-tim.com/ui/r/web3-simple-metrics.json): Simple Web3 metrics cards showing APR, staking, and fees with mini charts

## Full Registry

Machine-readable registry JSON: https://www.creative-tim.com/ui/r/registry.json