Svelte is Vibe, Svelte Form Builder & Svelte Animations

github

Bhide Svelte  • Peerlist

Svelte Agentation turns UI annotations into structured context that AI coding agents can understand and act on. Install using any package manager : pnpm, yarn, bun, npm pnpm i sv-agentation Usage: ```svelte &lt;script lang="ts"&gt; import { browser, dev } from '$app/environment'; import { Agentation } from 'sv-agentation'; // provide the absolute path to your project // to open directly in vs code (optional) const workspaceRoot = '/absolute/path/to/your/repo';&lt;/script&gt;{#if browser &amp;&amp; dev} &lt;Agentation {workspaceRoot} /&gt;{/if} ``` Goal is to bring Agentation to Svelte Community

Svelte Agentation

Svelte Shadcn Blocks is a curated collection of 50+ high-quality marketing UI components built with Svelte and styled using Tailwind CSS, inspired by the modern design system of shadcn/ui.The project aims to help developers and designers quickly prototype, build, and scale beautiful marketing pages without worrying about boilerplate UI setup. Features<ul><li>Built with modern, clean, and accessible design principles</li><li>Fully responsive for all screen sizes</li><li>Seamless dark mode support</li><li>Copy-paste ready for fast development</li><li>CLI to quickly scaffold and access components</li><li>Easy integration with any Svelte or SvelteKit project.</li></ul>Use Cases: Perfect for landing pages, SaaS websites, personal portfolios, product showcases, and startup MVPs. Live Demo: <a target="_blank" rel="noopener noreferrer" class="break-all link-break text-gray-500 hover:underline" href="https://sv-blocks.vercel.app">https://sv-blocks.vercel.app</a> GitHub: <a target="_blank" rel="noopener noreferrer" class="break-all link-break text-gray-500 hover:underline" href="https://github.com/SikandarJODD/cnblocks">https://github.com/SikandarJODD/cnblocks</a> I’d love to hear any suggestions for components, new blocks, or improvements.

Svelte Shadcn Blocks

Elevate your startup’s online presence with this modern, high-performance landing page built using Svelte 5, Tailwind CSS v4, and Shadch-Svelte. Designed for speed, responsiveness, and SEO optimization, this template offers a seamless user experience with smooth animations and an elegant UI. Demo : <a target="_blank" rel="noopener noreferrer" class="break-all link-break text-gray-500 hover:underline" href="https://sv-landing-pg.vercel.app">https://sv-landing-pg.vercel.app</a> Get it Now : <a target="_blank" rel="noopener noreferrer" class="break-all link-break text-gray-500 hover:underline" href="https://dub.sh/buy-startup">https://dub.sh/buy-startup</a> Features<ol><li>Fully Responsive – Optimized for all devices</li><li>SEO-Ready – Structured for high search rankings</li><li>Smooth Animations – Enhanced interactivity with performance in mind</li><li>Built-in Light &amp; Dark Mode – Seamless theme switching for better UX</li><li>Global Config for text, images..</li><li>Save 100+ Hours of work</li><li>Landing page with 10+ Sections.</li></ol><h3>Page Section</h3><ol><li>Hero Section – Engaging first impression with clear messaging</li><li>Partner Section – Showcase trusted collaborations</li><li>Problem – Define pain points and your unique value proposition</li><li>Bento-Style Features – Visually appealing, dynamic layout &amp; Feature Section</li><li>Testimonials – Build credibility with real feedback</li><li>Pricing Section – Transparent and structured plans</li><li>Call-to-Action (CTA) – Encourage conversions effortlessly</li><li>Footer – Organized navigation and contact details</li></ol>Perfect for SaaS, startups, and digital products looking to make an impact!Make your Idea Count

Launch your Startup in Style

