diff --git a/packages/ui/.storybook/main.ts b/packages/ui/.storybook/main.ts
deleted file mode 100644
index 52aa66f..0000000
--- a/packages/ui/.storybook/main.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { StorybookConfig } from '@storybook/sveltekit';
-
-const config: StorybookConfig = {
-  "stories": [
-    "../src/**/*.stories.@(js|ts|svelte)"
-  ],
-
-  "addons": [
-    "@storybook/addon-svelte-csf",
-    "@storybook/addon-essentials",
-    "@storybook/addon-themes",
-  ],
-
-  "framework": {
-    "name": "@storybook/sveltekit",
-    "options": {}
-  },
-
-  docs: {}
-};
-export default config;
diff --git a/packages/ui/.storybook/manager-head.html b/packages/ui/.storybook/manager-head.html
deleted file mode 100644
index a3c7f89..0000000
--- a/packages/ui/.storybook/manager-head.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<style>
-.sidebar-header {
-  display: none !important;
-}
-#downshift-0-label {
-  display: none !important;
-}
-
-#downshift-0-label ~ div {
-  margin-top: 0 !important;
-}
-</style>
diff --git a/packages/ui/.storybook/preview.ts b/packages/ui/.storybook/preview.ts
deleted file mode 100644
index 9e27467..0000000
--- a/packages/ui/.storybook/preview.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { withThemeByClassName } from "@storybook/addon-themes";
-import type { Preview } from '@storybook/svelte';
-
-import "../src/lib/app.css";
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-  decorators: [withThemeByClassName({
-    themes: {
-      dark: 'theme-dark',
-      light: 'theme-light',
-      catppuccin: 'theme-catppuccin',
-      solarized: 'theme-solarized',
-      high: 'theme-high-contrast',
-      nord: 'theme-nord',
-      dracula: 'theme-dracula',
-    },
-    defaultTheme: 'light',
-  })],
-};
-
-export default preview;
diff --git a/packages/ui/src/lib/Checkbox.svelte b/packages/ui/src/lib/Checkbox.svelte
new file mode 100644
index 0000000..7505dcb
--- /dev/null
+++ b/packages/ui/src/lib/Checkbox.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	interface Props {
+		value: boolean;
+	}
+
+	let { value = $bindable(false) }: Props = $props();
+
+	$effect(() => {
+		if (typeof value === 'string') {
+			value = value === 'true';
+		} else if (typeof value === 'number') {
+			value = value === 1;
+		} else if (!(typeof value === 'boolean')) {
+			value = !!value;
+		}
+	});
+</script>
+
+<label
+	class="relative inline-flex h-[22px] w-[22px] cursor-pointer items-center justify-center bg-[var(--layer-2)] rounded-[5px]"
+>
+	<input
+		type="checkbox"
+		bind:checked={value}
+		class="peer absolute h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]"
+	/>
+	<span
+		class="absolute opacity-0 peer-checked:opacity-100 transition-opacity duration-100 flex w-full h-full items-center justify-center"
+	>
+		<svg
+			viewBox="0 0 19 14"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			class="h-[10px] w-[12px] text-[var(--text-color)]"
+		>
+			<path
+				d="M2 7L7 12L17 2"
+				stroke="currentColor"
+				stroke-width="3"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+		</svg>
+	</span>
+</label>
diff --git a/packages/ui/src/lib/Details.svelte b/packages/ui/src/lib/Details.svelte
index c1b2049..88697c1 100644
--- a/packages/ui/src/lib/Details.svelte
+++ b/packages/ui/src/lib/Details.svelte
@@ -1,37 +1,41 @@
 <script lang="ts">
-  interface Props {
-    title?: string;
-    transparent?: boolean;
-    children?: import('svelte').Snippet;
-    open?: boolean;
-  }
+	interface Props {
+		title?: string;
+		transparent?: boolean;
+		children?: import('svelte').Snippet;
+		open?: boolean;
+	}
 
-  let { title = "Details", transparent = false, children, open = $bindable(false) }: Props = $props();
+	let {
+		title = 'Details',
+		transparent = false,
+		children,
+		open = $bindable(false)
+	}: Props = $props();
 </script>
 
 <details class:transparent bind:open>
-  <summary>{title}</summary>
-  <div class="content">
-    {@render children?.()}
-  </div>
+	<summary>{title}</summary>
+	<div class="content">
+		{@render children?.()}
+	</div>
 </details>
 
 <style>
