Svelte
Learn how to use the Hype Svelte SDK
Our headless Svelte components allow you to easily add a waitlist in a few lines of code while keeping full control over the UI.
To get started you'll need to get a public API key from the Hype dashboard.
Install @buildhype/svelte
npm install @buildhype/svelteSetup
<script>
import {
Waitlist,
WaitlistEmail,
WaitlistSubmit,
WaitlistSuccess,
} from "@buildhype/svelte";
</script>
<Waitlist apiKey="your-api-key">
<WaitlistEmail />
<WaitlistSubmit>Join Waitlist</WaitlistSubmit>
<WaitlistSuccess>
Thank you for joining the waitlist!
</WaitlistSuccess>
</Waitlist>Styling
Here's an example from the Hype website using Tailwind.
<script>
import {
Waitlist,
WaitlistEmail,
WaitlistSubmit,
WaitlistSuccess,
} from "@buildhype/svelte";
import { PUBLIC_HYPE_KEY } from '$env/static/public';
</script>
<Waitlist
class="flex gap-2 items-stretch"
apiKey={PUBLIC_HYPE_KEY}
>
<WaitlistEmail class="border border-neutral-700 p-2 focus:outline-none focus:ring-2 focus:ring-neutral-500 text-sm" />
<WaitlistSubmit class="bg-white text-black px-4 py-2 hover:bg-neutral-100 cursor-pointer text-sm">
Join Waitlist
</WaitlistSubmit>
<WaitlistSuccess class="text-sm font-medium">
Thank you for joining the waitlist!
</WaitlistSuccess>
</Waitlist>