Svelte Layout Components

Dev Design Library indexes 11 Svelte layout components from 3 open-source UI libraries, with the most coming from sv-efferd, AI Elements (Svelte) and Animations (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.

• Bento GridAnimations (Svelte) · SvelteA flexible grid layout with interchangeable BentoCard items for showcasing content in a responsive masonry style.
• CheckpointAI Elements (Svelte) · SvelteA compact checkpoint component that pairs a separator with icon and trigger helpers for workflow checkpoints.
• App Shell 2sv-efferd · SvelteA compact dashboard shell with a collapsible sidebar, sticky header, and structured content skeleton.
• SeparatorAnimations (Svelte) · SvelteA flexible horizontal separator for dividing content with solid or gradient lines and optional centered labels.
• Web PreviewAI Elements (Svelte) · SvelteA browser-style preview frame with navigation controls and a log console.
• Image Gallery Onesv-efferd · SvelteA responsive editorial gallery with staggered aspect ratios, lazy-loaded media, and a clean masonry-style rhythm.
• Testimonial Fivesv-efferd · SvelteA dense social-proof wall with grid fillers, patterned cards, and a long-form testimonial mosaic.
• Auth dividersv-efferd · Svelte
• Dashed linesv-efferd · Svelte
• Full width dividersv-efferd · Svelte
• Mask linesv-efferd · Svelte

Libraries with Svelte layout components

• sv-efferd
• AI Elements (Svelte)
• Animations (Svelte)

Related categories

• Layout Components
• React Layout Components
• Tailwind CSS Layout Components
• Animated Layout Components
• shadcn/ui Layout Components
• Svelte Separator Components