-  details {
-    padding: 1em;
-    color: var(--text-color);
-    padding-left: 20px;
-    background-color: #202020;
-    outline: solid 0.1px white;
-    border-radius: 2px;
-    font-weight: 300;
-    font-size: 0.9em;
-  }
-
-  details.transparent {
-    background-color: transparent;
-    padding: 0;
-    outline: none;
-  }
+	details {
+		padding: 1em;
+		color: var(--text-color);
+		padding-left: 20px;
+		background-color: #202020;
+		outline: solid 0.1px white;
+		border-radius: 2px;
+		font-weight: 300;
+		font-size: 0.9em;
+	}
 
+	details.transparent {
+		background-color: transparent;
+		padding: 0;
+		outline: none;
+	}
 </style>
diff --git a/packages/ui/src/lib/elements/Float.svelte b/packages/ui/src/lib/Float.svelte
similarity index 97%
rename from packages/ui/src/lib/elements/Float.svelte
rename to packages/ui/src/lib/Float.svelte
index c3d9d66..7435d3a 100644
--- a/packages/ui/src/lib/elements/Float.svelte
+++ b/packages/ui/src/lib/Float.svelte
@@ -4,15 +4,13 @@
 		step?: number;
 		min?: number;
 		max?: number;
-		id?: string;
 	}
 
 	let {
 		value = $bindable(0.5),
 		step = 0.01,
 		min = $bindable(0),
-		max = $bindable(1),
-		id = ''
+		max = $bindable(1)
 	}: Props = $props();
 
 	if (min > max) {
@@ -55,6 +53,7 @@
 		window.addEventListener('mousemove', handleMouseMove);
 		window.addEventListener('mouseup', handleMouseUp);
 		document.body.style.cursor = 'ew-resize';
+		(ev.target as HTMLElement)?.blur();
 	}
 
 	function handleMouseUp() {
@@ -93,6 +92,7 @@
 		} else {
 			value = Math.max(Math.min(min + (max - min) * vx, max), min);
 		}
