Customization

SvSeeds components offer flexible customization options, ranging from simple prop-based modifications to complete component overhauls.

Using Props

Basic Props Configuration

Each component comes with dedicated type definitions, allowing you to leverage TypeScript’s type safety for customization.

<script lang="ts">
  import { Button, type ButtonProps } from "svseeds";
  
  const props: ButtonProps = {
    type: "button",
    styling: "my-button",
  };
</script>

<Button {...props}>Hello</Button>

Customizing Component Parts

Components that support specific parts (such as left, right, bottom, etc.) through props can be customized by specifying Snippet or string types for those parts. Only the specified parts will be rendered, with unnecessary elements automatically excluded.

Example of adding an icon to the left side:

<script>
  import { Button } from "svseeds";
</script>

<Button>
  hello
  {#snippet left()}
    ⭐
  {/snippet}
</Button>

Generated HTML:

<button class="svs-button whole neutral" type="button">
  <span class="svs-button left neutral">⭐</span>
  <span class="svs-button main neutral">hello</span>
</button>

Example of adding an icon to the right side:

<script>
  import { Button } from "svseeds";
</script>

<Button {right}>
  hello
</Button>

{#snippet right()}
  ⭐
{/snippet}

Generated HTML:

<button class="svs-button whole neutral" type="button">
  <span class="svs-button main neutral">hello</span>
  <span class="svs-button right neutral">⭐</span>
</button>

Attribute Customization

Components with an attributes prop allow you to freely specify attributes for the main element. However, attributes that conflict with props or compromise component integrity may be ignored. Check each component’s documentation to see which element the attributes prop is applied to.

<script lang="ts">
  import type { HTMLButtonAttributes } from "svelte/elements";
  import { Button } from "svseeds";
  
  const attributes: HTMLButtonAttributes = {
    name: "mybutton",
    "data-testid": "custom-button"
  };
</script>

<Button {attributes}>Hello</Button>

Advanced Usage

Direct Element Manipulation (Element Binding)

Components with an element prop allow direct manipulation of the main element using bind:element. Check each component’s documentation to see which element the element prop binds to.

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

  let element: HTMLButtonElement | undefined = $state();
  $effect(() => element?.focus());
</script>

<Button bind:element>Hello</Button>

Applying Actions

Components with an action prop allow you to apply Svelte Actions to the main element. Check each component’s documentation to see which element the action prop is applied to.

<script lang="ts">
  import type { Action } from "svelte/action";
  import { Button } from "svseeds";
  
  const action: Action = (node) => {
    node.focus();
    
    return {
      update: () => console.log("updated"),
      destroy: () => console.log("destroyed")
    };
  };
</script>

<Button {action}>hello</Button>

Customizing Dependent Components

Components with a deps prop use other SvSeeds components internally. You can customize these internal components by specifying the deps prop.

<script lang="ts">
  import { Accordion, type AccordionDeps } from "svseeds";
  
  const deps: AccordionDeps = {
    svsDisclosure: {
      styling: "my-disclosure",
      variant: "my-state"
    },
  };
</script>

<Accordion {deps} />

Direct Integration with CLI Tool

When you need deep customization that cannot be controlled through props, you can use the CLI tool to add components directly to your project. For details about the CLI tool, see GitHub.

Using the CLI Tool

npx svseeds-cli

pnpm dlx svseeds-cli

yarn dlx svseeds-cli

File Structure

By default, components are copied to the following location:

project-root
└─ src
    └─ lib
        └─ _svseeds
            ├─ _Badge.svelte      # Independent component
            ├─ core.ts            # Shared functions & utilities
            └─ TagsInput.svelte   # Component with dependencies

File naming conventions:

• core.ts: Shared functions and utilities for all components
• _ prefix: Independent components that don’t depend on other SvSeeds components
• Regular files: Components that depend on other SvSeeds components (dependencies are automatically added)

Setting Preset Styles

You can set the default style when no styling prop is specified by modifying the preset variable within the component.

<script>
  import type { SVSClass } from "svseeds";
  const preset: SVSClass = "my-custom-default-style";
</script>