Building Reusable Buttons and Cards

Reusable UI components help frontend applications stay consistent and easier to maintain. Instead of rewriting the same styles multiple times, developers often create reusable buttons, cards, and layout components that can be used throughout the application.

Tailwind works especially well for building reusable UI patterns inside Svelte components.

Creating a Reusable Button

Create a file called Button.svelte.

<script>
  export let text = "Button";
</script>

<button
  class="
    bg-purple-600
    hover:bg-purple-700
    text-white
    px-4
    py-2
    rounded-lg
  "
>
  {text}
</button>

This component now provides a reusable button structure and styling pattern.

Using the Button Component

Open App.svelte and import the component:

<script>
  import Button from './Button.svelte';
</script>

<Button text="Save" />
<Button text="Delete" />
<Button text="Continue" />

Each button reuses the same layout and styles while displaying different content.

Creating a Reusable Card

Now create a simple card component.

<div
  class="
    bg-white
    shadow-md
    rounded-xl
    p-6
  "
>
  <slot></slot>
</div>

The slot allows the card to display different content depending on where it is used.

Using the Card Component

<Card>
  <h2 class="text-xl font-bold">
    Product Title
  </h2>

  <p class="text-gray-600">
    Product description goes here.
  </p>
</Card>

The same reusable card structure can now display many different types of content.