Dev Design Library

sv-efferd components

A collection of beautifully crafted Svelte Shadcn Marketing blocks.

Components
77
Framework
Svelte
Stack
Svelte, TypeScript, Tailwind
License
MIT
GitHub stars
91
Source
https://github.com/SikandarJODD/sv-efferd
Website
https://sv-efferd.pages.dev
Install
pnpm dlx shadcn-svelte@latest add https://sv-efferd.pages.dev/r/{name}.json

All sv-efferd components

  • App Shell 2: A compact dashboard shell with a collapsible sidebar, sticky header, and structured content skeleton.
  • Auth divider
  • Auth Five: A split-screen auth experience with animated background paths and broader provider options.
  • Auth Four: A bordered auth layout with divider rails and a gentle email-first continuation flow.
  • Auth One: A centered auth entry screen with ambient particles and social sign-in actions.
  • Auth Three: A minimal single-column auth flow with brand header and stacked sign-in options.
  • Auth Two: A framed auth panel that combines email capture with side-by-side social login.
  • Blog One: A vertical editorial list with full-width dividers and compact summaries.
  • Blog Three: A card-based blog grid with media thumbnails and richer reading metadata.
  • Blog Two: A structured blog grid with metadata rows and filler cells for balance.
  • Contact Five: A bordered contact card pairing essential details with a reusable message form.
  • Contact Four: A split contact form with direct support details and a structured inquiry panel.
  • Contact One: A compact contact strip with quick details framed by full-width dividers.
  • Contact Three: A full-page contact layout with detailed channels, office info, and social links.
  • Contact Two: A three-column contact hub for email, social DMs, and community support.
  • CTA Five: A newsletter CTA that blends subscription form controls with social proof.
  • CTA Four: A compact card CTA with credit-card reassurance and elevated actions.
  • CTA One: A split CTA with quiet structure, balanced actions, and full-width dividers.
  • CTA Three: A more decorative CTA with corner accents and a stronger editorial feel.
  • CTA Two: A centered CTA with a softer secondary band and directional primary action.
  • Dashed line
  • Decor icon
  • FAQ Five: A searchable FAQ page with category filters, empty state handling, and structured dividers.
  • FAQ Four: A categorized FAQ explorer with topic switching and softly framed accordion rows.
  • FAQ One: A compact FAQ stack with a centered heading and a classic single-column accordion.
  • FAQ Three: A guided editorial FAQ with divider rails and decorative timeline markers.
  • FAQ Two: A split FAQ layout with a fixed intro column and full-height answer rail.
  • Feature Five: A dense capability grid with patterned card backgrounds and a stronger product voice.
  • Feature Four: A product-feature showcase with structured cards and subtle editorial chrome.
  • Feature One: A compact four-column feature strip with lightweight icon-led messaging.
  • Feature Three: A bordered feature grid with full-width divider rails and stronger product framing.
  • Feature Two: An editorial feature frame with dashed rails, corner accents, and three focused highlights.
  • Floating paths
  • Footer Five: A marketplace-style footer with store badges, social actions, and dense support links.
  • Footer Four: A directory-style footer with stacked social headers and nested link groups.
  • Footer One: A compact product footer with inline social links and a simple closing bar.
  • Footer Six: A cinematic sticky footer with animated columns and a long-form enterprise sitemap.
  • Footer Three: An animated rounded footer with grouped link columns and softer visual depth.
  • Footer Two: A structured multi-column footer with brand intro and outlined social actions.
  • Full width divider
  • Grid filler
  • Grid pattern
  • Header Five: A polished rounded header with compact mega-menu panels and stronger pill-shaped actions.
  • Header Four: A floating rounded header with stronger auth actions and a simplified mobile drawer.
  • Header One: A clean sticky header with simple nav links and a compact mobile sheet.
  • Header Three: A richer sticky header with mega-menu navigation and a full mobile fallback.
  • Header Two: A framed sticky header with tighter proportions and a softer product shell.
  • Hero One: A full hero composition with sticky header, editorial spotlight, and a marquee trust band.
  • Hero Three: A modern hero layout with mega-nav header, device mockup spotlight, and compact logo grid.
  • Hero Two: A framed product hero with a floating screen, structured header, and bordered logo section.
  • Image Gallery One: A responsive editorial gallery with staggered aspect ratios, lazy-loaded media, and a clean masonry-style rhythm.
  • Integration Five: A centered integration cluster with overlapping logo pills and a stronger primary CTA.
  • Integration Four: A bolder integration grid pairing a large product statement with floating logo tiles.
  • Integration One: A compact integration strip with lightweight cards and a simple link-out action.
  • Integration Three: A split integration hero with grid-positioned logos and divider rails.
  • Integration Two: A structured integration grid with framed cards and decorative corner accents.
  • Logo Cloud Five: A flexible wrapped logo cloud designed for broader brand collections.
  • Logo Cloud Four: A marquee logo band with progressive edge blur and a layered track surface.
  • Logo Cloud One: A clean partner grid with a framed card surface and balanced spacing.
  • Logo Cloud Three: A scrolling logo marquee with a soft edge mask and editorial rhythm.
  • Logo Cloud Two: A bordered logo grid with alternating panels and decorative corner accents.
  • Marquee
  • Mask line
  • Not Found One: A framed 404 layout with full-width dividers and balanced recovery actions.
  • Not Found Two: A minimal full-screen 404 with oversized typography and direct recovery actions.
  • Particles: Background of floating particles.
  • Portal
  • Pricing Four: An animated pricing table with monthly-yearly toggles, live number transitions, and motion badges.
  • Pricing One: A two-plan comparison with corner accents, compact savings callouts, and a stronger featured tier.
  • Pricing Three: A reusable three-tier pricing layout with icon-led cards and a highlighted middle plan.
  • Pricing Two: A bordered editorial pricing grid with divider rails, concise plan summaries, and feature checklists.
  • Progressive blur
  • Testimonial Five: A dense social-proof wall with grid fillers, patterned cards, and a long-form testimonial mosaic.
  • Testimonial Four: A split testimonial layout with divider rails, dense quote cards, and a stronger editorial grid.
  • Testimonial One: A centered single testimonial with brand mark, compact author block, and soft editorial framing.
  • Testimonial Three: A three-card testimonial grid with decorative corners, lifted middle emphasis, and richer profile metadata.
  • Testimonial Two: A framed testimonial layout with masked divider rails, asymmetrical composition, and avatar-led emphasis.

Browse by category