+		(ev.target as HTMLElement)?.blur();
 	}
 	$effect(() => {
 		if ((value || 0).toString().length > 5) {
@@ -110,7 +110,6 @@
 	<input
 		bind:value
 		bind:this={inputEl}
-		{id}
 		{step}
 		{max}
 		{min}
diff --git a/packages/ui/src/lib/Input.svelte b/packages/ui/src/lib/Input.svelte
index 2e87617..2f3c79d 100644
--- a/packages/ui/src/lib/Input.svelte
+++ b/packages/ui/src/lib/Input.svelte
@@ -1,29 +1,28 @@
 <script lang="ts">
-	import Checkbox from './elements/Checkbox.svelte';
-	import Float from './elements/Float.svelte';
-	import Integer from './elements/Integer.svelte';
-	import Select from './elements/Select.svelte';
+	import Checkbox from './Checkbox.svelte';
+	import Float from './Float.svelte';
+	import Integer from './Integer.svelte';
+	import Select from './Select.svelte';
+	import Vec3 from './Vec3.svelte';
 
 	import type { NodeInput } from '@nodarium/types';
-	import Vec3 from './elements/Vec3.svelte';
 
 	interface Props {
 		input: NodeInput;
 		value: any;
-		id: string;
 	}
 
-	let { input, value = $bindable(), id }: Props = $props();
+	let { input, value = $bindable() }: Props = $props();
 </script>
 
 {#if input.type === 'float'}
-	<Float {id} bind:value min={input?.min} max={input?.max} />
+	<Float bind:value min={input?.min} max={input?.max} />
 {:else if input.type === 'integer'}
-	<Integer {id} bind:value min={input?.min} max={input?.max} />
+	<Integer bind:value min={input?.min} max={input?.max} />
 {:else if input.type === 'boolean'}
-	<Checkbox {id} bind:value />
+	<Checkbox bind:value />
 {:else if input.type === 'select'}
-	<Select {id} bind:value options={input.options} />
+	<Select bind:value options={input.options} />
 {:else if input.type === 'vec3'}
-	<Vec3 {id} bind:value />
+	<Vec3 bind:value />
 {/if}
diff --git a/packages/ui/src/lib/elements/Integer.svelte b/packages/ui/src/lib/Integer.svelte
similarity index 90%
rename from packages/ui/src/lib/elements/Integer.svelte
rename to packages/ui/src/lib/Integer.svelte
index 800115e..3aee680 100644
--- a/packages/ui/src/lib/elements/Integer.svelte
+++ b/packages/ui/src/lib/Integer.svelte
@@ -1,13 +1,10 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-	const dispatch = createEventDispatcher();
-
 	interface Props {
 		min?: number | undefined;
 		max?: number | undefined;
 		step?: number;
 		value?: number;
-		id?: string;
+		onchange?: (value: number) => void;
 	}
 
 	let {
@@ -15,21 +12,21 @@
 		max = undefined,
 		step = 1,
 		value = $bindable(0),
-		id = ''
+		onchange
 	}: Props = $props();
 
 	if (!value) {
 		value = 0;
 	}
 
-	let inputEl: HTMLInputElement | undefined = $state();
-	let wrapper: HTMLDivElement | undefined = $state();
+	let inputEl = $state<HTMLInputElement>();
+	let wrapper = $state<HTMLDivElement>();
 
 	let prev = -1;
 	function update() {
 		if (prev === value) return;
 		prev = value;
-		dispatch('change', parseFloat(value + ''));
+		onchange?.(parseFloat(value + ''));
 	}
 
 	function handleChange(change: number) {
@@ -45,7 +42,7 @@
 
 		downV = value;
 		downX = ev.clientX;
-		rect = wrapper.getBoundingClientRect();
+		rect = wrapper?.getBoundingClientRect()!;
 
 		window.removeEventListener('mousemove', handleMouseMove);
 		window.addEventListener('mousemove', handleMouseMove);
@@ -55,9 +52,9 @@
 
 	function handleMouseUp() {
 		if (downV === value) {
-			inputEl.focus();
+			inputEl?.focus();
 		} else {
-			inputEl.blur();
+			inputEl?.blur();
 		}
 
 		document.body.style.cursor = 'unset';
@@ -100,7 +97,6 @@
 	<input
 		bind:value
 		bind:this={inputEl}
-		{id}
 		{step}
 		{max}
 		{min}
diff --git a/packages/ui/src/lib/elements/Select.svelte b/packages/ui/src/lib/Select.svelte
similarity index 78%
rename from packages/ui/src/lib/elements/Select.svelte
rename to packages/ui/src/lib/Select.svelte
index 39fc11f..4061f97 100644
--- a/packages/ui/src/lib/elements/Select.svelte
+++ b/packages/ui/src/lib/Select.svelte
@@ -2,13 +2,12 @@
 	interface Props {
 		options?: string[];
 		value?: number;
-		id?: string;
 	}
 
-	let { options = [], value = $bindable(0), id = '' }: Props = $props();
+	let { options = [], value = $bindable(0) }: Props = $props();
 </script>
 
-<select {id} bind:value>
+<select bind:value>
 	{#each options as label, i}
 		<option value={i}>{label}</option>
 	{/each}
diff --git a/packages/ui/src/lib/elements/Vec3.svelte b/packages/ui/src/lib/Vec3.svelte
similarity index 75%
rename from packages/ui/src/lib/elements/Vec3.svelte
rename to packages/ui/src/lib/Vec3.svelte
index 37ee12c..99ad327 100644
--- a/packages/ui/src/lib/elements/Vec3.svelte
+++ b/packages/ui/src/lib/Vec3.svelte
@@ -3,16 +3,15 @@
 
 	interface Props {
 		value?: any;
-		id?: string;
 	}
 
-	let { value = $bindable([0, 0, 0]), id = '' }: Props = $props();
+	let { value = $bindable([0, 0, 0]) }: Props = $props();
 </script>
 
 <div>
-	<Float id={`${id}-x`} bind:value={value[0]} />
-	<Float id={`${id}-y`} bind:value={value[1]} />
-	<Float id={`${id}-z`} bind:value={value[2]} />
+	<Float bind:value={value[0]} />
+	<Float bind:value={value[1]} />
+	<Float bind:value={value[2]} />
 </div>
 
 <style>
diff --git a/packages/ui/src/lib/app.css b/packages/ui/src/lib/app.css
index de087f3..3b47db7 100644
--- a/packages/ui/src/lib/app.css
+++ b/packages/ui/src/lib/app.css
@@ -1,3 +1,5 @@
+@import "tailwindcss";
+
 /* fira-code-300 - latin */
 @font-face {
   font-display: swap;
@@ -63,9 +65,6 @@ html {
 }
 
 body {
-  overflow: hidden;
-
-
   color: var(--text-color);
   background-color: var(--layer-0);
 }
diff --git a/packages/ui/src/lib/elements/Checkbox.svelte b/packages/ui/src/lib/elements/Checkbox.svelte
deleted file mode 100644
index 8010391..0000000
--- a/packages/ui/src/lib/elements/Checkbox.svelte
+++ /dev/null
@@ -1,100 +0,0 @@
-<script lang="ts">
-	interface Props {
-		value: boolean;
-		id?: string;
-	}
-
-	let { value = $bindable(false), id = '' }: Props = $props();
-	$effect(() => {
-		if (typeof value === 'string') {
-			value = value === 'true';
-		} else if (typeof value === 'number') {
-			value = value === 1;
-		}
-	});
-</script>
-
-<input {id} type="checkbox" bind:checked={value} />
-<label for={id}>
-	<svg viewBox="0 0 19 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-		<path
-			d="M2 7L7 12L17 2"
-			stroke="currentColor"
-			stroke-width="3"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		/>
-	</svg>
-</label>
-
-<style>
-	input[type='checkbox'] {
-		position: absolute;
-		overflow: hidden;
-		clip: rect(0 0 0 0);
-		height: 1px;
-		width: 1px;
-		margin: -1px;
-		padding: 0;
-		border: 0;
-	}
-	#inputPreview {
-		display: flex;
-		gap: 20px;
-		justify-content: center;
-	}
-	input + label {
-		position: relative;
-		font-size: 14px;
-		cursor: pointer;
-		display: inline-flex;
-		align-items: center;
-		height: 22px;
-		color: rgb(0, 0, 0);
-	}
-	input + label::before {
-		content: ' ';
-		display: inline;
-		vertical-align: middle;
-		margin-right: 3px;
-		width: 22px;
-		height: 22px;
-		background-color: var(--layer-2);
-		border-radius: 5px;
-		border: none;
-		box-shadow: none;
-	}
-	input:checked + label::after {
-		content: ' ';
-		background-repeat: no-repeat;
-		background-size: 12px 12px;
-		background-position: center center;
-		position: absolute;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		margin-left: 0px;
-		left: 0px;
-		top: 0px;
-		text-align: center;
-		background-color: transparent;
-		color: red;
-		font-size: 10px;
-		height: 22px;
-		width: 22px;
-	}
-
-	input + label > svg {
-		position: absolute;
-		display: none;
-		width: 12px;
-		height: 10px;
-		left: 5px;
-		color: var(--text-color);
-		top: 5.9px;
-	}
-
-	input:checked + label > svg {
-		display: block;
-	}
-</style>
diff --git a/packages/ui/src/lib/elements/Float.stories.svelte b/packages/ui/src/lib/elements/Float.stories.svelte
deleted file mode 100644
index 1c5500a..0000000
--- a/packages/ui/src/lib/elements/Float.stories.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import FloatComp from './Float.svelte';
-
-	const { Story } = defineMeta({
-		title: 'Inputs/Float',
-		component: FloatComp
-	});
-</script>
-
-<Story name="Float" />
diff --git a/packages/ui/src/lib/elements/Integer.stories.svelte b/packages/ui/src/lib/elements/Integer.stories.svelte
deleted file mode 100644
index 27f83f8..0000000
--- a/packages/ui/src/lib/elements/Integer.stories.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import IntegerComp from './Integer.svelte';
-
-	const { Story } = defineMeta({
-		title: 'Inputs/Integer',
-		component: IntegerComp
-	});
-</script>
-
-<Story name="Integer" />
diff --git a/packages/ui/src/lib/elements/Select.stories.svelte b/packages/ui/src/lib/elements/Select.stories.svelte
deleted file mode 100644
index e6a0418..0000000
--- a/packages/ui/src/lib/elements/Select.stories.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import SelectComp from '$lib/elements/Select.svelte';
-	const { Story } = defineMeta({
-		title: 'Inputs/Select',
-		component: SelectComp,
-
-		argTypes: {
-			options: {
-				control: {
-					type: 'select'
-				}
-			}
-		},
-		parameters: {
-			actions: {
-				handles: ['change']
-			}
-		}
-	});
-</script>
-
-<Story name="Select" args={{ options: ['strawberry', 'raspberry', 'chickpeas'] }} />
diff --git a/packages/ui/src/lib/elements/Vec3.stories.svelte b/packages/ui/src/lib/elements/Vec3.stories.svelte
deleted file mode 100644
index dc288bf..0000000
--- a/packages/ui/src/lib/elements/Vec3.stories.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Vec3Comp from './Vec3.svelte';
-	const { Story } = defineMeta({
-		title: 'Inputs/Vec3',
-		component: Vec3Comp
-	});
-</script>
-
-<Story name="Vec3" />
diff --git a/packages/ui/src/lib/index.ts b/packages/ui/src/lib/index.ts
index 48684f7..7933ada 100644
--- a/packages/ui/src/lib/index.ts
+++ b/packages/ui/src/lib/index.ts
@@ -1,16 +1,8 @@
-// Reexport your entry components here
-import Input from './Input.svelte';
-
-import Float from "./elements/Float.svelte";
-import Integer from "./elements/Integer.svelte";
-import Select from "./elements/Select.svelte";
-import Checkbox from "./elements/Checkbox.svelte";
-import Details from "./Details.svelte";
-
-export const icons = import.meta.glob('./icons/*.svg?raw', { eager: true })
-
-export { Float, Integer, Select, Checkbox, Input, Details };
-
-export default Input;
-
+export { default as Input } from './Input.svelte';
+export { default as Float } from "./Float.svelte";
+export { default as Integer } from "./Integer.svelte";
+export { default as Vec3 } from "./Vec3.svelte";
+export { default as Select } from "./Select.svelte";
+export { default as Checkbox } from "./Checkbox.svelte";
+export { default as Details } from "./Details.svelte";
 export { default as ShortCut } from "./ShortCut.svelte";
diff --git a/packages/ui/src/routes/+page.svelte b/packages/ui/src/routes/+page.svelte
index c0a6057..ba90229 100644
--- a/packages/ui/src/routes/+page.svelte
+++ b/packages/ui/src/routes/+page.svelte
@@ -1,29 +1,51 @@
 <script lang="ts">
 	import '$lib/app.css';
-	import Float from '$lib/elements/Float.svelte';
-	import Integer from '$lib/elements/Integer.svelte';
-	import Vec3 from '$lib/elements/Vec3.svelte';
+	import { Checkbox, Details, Float, Integer, Select, ShortCut, Vec3 } from '$lib/index.js';
+	import Section from './Section.svelte';
 
 	let intValue = $state(0);
 	let floatValue = $state(0.2);
 	let vecValue = $state([0.2, 0.3, 0.4]);
+	const options = ['strawberry', 'raspberry', 'chickpeas'];
+	let selectValue = $state(0);
+	const d = $derived(options[selectValue]);
+
+	let checked = $state(false);
+	let detailsOpen = $state(false);
 </script>
 
-<main>
-	<section>
-		<h3>Integer {intValue}</h3>
+<main class="flex flex-col gap-8 py-8">
+	<h1 class="text-4xl">@nodarium/ui</h1>
+
+	<Section title="Integer" value={intValue}>
 		<Integer bind:value={intValue} />
-	</section>
+	</Section>
 
-	<section>
-		<h3>Float {floatValue}</h3>
+	<Section title="Float" value={floatValue}>
 		<Float bind:value={floatValue} />
-	</section>
+	</Section>
 
-	<section>
-		<h3>Vec3 {JSON.stringify(vecValue)}</h3>
+	<Section title="Vec3" value={JSON.stringify(vecValue)}>
 		<Vec3 bind:value={vecValue} />
-	</section>
+	</Section>
+
+	<Section title="Select" value={d}>
+		<Select bind:value={selectValue} {options} />
+	</Section>
+
+	<Section title="Checkbox" value={checked}>
+		<Checkbox bind:value={checked} />
+	</Section>
+
+	<Section title="Details" value={detailsOpen}>
+		<Details title="More Information" bind:open={detailsOpen}>
+			<p>Here is some more information that was previously hidden.</p>
+		</Details>
+	</Section>
+
+	<Section title="Shortcut">
+		<ShortCut ctrl key="S" />
+	</Section>
 </main>
 
 <style>
diff --git a/packages/ui/src/routes/Section.svelte b/packages/ui/src/routes/Section.svelte
new file mode 100644
index 0000000..afd61ea
--- /dev/null
+++ b/packages/ui/src/routes/Section.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { type Snippet } from 'svelte';
+	let { title, value, children } = $props<{
+		title?: string;
+		value?: unknown;
+		children?: Snippet;
+	}>();
+</script>
+
+<section class="border border-1/2 mb-4 p-4 flex flex-col gap-4">
+	<h3 class="flex gap-2 font-bold">
+		{title}
+		<p class="font-normal! opacity-50!">{value}</p>
+	</h3>
+	<div>
+		{@render children()}
+	</div>
+</section>
diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
index 0131ff9..b55cac6 100644
--- a/packages/ui/vite.config.ts
+++ b/packages/ui/vite.config.ts
@@ -1,8 +1,9 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vitest/config';
+import tailwindcss from '@tailwindcss/vite'
 
 export default defineConfig({
-  plugins: [sveltekit()],
+  plugins: [tailwindcss(), sveltekit()],
   test: {
     include: ['src/**/*.{test,spec}.{js,ts}']
   }