Quick Start

A quick guide to getting started with SvSeeds.

Setup

There are two ways to use SvSeeds in your project.

Prerequisites

SvSeeds is available with Svelte version 5.25.0 or higher.

Package Installation

npm install svseeds

pnpm add svseeds

yarn add svseeds

Local Installation (CLI)

npx svseeds-cli

pnpm dlx svseeds-cli

yarn dlx svseeds-cli

Basic Usage

Import

You can import unstyled components from SvSeeds. If you’ve copied the files locally, simply import them as regular components from your project.

<script lang="ts">
  import { Button } from "svseeds";


  let count = $state(0);
  const onclick = () => count++;
</script>

<Button {onclick} styling="my-button">
  count: {count}
</Button>

<script lang="ts">
  import { Button } from "svseeds";
  import { myButton } from "./styles";

  let count = $state(0);
  const onclick = () => count++;
</script>

<Button {onclick} styling={myButton}>
  count: {count}
</Button>

Styling

SvSeeds provides two approaches for styling components. You can either apply CSS directly using the traditional method, or modify class attributes (such as when using TailwindCSS). If you choose the CSS approach, styles must be defined in global scope.

.my-button.whole {
  padding-inline: 0.5rem;
  border-radius: 0.25rem;
  background-color: oklch(60% 0.118 184.704);
  cursor: pointer;
}
.my-button.main {
  color: #fff;
}

export { myButton };
const myButton = {
  whole: "px-2 rounded-sm bg-teal-600 cursor-pointer",
  main: "text-white",
};

Demo of MyButton.svelte

Next steps

• Ready to see the components in action? Browse Gallery.
• Want to learn about styling? Explore Styling.
• Wondering about design thinking? Read about Concepts.
• Looking to make it your own? Check out Customization.