🎛️ moji 文字

a cute and modular svelte kbar

live demo
check out the styling page

🖥️ use

check src/routes/+layout.svelte and src/routes/+page.svelte for hands-on usage and basic styling using tailwindcss.

$ pnpm add @drainpixie/moji

<!-- src/routes/+layout.svelte -->
<script lang="ts">
    import { CommandBar, type Command } from '@drainpixie/moji';

    const commands: Command[] = [
        { text: 'Home', trigger: () => console.log('Home'), icon: House, category: 'navigation' },
        { text: 'Create', trigger: () => console.log('Create'), icon: Plus, category: 'actions' }
    ];
</script>

<!-- maxItems and hotkey are optional, these are the defaults -->
<CommandBar {commands} maxItems={5} hotkey={(e) => e.key === 'k' && e.ctrlKey} />

<!-- ... -->

<!-- src/routes/+page.svelte -->

<script lang="ts">
    import { open } from '@drainpixie/moji';
</script>

<button data-command-bar-trigger onclick={() => open()} type="button">
    Manual Trigger or `CTRL + K`
</button>