cnblocks components

150+ UI & Marketing blocks using Svelte 5, Tailwind CSS v4 and Shadcn Svelte

Components: 107
Framework: Svelte
Stack: Svelte, Tailwind
License: MIT
GitHub stars: 429
Source: https://github.com/SikandarJODD/cnblocks
Website: https://sv-blocks.vercel.app
Install: pnpm dlx shadcn-svelte@latest add https://sv-blocks.vercel.app/r/{name}.json

All cnblocks components

Card Decorator: Decorative card component with visual effects
Comparator One: Before/after image comparison slider block
Contact One: Contact form with input fields and submit button
Contact Two: Two-column contact section with form and info
Content Five: Content block with image and text in grid layout
Content Four: Content section with feature highlights
Content One: Simple content block with heading and description
Content Seven: Content block with alternating layout
Content Six: Content section with icons and descriptions
Content Three: Two-column content with image sidebar
Content Two: Content block with centered text and CTA
Cta One: Call-to-action block with centered heading and buttons
Cta Three: CTA section with background gradient
Cta Two: Two-column CTA with text and action buttons
Faq Four: FAQ section with search and categories
Faq One: Simple accordion-style FAQ block
Faq Three: FAQ with two-column layout
Faq Two: FAQ section with expandable items
Feature Card: Reusable feature card with icon and text
Feature Eight: Feature grid with icons in circular containers
Feature Eleven: Feature section with alternating image/text rows
Feature Five: Feature block with large image and bullet points
Feature Four: Four-column feature grid with icons
Feature Fourteen: Feature section with numbered steps
Feature Nine: Feature list with checkmarks and descriptions
Feature One: Simple three-column feature grid
Feature Seven: Feature section with tabs and content panels
Feature Six: Six-column feature grid with hover effects
Feature Ten: Feature block with centered image and cards
Feature Thirteen: Feature section with large hero image
Feature Three: Three-column feature cards with borders
Feature Twelve: Feature grid with gradient backgrounds
Feature Two: Two-column feature with image on side
Footer Five: Footer with newsletter signup and social links
Footer Four: Multi-column footer with sitemap links
Footer One: Simple centered footer with logo and links
Footer Three: Three-column footer with contact info
Footer Two: Two-row footer with links and copyright
Forgot Password One: Forgot password form with email input
Forgot Password Two: Password reset form with side illustration
Header: Standard navigation header with logo and links
Header Eight: Navigation header for Hero Eight
Header Five: Navigation header for Hero Five
Header Four: Navigation header for Hero Four
Header Nine: Navigation header for Hero Nine
Header Seven: Navigation header for Hero Seven
Header Six: Navigation header for Hero Six
Header Three: Navigation header for Hero Three
Header Two: Navigation header for Hero Two
Hero Eight: Hero with video background and overlay
Hero Five: Hero section with app mockup image
Hero Four: Split hero with image on right side
Hero Header: Standard navigation header with logo and links
Hero Header Eight: Navigation header with dropdown menus
Hero Header Nine: Header with mega menu navigation
Hero Header Seven: Transparent header with centered logo
Hero Nine: Hero with animated background elements
Hero One: Classic centered hero with headline and CTA
Hero Seven: Hero with gradient background and stats
Hero Six: Hero section with logo cloud below
Hero Three: Hero with background image and overlay
Hero Two: Two-column hero with image carousel
Integration Cards: Collection of integration card variants for logos
Integration Eight: Integration grid with animated connections
Integration Five: Integration showcase with hover details
Integration Four: Four-column integration logo grid
Integration One: Simple integration logos in grid layout
Integration Seven: Integration section with categories
Integration Six: Integration cards with descriptions
Integration Three: Three-column integration with icons
Integration Two: Two-row integration logo marquee
Login One: Simple centered login form with inputs
Login Three: Login form with social auth buttons
Login Two: Split login with side illustration
Logo Collection: Logo collection utilities and exports
Logo Gemini: Google Gemini AI logo SVG component
Logo Google Palm: Google PaLM AI logo SVG component
Logo Magic Ui: Magic UI logo SVG component
Logo Media Wiki: MediaWiki logo SVG component
Logo Replit: Replit logo SVG component
Logo Vscodium: VSCodium logo SVG component
Logocloud One: Logo cloud with partner logos in a centered wrap layout
Logocloud Three: Scrolling logo cloud marquee with progressive blur edges
Logocloud Two: Interactive logo cloud with hover call-to-action
Marquee: Animated marquee component for horizontally or vertically scrolling content
Pricing Five: Pricing table with feature comparison
Pricing Four: Four-tier pricing with toggle switch
Pricing One: Simple three-tier pricing cards
Pricing Three: Pricing with highlighted popular plan
Pricing Two: Two-column pricing with monthly/yearly toggle
Progressive Blur: Progressive layered blur overlay component
Signup One: Simple centered signup form
Signup Three: Signup form with social auth options
Signup Two: Split signup with side illustration
Stats Four: Four-column stats with icons
Stats One: Simple stats row with large numbers
Stats Three: Stats cards with descriptions
Stats Two: Two-column stats with side image
Svgs: Shared SVG logo and icon components
Team One: Team grid with member photos and roles
Team Two: Team section with social links
Testimonial Five: Testimonial carousel with navigation
Testimonial Four: Four-column testimonial grid
Testimonial One: Simple centered testimonial quote
Testimonial Six: Testimonial with video embed
Testimonial Three: Three-column testimonial cards
Testimonial Two: Two-column testimonial with photos

cnblocks components

All cnblocks components

Browse by category