# Quick Start

A quick guide to getting started with SvSeeds.

> **Warning:** SvSeeds is currently in pre-release and may undergo breaking changes.
## Setup

There are two ways to use SvSeeds in your project.

### Prerequisites

SvSeeds is available with Svelte version 5.29.0 or higher.

### Package Installation

**npm**

```sh
npm install svseeds
```

**pnpm**

```sh
pnpm add svseeds
```

**yarn**

```sh
yarn add svseeds
```
### Local Installation (CLI)

**npm**

```sh
npx svseeds-cli
```

**pnpm**

```sh
pnpm dlx svseeds-cli
```

**yarn**

```sh
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.

**CSS**

```svelte:MyButton.svelte
<script lang="ts">
  import { Button } from "svseeds";

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

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

**TailwindCSS**

```svelte:MyButton.svelte
<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.

**CSS**

```css:app.css
.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;
}
```

**TailwindCSS**

```ts:styles.ts
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](/docs/gallery).
- Want to learn about styling? Explore [Styling](/docs/styling).
- Wondering about design thinking? Read about [Concepts](/docs/concepts).
- Looking to make it your own? Check out [Customization](/docs/customization).