🎛️ 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>