Svelte Media Components

Dev Design Library indexes 33 Svelte media components from 6 open-source UI libraries, with the most coming from cnblocks, Animations (Svelte), Canvas UI, sv-efferd and AI Elements (Svelte). Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list targets Svelte.

• Ascii ObjectCanvas UI · ReactA 3D model or image redrawn as shape-matched ASCII.
• Comparator Onecnblocks · SvelteBefore/after image comparison slider block
• GlobeAnimations (Svelte) · SvelteAn autorotating, interactive, and highly performant globe made using WebGL.
• ImageAI Elements (Svelte) · SvelteA data-URL image component with typed props for AI-generated image payloads.
• Hero Threesv-efferd · SvelteA modern hero layout with mega-nav header, device mockup spotlight, and compact logo grid.
• Qr Code Signinsv-particles · Svelte
• Dithered ObjectCanvas UI · ReactA 3D model or image rendered through a 1-bit dither.
• Hero Eightcnblocks · SvelteHero with video background and overlay
• Hero Video DialogAnimations (Svelte) · SvelteA video dialog component with animated entrance effects, thumbnail support, and customizable animation styles.
• Hero Twosv-efferd · SvelteA framed product hero with a floating screen, structured header, and bordered logo section.
• Glass ObjectCanvas UI · ReactModels, SVGs, and images as floating liquid glass.
• Hero Fivecnblocks · SvelteHero section with app mockup image
• Icon CloudAnimations (Svelte) · SvelteAn interactive 3D tag cloud component that displays icons or images in a sphere formation with smooth rotation and…
• Image Gallery Onesv-efferd · SvelteA responsive editorial gallery with staggered aspect ratios, lazy-loaded media, and a clean masonry-style rhythm.
• Ink ObjectCanvas UI · ReactA 3D model or image printed as rough ink strokes.
• Hero Twocnblocks · SvelteTwo-column hero with image carousel
• LensAnimations (Svelte) · SvelteAn interactive component that enables zooming into images, videos and other elements.
• Decor iconsv-efferd · Svelte
• Liquid ObjectCanvas UI · ReactModels dragged through invisible liquid.
• Logo Collectioncnblocks · SvelteLogo collection utilities and exports
• Video TextAnimations (Svelte) · SvelteA component that displays video content masked by text, creating a text-shaped video effect with customizable…
• Particle ObjectCanvas UI · ReactModels rebuilt as swirling particle clouds.
• Logo Geminicnblocks · SvelteGoogle Gemini AI logo SVG component
• Fancy Media Between TextAnimations (Svelte) · Svelte
• Logo Google Palmcnblocks · SvelteGoogle PaLM AI logo SVG component
• Fancy Parallax FloatingAnimations (Svelte) · Svelte
• Logo Magic Uicnblocks · SvelteMagic UI logo SVG component
• Spell QrcodeAnimations (Svelte) · Svelte
• Logo Media Wikicnblocks · SvelteMediaWiki logo SVG component
• Logo Replitcnblocks · SvelteReplit logo SVG component
• Logo Vscodiumcnblocks · SvelteVSCodium logo SVG component
• Svgscnblocks · SvelteShared SVG logo and icon components
• Testimonial Sixcnblocks · SvelteTestimonial with video embed

Libraries with Svelte media components

• cnblocks
• Animations (Svelte)
• Canvas UI
• sv-efferd
• AI Elements (Svelte)

Related categories

• Media Components
• React Media Components
• Tailwind CSS Media Components
• Animated Media Components
• shadcn/ui Media Components
• Svelte Icon Components
• Svelte Scene 3D Components