How to Easily Create Reusable Svelte Components (With Examples!)

Svelte is an awesome framework that makes building web applications a joy! But you know what’s even better? Creating reusable components that save you time, effort, and help keep your codebase clean. In this guide, we’ll walk through how to create reusable Svelte components the easy and fun way!

🎯 Why Reuse Components?

Before we dive in, let’s answer the big question: Why should you care about reusable components?

  • Efficiency 🚀 - Write once, use everywhere! Saves you from copy-pasting code.
  • Consistency 🎨 - Your UI stays uniform across your app.
  • Maintainability 🛠️ - Fix bugs in one place instead of multiple spots.
  • Scalability 🌱 - Makes your project more structured and easier to grow.

Now that we know why, let’s start building some!

🛠️ Building a Simple Reusable Button Component

Buttons are one of the most common UI elements, so let’s create a reusable Button.svelte component.

1️⃣ Creating Button.svelte (with TypeScript)

<script lang="ts">
  type ButtonProps = {
  text:string;
  type: "button" | "submit" | "reset";
  onClick: ()=>void
  }
  
  let {
  text ="Click Me",
  type = "button",
  onClick: ()=>{}
  }:ButtonProps = $props();
</script>

<button on:click={onClick} class="btn" {type}>
	{text}
</button>

<style>
	.btn {
		padding: 10px 20px;
		font-size: 16px;
		background: dodgerblue;
		color: white;
		border: none;
		border-radius: 5px;
		cursor: pointer;
	}

	.btn:hover {
		background: deepskyblue;
	}
</style>

2️⃣ Using the Button Component

<script lang="ts">
	import Button from './Button.svelte';

	function handleClick(): void {
		alert('Button Clicked!');
	}
</script>

<Button text="Click Me!" onClick={handleClick} />

🎉 Boom! We now have a reusable button that we can use anywhere.

🏗️ Creating a Reusable Card Component (with TypeScript)

1️⃣ Creating Card.svelte

<script lang="ts">
	type CardProps = {
		title: string;
		content: string;
	};

	let { title, content }: CardProps = $props();
</script>

<div class="card">
	<h2>{title}</h2>
	<p>{content}</p>
</div>

<style>
	.card {
		padding: 20px;
		border-radius: 10px;
		box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
		background: white;
		margin: 10px 0;
	}
</style>

2️⃣ Using the Card Component

<script lang="ts">
	import Card from './Card.svelte';
</script>

<Card title="Hello Svelte!" content="This is a reusable card component." />

🔄 Reusable Modal Component (with TypeScript)

1️⃣ Creating Modal.svelte

<script lang="ts">
 
  type ModalProps = {
  open:boolean;
  onClose:()=>void
  }
  
  let {open, onClose}:ModalProps: $props();
</script>

{#if open}
	<div class="overlay" on:click={onClose}>
		<div class="modal" on:click|stopPropagation>
			<slot></slot>
			<button class="close" on:click={onClose}>Close</button>
		</div>
	</div>
{/if}

<style>
	.overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.modal {
		background: white;
		padding: 20px;
		border-radius: 10px;
	}
	.close {
		margin-top: 10px;
	}
</style>

2️⃣ Using the Modal Component

<script lang="ts">
	import Modal from './Modal.svelte';
	let showModal: boolean = false;
</script>

<button on:click={() => (showModal = true)}>Open Modal</button>

<Modal open={showModal} onClose={() => (showModal = false)}>
	<h2>Hello, I’m a modal!</h2>
	<p>Put any content inside me.</p>
</Modal>

🎛️ Reusable Input Component (with TypeScript)

1️⃣ Creating InputField.svelte

<script lang="ts">
	type InputProps = {
		label: string;
		value: string;
		type?: 'text' | 'email' | 'password';
		onInput: (event: Event) => void;
	};

	let { label, value, type, onInput }: InputProps = $props();
</script>

<label>
	{label}
	<input type={type ?? 'text'} bind:value on:input={onInput} />
</label>

<style>
	label {
		display: block;
		font-weight: bold;
		margin-bottom: 5px;
	}
	input {
		width: 100%;
		padding: 8px;
		border: 1px solid #ccc;
		border-radius: 5px;
	}
</style>

2️⃣ Using the InputField Component

<script lang="ts">
	import InputField from './InputField.svelte';
	let email: string = '';
</script>

<InputField
	label="Email"
	type="email"
	value={email}
	onInput={(e) => (email = (e.target as HTMLInputElement).value)}
/>

🌟 Final Thoughts

Reusable Svelte components make your life easier and your codebase cleaner. Whether it’s buttons, cards, modals, or input fields, reusability improves development efficiency.

Go ahead and start creating your own reusable components. Svelte makes it easy and fun! 🚀🔥

Got more ideas? Share your reusable Svelte component ideas below! 😃

#sveltekit#svelte