diff --git a/app/src/lib/sidebar/panels/BenchmarkPanel.svelte b/app/src/lib/sidebar/panels/BenchmarkPanel.svelte
index 50c929e..06e9123 100644
--- a/app/src/lib/sidebar/panels/BenchmarkPanel.svelte
+++ b/app/src/lib/sidebar/panels/BenchmarkPanel.svelte
@@ -5,11 +5,11 @@
 </script>
 
 <script lang="ts">
-  import { Integer } from "@nodarium/ui";
-  import { writable } from "svelte/store";
   import { humanizeDuration } from "$lib/helpers";
-  import Monitor from "$lib/performance/Monitor.svelte";
   import { localState } from "$lib/helpers/localState.svelte";
+  import Monitor from "$lib/performance/Monitor.svelte";
+  import { Number } from "@nodarium/ui";
+  import { writable } from "svelte/store";
 
   function calculateStandardDeviation(array: number[]) {
     const n = array.length;
@@ -124,7 +124,7 @@
     >
   {:else}
     <label for="bench-samples">Samples</label>
-    <Integer id="bench-sample" bind:value={amount.value} max={1000} />
+    <Number id="bench-sample" bind:value={amount.value} max={1000} />
     <button onclick={benchmark} disabled={isRunning}> start </button>
   {/if}
 </div>
diff --git a/packages/ui/src/lib/index.ts b/packages/ui/src/lib/index.ts
index 4f200e7..d0eb412 100644
--- a/packages/ui/src/lib/index.ts
+++ b/packages/ui/src/lib/index.ts
@@ -1,12 +1,13 @@
-export { default as Input } from "./Input.svelte"
-export { default as Float } from "./inputs/Float.svelte"
-export { default as Integer } from "./inputs/Integer.svelte"
-export { default as Select } from "./inputs/Select.svelte"
-export { default as Checkbox } from "./inputs/Checkbox.svelte"
-export { default as Vec3 } from "./inputs/Vec3.svelte";
+export { default as Input } from './Input.svelte';
+export { default as Checkbox } from './inputs/Checkbox.svelte';
+export { default as Float } from './inputs/Float.svelte';
+export { default as Integer } from './inputs/Integer.svelte';
+export { default as Number } from './inputs/Number.svelte';
+export { default as Select } from './inputs/Select.svelte';
+export { default as Vec3 } from './inputs/Vec3.svelte';
 
-export { default as Details } from "./Details.svelte"
-export { default as ShortCut } from "./ShortCut.svelte";
+export { default as Details } from './Details.svelte';
+export { default as ShortCut } from './ShortCut.svelte';
 
 import Input from './Input.svelte';
 export default Input;
diff --git a/packages/ui/src/lib/inputs/Vec3.svelte b/packages/ui/src/lib/inputs/Vec3.svelte
index 37ee12c..690bc7d 100644
--- a/packages/ui/src/lib/inputs/Vec3.svelte
+++ b/packages/ui/src/lib/inputs/Vec3.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Float from './Float.svelte';
+	import Number from './Number.svelte';
 
 	interface Props {
 		value?: any;
@@ -10,9 +10,9 @@
 </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]} />
+	<Number id={`${id}-x`} bind:value={value[0]} step={0.01} />
+	<Number id={`${id}-y`} bind:value={value[1]} step={0.01} />
+	<Number id={`${id}-z`} bind:value={value[2]} step={0.01} />
 </div>
 
 <style>
diff --git a/packages/ui/src/routes/+page.svelte b/packages/ui/src/routes/+page.svelte
index ab0cda9..2e1826e 100644
--- a/packages/ui/src/routes/+page.svelte
+++ b/packages/ui/src/routes/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import '$lib/app.css';
-	import { Checkbox, Details, Float, Integer, Select, ShortCut, Vec3 } from '$lib/index.js';
+	import { Checkbox, Details, Float, Integer, Number, Select, ShortCut, Vec3 } from '$lib/index.js';
 	import Section from './Section.svelte';
 
 	let intValue = $state(0);
@@ -38,6 +38,14 @@
 		<Float bind:value={floatValue} />
 	</Section>
 
+	<Section title="Number" value={intValue}>
+		<Number bind:value={intValue} />
+	</Section>
+
+	<Section title="Number (float)" value={floatValue}>
+		<Number bind:value={floatValue} />
+	</Section>
+
 	<Section title="Vec3" value={JSON.stringify(vecValue)}>
 		<Vec3 bind:value={vecValue} />
 	</Section>