<h3>The Problem i Faced: Why I Built This</h3>When starting a new project, building forms for authentication, contact pages, and various user inputs can be a time-consuming task. The challenge lies in:<ul><li>Manually creating different input fields.</li><li>Implementing both client-side and server-side validation from scratch.</li><li>Handling errors individually for each field.</li><li>Managing field dependencies, custom inputs, and validation rules effectively.</li></ul>To streamline this process, I created Svelte Form Builder—a project designed to help developers build, configure, and integrate forms effortlessly.<h3>How It Works</h3>Svelte Form Builder provides a seamless experience for creating dynamic forms with ease. Here's how you can use it:<ol><li>Add Input Fields: Choose from a variety of input types, including Email, Password, Date Picker, File Input, Location Input, Radio Groups, and more.</li><li>Customize &amp; Rearrange: Edit parameters like label, description, placeholder, validation rules (min, max, required), and reorder fields based on your requirements.</li><li>Copy &amp; Integrate: Generate and copy the Schema, Client-side, and Server-side code directly into your project. You're ready to go in minutes! </li></ol><h3>Key Features</h3><h3>1. Schema-Based Validation</h3><ul><li>Zod &amp; Valibot Support: Automatically generate schema validation based on the selected input fields.</li><li>Ensures both client-side &amp; server-side validation are handled efficiently.</li></ul><h3>2. Smart Dependency Management</h3><ul><li>Automatically suggests dependencies based on selected fields.</li><li>Install only what you need for a lightweight and optimized project.</li></ul><h3>3. Pre-Built Templates</h3><ul><li>Quickly set up common forms like Authentication (Login/Signup), Contact Forms, and more.</li><li>Saves time by providing ready-to-use templates.</li></ul><h3>4. Special Components</h3><ul><li>Password Input: Includes built-in show/hide functionality.</li><li>Location Input: Enables users to pick locations easily.</li><li>File Upload: Simplifies file handling with validation.</li></ul>Live Demo: <a target="_blank" rel="noopener noreferrer" class="break-all link-break text-gray-500 hover:underline" href="https://svelte-form-builder.vercel.app">https://svelte-form-builder.vercel.app</a> GitHub Repo: <a target="_blank" rel="noopener noreferrer" class="break-all link-break text-gray-500 hover:underline" href="https://github.com/SikandarJODD/form-builder">https://github.com/SikandarJODD/form-builder</a>Project Timeline I have been working on this project for the past two months, continuously improving it based on feedback and real-world use cases. Feedback &amp; Improvements I would love to hear your thoughts! If you have any suggestions on what to add, remove, or improve, please let me know. If you find any bugs, I’d love to solve them.This project is built to help developers like you, and I hope it makes form building in Svelte much easier for your next project. Happy Coding Svelte Devs

Svelte Form Builder

Svelte Components are build using Tailwind CSS and Framer MotionWebsite includes 3 Major Sections Svelte Magic UI : <ol><li>Includes Maximum Magic UI components for Svelte Developers like Orbiting Circles, Ripple Effect, Border Beams, Animated Beam.</li><li>Grid &amp; Dot Patterns, Text &amp; Box Reveal Effects.</li></ol>Svelte Luxe Components :<ol><li>Shiny Buttons, Animated border, inputs </li><li>Dock Menu, Dropdown Menu, Hover Card Effects.</li></ol>Svelte Indie UI : <ol><li>Bento Grid ( 4, 5, 6 ) Cells </li><li>Cool Card Effects, Separators, Loaders..</li></ol>Features<ol><li>Easy Copy Paste Components </li><li>Build using Svelte, Tailwind CSS, Svelte Motion.</li><li>Saves time via Utilizing pre built components </li></ol>GitHub : <a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://github.com/SikandarJODD/svelte-animations">https://github.com/SikandarJODD/svelte-animations</a>

Svelte Components

Codeflow is Roadmap for Programmers ..here you can learn C++ and get Topic wise Question from Easy to Medium 
Features : 
- More than 150 Leetcode Questions 
- Quality Design Roadmap of DSA 
- Interactive Learning related to Vector, Map, Stack ( Data Structures )
- Light / Dark Mode for Enhancing User Experience
Tech I Used for Building
Frontend : Svelte , Library : Svelte-Flow, CSS : Tailwind CSS, Shadcn 
Motive :  make programming easier by visualizing & Understand the Concept to Solve Problems 
Thanks a lot, if you check the website : https://roadmap-flow.vercel.app

Codeflow - Roadmap for Programmers

Created Custom Button Generator Using SvelteJs
Features : 
1) User can Create Custom Button in few clicks and Get the Code.
2) Code is Hosted on Github : Project Link : https://github.com/SikandarJODD/button-gen
3) Button includes padding border, text, color, background-color, etc..
4) Responsive UI, Code is Available in 2 formats :  
     * Standard Html, Css.
     * Inline Css. 
5) Now I am working on Classic Button Components with Effects ( hover, transition etc..).
--------------------------------------
Technical Stack : 
Framework : Svelte Js, 
Libraries : Svelte-copy, Scss 
--------------------------------------

Moto of Application : Get the Button in few clicks, "No Need To Code" ....Just simple Cope & Paste

Button Generator Using Svelte Js

Simple To- Do List using Svelte Js 
- Seamless UI
- Purposely made on Dark Theme
- Add or Remove List Items 
- Local Storage usage