Svelte

NPM Package: @kksh/svelte

Original Shadcn Svelte: https://www.shadcn-svelte.com/

Normally, Shadcn components are imported from local @/components/ui directory.

Now you can import the components from @kksh/svelte package.

Most of Shadcn components are exported from @kksh/svelte package.

Component Examples

Button Example

Preview

Code

<script>
  import { Button } from "@kksh/svelte"
</script>

<Button>Hello Kunkun!</Button>

Command Palette Example

Preview

Code

<script lang="ts">
  import Calendar from "svelte-radix/Calendar.svelte";
  import EnvelopeClosed from "svelte-radix/EnvelopeClosed.svelte";
  import Face from "svelte-radix/Face.svelte";
  import Gear from "svelte-radix/Gear.svelte";
  import Person from "svelte-radix/Person.svelte";
  import Rocket from "svelte-radix/Rocket.svelte";

  import { Command } from "@kksh/svelte";
</script>

<Command.Root class="max-w-[450px] rounded-lg border shadow-md">
  <Command.Input placeholder="Type a command or search..." />
  <Command.List>
    <Command.Empty>No results found.</Command.Empty>
    <Command.Group heading="Suggestions">
      <Command.Item>
        <Calendar class="mr-2 h-4 w-4" />
        <span>Calendar</span>
      </Command.Item>
      <Command.Item>
        <Face class="mr-2 h-4 w-4" />
        <span>Search Emoji</span>
      </Command.Item>
      <Command.Item>
        <Rocket class="mr-2 h-4 w-4" />
        <span>Launch</span>
      </Command.Item>
    </Command.Group>
    <Command.Separator />
    <Command.Group heading="Settings">
      <Command.Item>
        <Person class="mr-2 h-4 w-4" />
        <span>Profile</span>
        <Command.Shortcut>⌘P</Command.Shortcut>
      </Command.Item>
      <Command.Item>
        <EnvelopeClosed class="mr-2 h-4 w-4" />
        <span>Mail</span>
        <Command.Shortcut>⌘B</Command.Shortcut>
      </Command.Item>
      <Command.Item>
        <Gear class="mr-2 h-4 w-4" />
        <span>Settings</span>
        <Command.Shortcut>⌘S</Command.Shortcut>
      </Command.Item>
    </Command.Group>
  </Command.List>
</Command.Root>

Theme

You can get KK’s color theme and set your extension theme to match KK’s theme.

@kksh/svelte requires <ThemeWrapper /> component to be wrapped around the root component.

<script>
  import { ui } from "@kksh/api/ui/iframe"
  import { updateTheme } from "@kksh/svelte"

  onMount(() => {
    ui.getTheme().then((theme) => {
        updateTheme(theme)
    })
  })
</script>

<ThemeWrapper>
  <main>
    ...
  </main>
</ThemeWrapper>

For color theme to take effect, you need to import the theme styles from @kksh/vue/themes.

styles.css

@import url("@kksh/svelte/themes");