HyperUI : Tailwind CSS Components

Svelte 5 with TailwindCSS

When I do frontends in Svelte, I use Tailwind for CSS instead of <style> tags.

So I have this routine installation commands:

npm create svelte@latest
npx svelte-add@latest tailwindcss

Because I started using Svelte 5, and svelte-add still uses <slot></slot>, I fix routes/+layout.svelte:

<script lang="ts">
    let { children } = $props();
</script>

{@render children()}

Codeium doesn't know Svelte 5 very well yet, so doesn't handle auto-completion that good.

• $$props instead of $props()
• {@render children} instead of {@render children()}

That "children()" had me looking for the bug for quite a long time.

Which TailwindCSS Library?

When I am using tailwind, I always struggle to choose which UI library I should use.

There are some famous UI libraries like:

• shadcn-svelte
• daisyUI
• flowbite

I've used shadcn-svelte for some projects and I liked it but wanted to try out other libraries.

HyperUI

And I found this HyperUI, which had components that you just had to copy and paste without installing any.

"Marketing" components had near-complete chunk of assembled UIs that we normally use which was useful.

Because some components needed interactions, creator Mark Mead seems to use AlpineJS for it. And for svelte, I had to find get around for it.

Dropdown, for example:

<script lang="ts">
	import { onMount } from 'svelte';
	let isOpen = $state(false);
	let dropdownRef: HTMLDivElement | null;

	function toggleDropdown() {
		isOpen = !isOpen;
	}

	function handleClickOutside(event: MouseEvent) {
		if (dropdownRef && !dropdownRef.contains(event.target as Node)) {
			isOpen = false;
		}
	}
	onMount(() => {
		document.addEventListener('click', handleClickOutside);
		return () => {
			document.removeEventListener('click', handleClickOutside);
		};
	});
</script>
<div bind:this={dropdownRef}>
    {#if isOpen}
        <div>
        </div>
    {/if}
</div>

I'll spend more time with this and share my experience later.