diff --git a/package.json b/package.json
index 24ed7c2..50d0077 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,9 @@
   "name": "@atlas/monorepo",
   "version": "1.0.0",
   "type": "module",
+  "workspaces": [
+    "packages/svelte-components"
+  ],
   "devDependencies": {
     "@types/bun": "latest"
   }
diff --git a/packages/svelte-components/.gitignore b/packages/svelte-components/.gitignore
new file mode 100644
index 0000000..8ae5618
--- /dev/null
+++ b/packages/svelte-components/.gitignore
@@ -0,0 +1,183 @@
+# Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# Logs
+
+logs
+_.log
+npm-debug.log_
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Caches
+
+.cache
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# Runtime data
+
+pids
+_.pid
+_.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+
+lib-cov
+
+# Coverage directory used by tools like istanbul
+
+coverage
+*.lcov
+
+# nyc test coverage
+
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+
+bower_components
+
+# node-waf configuration
+
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+
+build/Release
+
+# Dependency directories
+
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+
+web_modules/
+
+# TypeScript cache
+
+*.tsbuildinfo
+
+# Optional npm cache directory
+
+.npm
+
+# Optional eslint cache
+
+.eslintcache
+
+# Optional stylelint cache
+
+.stylelintcache
+
+# Microbundle cache
+
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+
+.node_repl_history
+
+# Output of 'npm pack'
+
+*.tgz
+
+# Yarn Integrity file
+
+.yarn-integrity
+
+# dotenv environment variable files
+
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+
+.parcel-cache
+
+# Next.js build output
+
+.next
+out
+
+# Nuxt.js build / generate output
+
+.nuxt
+dist
+
+# Gatsby files
+
+# Comment in the public line in if your project uses Gatsby and not Next.js
+
+# https://nextjs.org/blog/next-9-1#public-directory-support
+
+# public
+
+# vuepress build output
+
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+
+.temp
+
+# Docusaurus cache and generated files
+
+.docusaurus
+
+# Serverless directories
+
+.serverless/
+
+# FuseBox cache
+
+.fusebox/
+
+# DynamoDB Local files
+
+.dynamodb/
+
+# TernJS port file
+
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+
+.vscode-test
+
+# yarn v2
+
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# IntelliJ based IDEs
+.idea
+
+# Finder (MacOS) folder config
+.DS_Store
diff --git a/packages/svelte-components/README.md b/packages/svelte-components/README.md
new file mode 100644
index 0000000..54b3057
--- /dev/null
+++ b/packages/svelte-components/README.md
@@ -0,0 +1,15 @@
+# svelte-components
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run index.ts
+```
+
+This project was created using `bun init` in bun v1.2.0. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.
diff --git a/packages/svelte-components/bun.lock b/packages/svelte-components/bun.lock
new file mode 100644
index 0000000..53b02fd
--- /dev/null
+++ b/packages/svelte-components/bun.lock
@@ -0,0 +1,27 @@
+{
+  "lockfileVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "svelte-components",
+      "devDependencies": {
+        "@types/bun": "latest",
+      },
+      "peerDependencies": {
+        "typescript": "^5.0.0",
+      },
+    },
+  },
+  "packages": {
+    "@types/bun": ["@types/bun@1.2.4", "", { "dependencies": { "bun-types": "1.2.4" } }, "sha512-QtuV5OMR8/rdKJs213iwXDpfVvnskPXY/S0ZiFbsTjQZycuqPbMW8Gf/XhLfwE5njW8sxI2WjISURXPlHypMFA=="],
+
+    "@types/node": ["@types/node@22.13.9", "", { "dependencies": { "undici-types": "~6.20.0" } }, "sha512-acBjXdRJ3A6Pb3tqnw9HZmyR3Fiol3aGxRCK1x3d+6CDAMjl7I649wpSd+yNURCjbOUGu9tqtLKnTGxmK6CyGw=="],
+
+    "@types/ws": ["@types/ws@8.5.14", "", { "dependencies": { "@types/node": "*" } }, "sha512-bd/YFLW+URhBzMXurx7lWByOu+xzU9+kb3RboOteXYDfW+tr+JZa99OyNmPINEGB/ahzKrEuc8rcv4gnpJmxTw=="],
+
+    "bun-types": ["bun-types@1.2.4", "", { "dependencies": { "@types/node": "*", "@types/ws": "~8.5.10" } }, "sha512-nDPymR207ZZEoWD4AavvEaa/KZe/qlrbMSchqpQwovPZCKc7pwMoENjEtHgMKaAjJhy+x6vfqSBA1QU3bJgs0Q=="],
+
+    "typescript": ["typescript@5.8.2", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ=="],
+
+    "undici-types": ["undici-types@6.20.0", "", {}, "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg=="],
+  }
+}
diff --git a/packages/svelte-components/package.json b/packages/svelte-components/package.json
new file mode 100644
index 0000000..f1c07f4
--- /dev/null
+++ b/packages/svelte-components/package.json
@@ -0,0 +1,54 @@
+{
+	"name": "@atlas/svelte",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"types": "./dist/index.d.ts",
+	"files": [
+		"!dist/**/*.spec.*",
+		"!dist/**/*.test.*",
+		"dist"
+	],
+	"scripts": {
+		"package": "svelte-kit sync && svelte-package",
+		"prepublishOnly": "bun package"
+	},
+	"devDependencies": {
+		"@storybook/addon-essentials": "^8.5.0",
+		"@storybook/addon-interactions": "^8.5.0",
+		"@storybook/addon-styling-webpack": "^1.0.1",
+		"@storybook/addon-svelte-csf": "^5.0.0-next.13",
+		"@storybook/addon-themes": "^8.5.0",
+		"@storybook/blocks": "^8.5.0",
+		"@storybook/svelte": "^8.5.0",
+		"@storybook/sveltekit": "^8.5.0",
+		"@storybook/test": "^8.5.0",
+		"@sveltejs/kit": "^2.15.2",
+		"@sveltejs/package": "^2.3.9",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@types/bun": "latest",
+		"eslint": "^9.7.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.36.0",
+		"prettier": "^3.3.2",
+		"prettier-plugin-svelte": "^3.2.6",
+		"prettier-plugin-tailwindcss": "^0.6.5",
+		"storybook": "^8.5.0",
+		"svelte-check": "^4.0.0",
+		"typescript": "^5.8.2",
+		"vite": "^6.0.7"
+	},
+	"dependencies": {
+		"tailwind-merge": "^2.5.5"
+	},
+	"peerDependencies": {
+		"clsx": "^2.1.1",
+		"daisyui": "^4.12.22",
+		"svelte": "^5.0.0",
+		"tailwindcss": "^3.4.9"
+	}
+}
diff --git a/packages/svelte-components/postcss.config.js b/packages/svelte-components/postcss.config.js
new file mode 100644
index 0000000..5b756c1
--- /dev/null
+++ b/packages/svelte-components/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+};
\ No newline at end of file
diff --git a/packages/svelte-components/src/lib/Actions/Button.stories.svelte b/packages/svelte-components/src/lib/Actions/Button.stories.svelte
new file mode 100644
index 0000000..4d8be63
--- /dev/null
+++ b/packages/svelte-components/src/lib/Actions/Button.stories.svelte
@@ -0,0 +1,53 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { fn } from '@storybook/test';
+	import type { ComponentProps } from 'svelte';
+	import Button from './Button.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Actions/Button',
+		component: Button,
+		args: {
+			onclick: fn(),
+		},
+		argTypes: {
+			active: { control: 'boolean' },
+			animation: { control: 'boolean' },
+			block: { control: 'boolean' },
+			color: {
+				control: 'select',
+				options: [
+					'neutral',
+					'primary',
+					'secondary',
+					'accent',
+					'ghost',
+					'info',
+					'success',
+					'warning',
+					'error',
+				],
+			},
+			disabled: { control: 'boolean' },
+			full: { control: 'boolean' },
+			glass: { control: 'boolean' },
+			shape: {
+				control: 'select',
+				options: ['circle', 'square'],
+			},
+			size: {
+				control: 'select',
+				options: ['xs', 'sm', '-', 'lg'],
+				defaultValue: 'Default',
+			},
+			variant: { control: 'select', options: ['link', 'outline'] },
+			wide: { control: 'boolean' },
+		},
+	});
+</script>
+
+{#snippet template({ children: _, ...props }: Partial<ComponentProps<typeof Button>>)}
+	<Button {...props}>Button</Button>
+{/snippet}
+
+<Story name="Default" args={{}} children={template} />
diff --git a/packages/svelte-components/src/lib/Actions/Button.svelte b/packages/svelte-components/src/lib/Actions/Button.svelte
new file mode 100644
index 0000000..bf582b8
--- /dev/null
+++ b/packages/svelte-components/src/lib/Actions/Button.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+	import type { DaisyColor, DaisySize } from '$lib/types';
+	import clsx from 'clsx';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
+
+	type Props = {
+		active?: boolean;
+		animation?: boolean;
+		block?: boolean;
+		color?: DaisyColor;
+		full?: boolean;
+		glass?: boolean;
+		shape?: 'circle' | 'square';
+		size?: DaisySize;
+		variant?: 'link' | 'outline';
+		wide?: boolean;
+	} & SvelteHTMLElements['button'];
+
+	let {
+		active = false,
+		animation = true,
+		block = false,
+		children,
+		class: className,
+		color,
+		full = false,
+		glass = false,
+		shape,
+		size,
+		wide = false,
+		variant,
+		...props
+	}: Props = $props();
+</script>
+
+<button
+	{...props}
+	class={twMerge('btn', clsx(className))}
+	class:btn-active={active}
+	class:no-animation={!animation}
+	class:btn-block={block}
+	class:btn-neutral={color === 'neutral'}
+	class:btn-primary={color === 'primary'}
+	class:btn-secondary={color === 'secondary'}
+	class:btn-accent={color === 'accent'}
+	class:btn-ghost={color === 'ghost'}
+	class:btn-info={color === 'info'}
+	class:btn-success={color === 'success'}
+	class:btn-warning={color === 'warning'}
+	class:btn-error={color === 'error'}
+	class:btn-disabled={props.disabled}
+	class:w-full={full}
+	class:glass
+	class:btn-circle={shape === 'circle'}
+	class:btn-square={shape === 'square'}
+	class:btn-xs={size === 'xs'}
+	class:btn-sm={size === 'sm'}
+	class:btn-lg={size === 'lg'}
+	class:btn-link={variant === 'link'}
+	class:btn-outline={variant === 'outline'}
+	class:btn-wide={wide}
+>
+	{@render children?.()}
+</button>
+
+<style></style>
diff --git a/packages/svelte-components/src/lib/Actions/Modal/Modal.stories.svelte b/packages/svelte-components/src/lib/Actions/Modal/Modal.stories.svelte
new file mode 100644
index 0000000..13decdb
--- /dev/null
+++ b/packages/svelte-components/src/lib/Actions/Modal/Modal.stories.svelte
@@ -0,0 +1,36 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import type { ComponentProps } from 'svelte';
+	import Modal from './Modal.svelte';
+	import ModalBody from './ModalBody.svelte';
+	import ModalActions from './ModalActions.svelte';
+	import Button from '../Button.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Actions/Modal',
+		component: Modal,
+		argTypes: {
+			open: {
+				control: 'boolean',
+				defaultValue: false,
+			},
+		},
+	});
+
+	let dialog: HTMLDialogElement | undefined = $state(undefined);
+</script>
+
+{#snippet template({ children: _, ...props }: Partial<ComponentProps<typeof Modal>>)}
+	<Button onclick={() => dialog?.showModal()}>Open</Button>
+	<Modal {...props} backdrop bind:dialog>
+		<ModalBody>
+			<h3 class="text-lg font-bold">Hello!</h3>
+			<p class="py-4">Press ESC key or click the button below to close</p>
+			<ModalActions>
+				<Button onclick={() => dialog?.close()}>Close</Button>
+			</ModalActions>
+		</ModalBody>
+	</Modal>
+{/snippet}
+
+<Story name="Default" children={template} />
diff --git a/packages/svelte-components/src/lib/Actions/Modal/Modal.svelte b/packages/svelte-components/src/lib/Actions/Modal/Modal.svelte
new file mode 100644
index 0000000..0e71dfb
--- /dev/null
+++ b/packages/svelte-components/src/lib/Actions/Modal/Modal.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import clsx from 'clsx';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
+
+	type Props = SvelteHTMLElements['dialog'] & {
+		backdrop?: boolean;
+		dialog?: HTMLDialogElement;
+	};
+
+	let { backdrop, dialog = $bindable(), children, class: className, ...props }: Props = $props();
+</script>
+
+<dialog {...props} class={twMerge('modal', clsx(className))} bind:this={dialog}>
+	{@render children?.()}
+	{#if backdrop}
+		<form method="dialog" class="modal-backdrop">
+			<button>close</button>
+		</form>
+	{/if}
+</dialog>
diff --git a/packages/svelte-components/src/lib/Actions/Modal/ModalActions.svelte b/packages/svelte-components/src/lib/Actions/Modal/ModalActions.svelte
new file mode 100644
index 0000000..05a6fc7
--- /dev/null
+++ b/packages/svelte-components/src/lib/Actions/Modal/ModalActions.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import clsx from 'clsx';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
+
+	type Props = SvelteHTMLElements['div'];
+
+	let { children, class: className, ...props }: Props = $props();
+</script>
+
+<div {...props} class={twMerge('modal-action', clsx(className))}>
+	{@render children?.()}
+</div>
diff --git a/packages/svelte-components/src/lib/Actions/Modal/ModalBody.svelte b/packages/svelte-components/src/lib/Actions/Modal/ModalBody.svelte
new file mode 100644
index 0000000..cd2b785
--- /dev/null
+++ b/packages/svelte-components/src/lib/Actions/Modal/ModalBody.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import clsx from 'clsx';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
+
+	type Props = SvelteHTMLElements['div'];
+
+	let { children, class: className, ...props }: Props = $props();
+</script>
+
+<div {...props} class={twMerge('modal-box', clsx(className))}>
+	{@render children?.()}
+</div>
diff --git a/packages/svelte-components/src/lib/Actions/Modal/index.ts b/packages/svelte-components/src/lib/Actions/Modal/index.ts
new file mode 100644
index 0000000..b23d2e1
--- /dev/null
+++ b/packages/svelte-components/src/lib/Actions/Modal/index.ts
@@ -0,0 +1,3 @@
+export { default as Modal } from './Modal.svelte';
+export { default as ModalActions } from './ModalActions.svelte';
+export { default as ModalBody } from './ModalBody.svelte';
diff --git a/packages/svelte-components/src/lib/Actions/index.ts b/packages/svelte-components/src/lib/Actions/index.ts
new file mode 100644
index 0000000..cc6d312
--- /dev/null
+++ b/packages/svelte-components/src/lib/Actions/index.ts
@@ -0,0 +1,2 @@
+export { default as Button } from './Button.svelte';
+export * from './Modal/';
diff --git a/packages/svelte-components/src/lib/DataInput/TextInput.stories.svelte b/packages/svelte-components/src/lib/DataInput/TextInput.stories.svelte
new file mode 100644
index 0000000..916fcc4
--- /dev/null
+++ b/packages/svelte-components/src/lib/DataInput/TextInput.stories.svelte
@@ -0,0 +1,63 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import TextInput from './TextInput.svelte';
+	import { User } from 'lucide-svelte';
+
+	const { Story } = defineMeta({
+		title: 'Data Input/Text Input',
+		component: TextInput,
+		argTypes: {
+			bordered: {
+				control: 'boolean',
+			},
+			color: {
+				control: 'select',
+				options: [
+					'ghost',
+					'primary',
+					'secondary',
+					'accent',
+					'info',
+					'success',
+					'warning',
+					'error',
+				],
+			},
+			disabled: {
+				control: 'boolean',
+			},
+			error: {
+				control: 'text',
+			},
+			fade: { control: 'boolean' },
+			start: { control: 'text' },
+			end: { control: 'text' },
+			label: { control: 'text' },
+			placeholder: { control: 'text' },
+			size: {
+				control: 'select',
+				options: ['xs', 'sm', '-', 'lg'],
+			},
+			type: {
+				control: 'select',
+				options: ['email', 'password', 'search', 'tel', 'text', 'url'],
+			},
+		},
+	});
+</script>
+
+<Story name="Text Label" args={{ color: 'primary', name: 'text', start: 'Text' }} />
+<Story name="Icon Start">
+	<TextInput name="text" color="secondary">
+		{#snippet start()}
+			<User />
+		{/snippet}
+	</TextInput>
+</Story>
+<Story name="Icon End">
+	<TextInput name="text" color="secondary">
+		{#snippet end()}
+			<User />
+		{/snippet}
+	</TextInput>
+</Story>
diff --git a/packages/svelte-components/src/lib/DataInput/TextInput.svelte b/packages/svelte-components/src/lib/DataInput/TextInput.svelte
new file mode 100644
index 0000000..e148b5b
--- /dev/null
+++ b/packages/svelte-components/src/lib/DataInput/TextInput.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+	import type { DaisyColor, DaisySize } from '$lib/types';
+	import clsx from 'clsx';
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputTypeAttribute, SvelteHTMLElements } from 'svelte/elements';
+	import { fade as fadeTransition } from 'svelte/transition';
+	import { twMerge } from 'tailwind-merge';
+
+	type Props = {
+		bordered?: boolean;
+		color?: Exclude<DaisyColor, 'neutral'>;
+		error?: string | Snippet;
+		fade?: boolean;
+		start?: string | Snippet;
+		end?: string | Snippet;
+		label?: string | Snippet;
+		size?: DaisySize;
+		type?: Extract<
+			HTMLInputTypeAttribute,
+			'email' | 'password' | 'search' | 'tel' | 'text' | 'url'
+		>;
+	} & Omit<SvelteHTMLElements['input'], 'type'>;
+
+	let {
+		bordered = false,
+		class: className,
+		color,
+		error,
+		fade,
+		start,
+		end,
+		label,
+		size,
+		...props
+	}: Props = $props();
+</script>
+
+<label class="form-control w-full" transition:fadeTransition={{ duration: fade ? 200 : 0 }}>
+	<div class="label">
+		<span
+			class="label-text flex items-center gap-2"
+			class:text-primary={color === 'primary'}
+			class:text-secondary={color === 'secondary'}
+			class:text-accent={color === 'accent'}
+			class:text-info={color === 'info'}
+			class:text-success={color === 'success'}
+			class:text-warning={color === 'warning'}
+			class:text-error={color === 'error' || error}
+		>
+			{#if typeof label === 'string'}
+				{label}
+			{:else if label}
+				{@render label()}
+			{/if}
+		</span>
+		<span class="label-text-alt font-semibold text-error">
+			{#if typeof error === 'string'}
+				{error}
+			{:else if error}
+				{@render error()}
+			{/if}
+		</span>
+	</div>
+	<div
+		class="input flex w-full items-center gap-2"
+		class:input-bordered={bordered}
+		class:input-xs={size === 'xs'}
+		class:input-sm={size === 'sm'}
+		class:input-lg={size === 'lg'}
+		class:input-primary={color === 'primary'}
+		class:input-secondary={color === 'secondary'}
+		class:input-accent={color === 'accent'}
+		class:input-ghost={color === 'ghost'}
+		class:input-info={color === 'info'}
+		class:input-success={color === 'success'}
+		class:input-warning={color === 'warning'}
+		class:input-error={color === 'error' || error}
+	>
+		{#if typeof start === 'string'}
+			{start}
+		{:else}
+			{@render start?.()}
+		{/if}
+		<input {...props} class={twMerge('grow', clsx(className))} />
+		{#if typeof end === 'string'}
+			{end}
+		{:else}
+			{@render end?.()}
+		{/if}
+	</div>
+</label>
diff --git a/packages/svelte-components/src/lib/DataInput/Textarea.stories.svelte b/packages/svelte-components/src/lib/DataInput/Textarea.stories.svelte
new file mode 100644
index 0000000..8aa4d9b
--- /dev/null
+++ b/packages/svelte-components/src/lib/DataInput/Textarea.stories.svelte
@@ -0,0 +1,51 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Textarea from './Textarea.svelte';
+	import type { ComponentProps } from 'svelte';
+
+	const { Story } = defineMeta({
+		title: 'Data Input/Textarea',
+		component: Textarea,
+		argTypes: {
+			bordered: {
+				control: 'boolean',
+			},
+			color: {
+				control: 'select',
+				options: [
+					'default',
+					'ghost',
+					'primary',
+					'secondary',
+					'accent',
+					'info',
+					'success',
+					'warning',
+					'error',
+				],
+			},
+			disabled: {
+				control: 'boolean',
+			},
+			error: {
+				control: 'text',
+			},
+			label: {
+				control: 'text',
+			},
+			placeholder: {
+				control: 'text',
+			},
+			size: {
+				control: 'select',
+				options: ['xs', 'sm', '-', 'lg'],
+			},
+		},
+	});
+</script>
+
+{#snippet template(props: ComponentProps<typeof Textarea>)}
+	<Textarea {...props} />
+{/snippet}
+
+<Story name="Default" args={{ label: 'Label' }} children={template} />
diff --git a/packages/svelte-components/src/lib/DataInput/Textarea.svelte b/packages/svelte-components/src/lib/DataInput/Textarea.svelte
new file mode 100644
index 0000000..27ac120
--- /dev/null
+++ b/packages/svelte-components/src/lib/DataInput/Textarea.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+	import type { DaisyColor, DaisySize } from '$lib/types';
+	import clsx from 'clsx';
+	import type { Snippet } from 'svelte';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
+
+	type Props = {
+		bordered?: boolean;
+		color?: Omit<DaisyColor, 'neutral'>;
+		error?: string | Snippet;
+		label?: string | Snippet;
+		resizable?: boolean | 'yes' | 'no' | 'x' | 'y';
+		size?: DaisySize | 'md';
+	} & SvelteHTMLElements['textarea'];
+	let {
+		bordered,
+		class: className,
+		color,
+		error,
+		label,
+		resizable,
+		size,
+		...props
+	}: Props = $props();
+</script>
+
+<label class="form-control w-full">
+	<div class="label">
+		<span
+			class="label-text flex items-center gap-2"
+			class:text-primary={color === 'primary'}
+			class:text-secondary={color === 'secondary'}
+			class:text-accent={color === 'accent'}
+			class:text-info={color === 'info'}
+			class:text-success={color === 'success'}
+			class:text-warning={color === 'warning'}
+			class:text-error={color === 'error' || error}
+		>
+			{#if typeof label === 'string'}
+				{label}
+			{:else if label}
+				{@render label()}
+			{/if}
+		</span>
+		<span class="label-text-alt font-semibold text-error">
+			{#if typeof error === 'string'}
+				{error}
+			{:else if error}
+				{@render error()}
+			{/if}
+		</span>
+	</div>
+	<textarea
+		{...props}
+		class={twMerge('textarea', clsx(className))}
+		class:textarea-bordered={bordered}
+		class:textarea-xs={size === 'xs'}
+		class:textarea-sm={size === 'sm'}
+		class:textarea-lg={size === 'lg'}
+		class:textarea-ghost={color === 'ghost'}
+		class:textarea-primary={color === 'primary'}
+		class:textarea-secondary={color === 'secondary'}
+		class:textarea-accent={color === 'accent'}
+		class:textarea-info={color === 'info'}
+		class:textarea-success={color === 'success'}
+		class:textarea-warning={color === 'warning'}
+		class:textarea-error={color === 'error' || error}
+		class:resize={resizable === true || resizable === 'yes'}
+		class:resize-x={resizable === 'x'}
+		class:resize-y={resizable === 'y'}
+		class:resize-none={resizable === false || resizable === 'no'}
+	></textarea>
+</label>
diff --git a/packages/svelte-components/src/lib/DataInput/index.ts b/packages/svelte-components/src/lib/DataInput/index.ts
new file mode 100644
index 0000000..e678a3a
--- /dev/null
+++ b/packages/svelte-components/src/lib/DataInput/index.ts
@@ -0,0 +1,2 @@
+export { default as Textarea } from './Textarea.svelte';
+export { default as TextInput } from './TextInput.svelte';
diff --git a/packages/svelte-components/src/lib/Datadisplay/Avatar.stories.svelte b/packages/svelte-components/src/lib/Datadisplay/Avatar.stories.svelte
new file mode 100644
index 0000000..f76fa80
--- /dev/null
+++ b/packages/svelte-components/src/lib/Datadisplay/Avatar.stories.svelte
@@ -0,0 +1,51 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Avatar from './Avatar.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Data display/Avatar',
+		component: Avatar,
+		argTypes: {
+			img: {
+				control: 'text',
+			},
+			placeholder: {
+				control: 'text',
+				defaultValue: 'DP',
+			},
+			presence: {
+				control: 'select',
+				options: [undefined, 'online', 'offline'],
+			},
+			ring: {
+				control: 'select',
+				options: [
+					undefined,
+					'neutral',
+					'primary',
+					'secondary',
+					'accent',
+					'info',
+					'success',
+					'warning',
+					'error',
+				],
+			},
+			shape: {
+				control: 'select',
+				options: ['square', 'circle'],
+			},
+			size: {
+				control: 'select',
+				options: ['xs', 'sm', 'md', 'lg'],
+			},
+		},
+	});
+</script>
+
+<Story
+	name="Default"
+	args={{
+		img: 'https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp',
+	}}
+/>
diff --git a/packages/svelte-components/src/lib/Datadisplay/Avatar.svelte b/packages/svelte-components/src/lib/Datadisplay/Avatar.svelte
new file mode 100644
index 0000000..56b314c
--- /dev/null
+++ b/packages/svelte-components/src/lib/Datadisplay/Avatar.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { DaisyColor, DaisySize } from '$lib/types';
+	import clsx from 'clsx';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
+
+	type Props = {
+		img?: string;
+		placeholder: string;
+		presence?: 'online' | 'offline';
+		ring?: Exclude<DaisyColor, 'ghost'>;
+		shape?: 'square' | 'circle';
+		size?: DaisySize | 'md';
+	} & Omit<SvelteHTMLElements['div'], 'children'>;
+
+	let {
+		class: className,
+		img,
+		placeholder,
+		presence,
+		ring,
+		shape = 'circle',
+		size = 'md',
+		...props
+	}: Props = $props();
+</script>
+
+<div {...props} class={twMerge('avatar', presence, clsx(className))} class:placeholder>
+	<div
+		class={twMerge(
+			'rounded-xl',
+			clsx({
+				'rounded-xl': shape === 'square',
+				'rounded-full': shape === 'circle',
+				'w-12': size === 'xs',
+				'w-16': size === 'sm',
+				'w-20': size === 'md',
+				'w-32': size === 'lg',
+				'avatar-ring ring ring-offset-2 ring-offset-base-100': !!ring,
+			})
+		)}
+		class:bg-neutral={placeholder}
+		class:ring-neutral={ring === 'neutral'}
+		class:ring-primary={ring === 'primary'}
+		class:ring-secondary={ring === 'secondary'}
+		class:ring-accent={ring === 'accent'}
+		class:ring-info={ring === 'info'}
+		class:ring-success={ring === 'success'}
+		class:ring-warning={ring === 'warning'}
+		class:ring-error={ring === 'error'}
+	>
+		{#if img}
+			<img src={img} alt={placeholder} />
+		{:else}
+			<span
+				class:text-3xl={size === 'lg'}
+				class:text-xl={size === 'md'}
+				class:text-xs={size === 'xs'}>{placeholder}</span
+			>
+		{/if}
+	</div>
+</div>
diff --git a/packages/svelte-components/src/lib/Datadisplay/index.ts b/packages/svelte-components/src/lib/Datadisplay/index.ts
new file mode 100644
index 0000000..ee5c3d9
--- /dev/null
+++ b/packages/svelte-components/src/lib/Datadisplay/index.ts
@@ -0,0 +1 @@
+export { default as Avatar } from './Avatar.svelte';
diff --git a/packages/svelte-components/src/lib/Feedback/Alert.stories.svelte b/packages/svelte-components/src/lib/Feedback/Alert.stories.svelte
new file mode 100644
index 0000000..4915e29
--- /dev/null
+++ b/packages/svelte-components/src/lib/Feedback/Alert.stories.svelte
@@ -0,0 +1,25 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Info } from 'lucide-svelte';
+	import type { ComponentProps } from 'svelte';
+	import Alert from './Alert.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Feedback/Alert',
+		component: Alert,
+		argTypes: {
+			status: { control: 'select', options: ['info', 'success', 'warning', 'error'] },
+		},
+	});
+</script>
+
+{#snippet template(props: ComponentProps<typeof Alert>)}
+	<Alert {...props}>
+		{#snippet icon()}
+			<Info />
+		{/snippet}
+		<span>Hello world!</span>
+	</Alert>
+{/snippet}
+
+<Story name="Default" args={{}} children={template} />
diff --git a/packages/svelte-components/src/lib/Feedback/Alert.svelte b/packages/svelte-components/src/lib/Feedback/Alert.svelte
new file mode 100644
index 0000000..8073802
--- /dev/null
+++ b/packages/svelte-components/src/lib/Feedback/Alert.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { DaisyColor } from '$lib/types';
+	import clsx from 'clsx';
+	import type { Snippet } from 'svelte';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
+
+	type Props = {
+		children?: Snippet;
+		icon?: Snippet;
+		status?: Extract<DaisyColor, 'info' | 'success' | 'warning' | 'error'>;
+	} & SvelteHTMLElements['div'];
+
+	let { children, class: className, icon, status: color, ...props }: Props = $props();
+</script>
+
+<div
+	{...props}
+	role="alert"
+	class={twMerge('alert', clsx(className))}
+	class:alert-info={color === 'info'}
+	class:alert-success={color === 'success'}
+	class:alert-warning={color === 'warning'}
+	class:alert-error={color === 'error'}
+>
+	{@render icon?.()}
+	{@render children?.()}
+</div>
diff --git a/packages/svelte-components/src/lib/Feedback/Loader.stories.svelte b/packages/svelte-components/src/lib/Feedback/Loader.stories.svelte
new file mode 100644
index 0000000..226cba1
--- /dev/null
+++ b/packages/svelte-components/src/lib/Feedback/Loader.stories.svelte
@@ -0,0 +1,11 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Loader from './Loader.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Feedback/Loader',
+		component: Loader,
+	});
+</script>
+
+<Story name="Default" args={{}} />
diff --git a/packages/svelte-components/src/lib/Feedback/Loader.svelte b/packages/svelte-components/src/lib/Feedback/Loader.svelte
new file mode 100644
index 0000000..425d59e
--- /dev/null
+++ b/packages/svelte-components/src/lib/Feedback/Loader.svelte
@@ -0,0 +1,51 @@
+<script lang="ts"></script>
+
+<span class="loader"></span>
+
+<style>
+	.loader {
+		width: 48px;
+		height: 48px;
+		border: 3px dotted #fff;
+		border-style: solid solid dotted dotted;
+		border-radius: 50%;
+		display: inline-block;
+		position: relative;
+		box-sizing: border-box;
+		animation: rotation 2s linear infinite;
+	}
+	.loader::after {
+		content: '';
+		box-sizing: border-box;
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		margin: auto;
+		border: 3px dotted #ff3d00;
+		border-style: solid solid dotted;
+		width: 24px;
+		height: 24px;
+		border-radius: 50%;
+		animation: rotationBack 1s linear infinite;
+		transform-origin: center center;
+	}
+
+	@keyframes rotation {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+	@keyframes rotationBack {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(-360deg);
+		}
+	}
+</style>
diff --git a/packages/svelte-components/src/lib/Feedback/Loading.stories.svelte b/packages/svelte-components/src/lib/Feedback/Loading.stories.svelte
new file mode 100644
index 0000000..8de2377
--- /dev/null
+++ b/packages/svelte-components/src/lib/Feedback/Loading.stories.svelte
@@ -0,0 +1,40 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import type { ComponentProps } from 'svelte';
+	import Loading from './Loading.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Feedback/Loading',
+		component: Loading,
+		argTypes: {
+			color: {
+				control: 'select',
+				options: [
+					'neutral',
+					'primary',
+					'secondary',
+					'accent',
+					'info',
+					'success',
+					'warning',
+					'error',
+				],
+			},
+			size: { control: 'select', options: ['xs', 'sm', 'md', 'lg'] },
+			variant: {
+				control: 'select',
+				options: ['spinner', 'dots', 'ring', 'ball', 'bars', 'infinity'],
+			},
+		},
+	});
+</script>
+
+{#snippet template(props: ComponentProps<typeof Loading>)}
+	<Loading {...props} />
+{/snippet}
+
+<Story
+	name="Default"
+	args={{ color: 'neutral', size: 'md', variant: 'spinner' }}
+	children={template}
+/>
diff --git a/packages/svelte-components/src/lib/Feedback/Loading.svelte b/packages/svelte-components/src/lib/Feedback/Loading.svelte
new file mode 100644
index 0000000..8f43e88
--- /dev/null
+++ b/packages/svelte-components/src/lib/Feedback/Loading.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { DaisyColor, DaisySize } from '$lib/types';
+	import clsx from 'clsx';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
+
+	type Props = {
+		color?: Exclude<DaisyColor, 'ghost'>;
+		size?: DaisySize | 'md';
+		variant?: 'spinner' | 'dots' | 'ring' | 'ball' | 'bars' | 'infinity';
+	} & Pick<SvelteHTMLElements['span'], 'class'>;
+	let { class: className, color, size = 'md', variant = 'spinner' }: Props = $props();
+</script>
+
+<span
+	class={twMerge('loading', clsx(className))}
+	class:text-primary={color === 'primary'}
+	class:text-secondary={color === 'secondary'}
+	class:text-accent={color === 'accent'}
+	class:text-info={color === 'info'}
+	class:text-success={color === 'success'}
+	class:text-warning={color === 'warning'}
+	class:text-error={color === 'error'}
+	class:loading-xs={size === 'xs'}
+	class:loading-sm={size === 'sm'}
+	class:loading-md={size === 'md'}
+	class:loading-lg={size === 'lg'}
+	class:loading-spinner={variant === 'spinner'}
+	class:loading-dots={variant === 'dots'}
+	class:loading-ring={variant === 'ring'}
+	class:loading-ball={variant === 'ball'}
+	class:loading-bars={variant === 'bars'}
+	class:loading-infinity={variant === 'infinity'}
+></span>
diff --git a/packages/svelte-components/src/lib/Feedback/Progress.stories.svelte b/packages/svelte-components/src/lib/Feedback/Progress.stories.svelte
new file mode 100644
index 0000000..bf4c696
--- /dev/null
+++ b/packages/svelte-components/src/lib/Feedback/Progress.stories.svelte
@@ -0,0 +1,24 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import type { ComponentProps } from 'svelte';
+	import Progress from './Progress.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Feedback/Progress',
+		component: Progress,
+		argTypes: {
+			color: {
+				control: 'select',
+				options: ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error'],
+			},
+			value: { control: 'number' },
+			max: { control: 'number' },
+		},
+	});
+</script>
+
+{#snippet template(props: ComponentProps<typeof Progress>)}
+	<Progress {...props} />
+{/snippet}
+
+<Story name="Default" args={{}} children={template} />
diff --git a/packages/svelte-components/src/lib/Feedback/Progress.svelte b/packages/svelte-components/src/lib/Feedback/Progress.svelte
new file mode 100644
index 0000000..ed8a102
--- /dev/null
+++ b/packages/svelte-components/src/lib/Feedback/Progress.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import clsx from 'clsx';
+	import type { DaisyColor } from '$lib/types';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
+
+	type Props = {
+		color?: Exclude<DaisyColor, 'neutral' | 'ghost'>;
+	} & SvelteHTMLElements['progress'];
+	let { children, class: className, color, ...props }: Props = $props();
+</script>
+
+<progress
+	{...props}
+	class={twMerge('progress', clsx(className))}
+	class:progress-primary={color === 'primary'}
+	class:progress-secondary={color === 'secondary'}
+	class:progress-accent={color === 'accent'}
+	class:progress-info={color === 'info'}
+	class:progress-success={color === 'success'}
+	class:progress-warning={color === 'warning'}
+	class:progress-error={color === 'error'}
+>
+	{@render children?.()}
+</progress>
diff --git a/packages/svelte-components/src/lib/Feedback/Skeleton.stories.svelte b/packages/svelte-components/src/lib/Feedback/Skeleton.stories.svelte
new file mode 100644
index 0000000..0f659d6
--- /dev/null
+++ b/packages/svelte-components/src/lib/Feedback/Skeleton.stories.svelte
@@ -0,0 +1,18 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Skeleton from './Skeleton.svelte';
+	import type { ComponentProps } from 'svelte';
+
+	const { Story } = defineMeta({
+		title: 'Feedback/Skeleton',
+		component: Skeleton,
+	});
+</script>
+
+{#snippet template(props: ComponentProps<typeof Skeleton>)}
+	<Skeleton {...props} />
+{/snippet}
+
+<Story name="Default" args={{ class: 'h-32 w-32' }} children={template} />
+
+<Story name="Circle" args={{ class: 'h-32 w-32 rounded-full' }} children={template} />
diff --git a/packages/svelte-components/src/lib/Feedback/Skeleton.svelte b/packages/svelte-components/src/lib/Feedback/Skeleton.svelte
new file mode 100644
index 0000000..4bdffa7
--- /dev/null
+++ b/packages/svelte-components/src/lib/Feedback/Skeleton.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import clsx from 'clsx';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
+
+	type Props = SvelteHTMLElements['div'];
+	let { children, class: className, ...props }: Props = $props();
+</script>
+
+<div {...props} class={twMerge('skeleton', clsx(className))}>{@render children?.()}</div>
diff --git a/packages/svelte-components/src/lib/Feedback/Tooltip.stories.svelte b/packages/svelte-components/src/lib/Feedback/Tooltip.stories.svelte
new file mode 100644
index 0000000..f9a9cde
--- /dev/null
+++ b/packages/svelte-components/src/lib/Feedback/Tooltip.stories.svelte
@@ -0,0 +1,27 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Tooltip from './Tooltip.svelte';
+	import { Button } from '../Actions';
+	import type { ComponentProps } from 'svelte';
+
+	const { Story } = defineMeta({
+		title: 'Feedback/Tooltip',
+		component: Tooltip,
+		argTypes: {
+			color: {
+				control: 'select',
+				options: ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error'],
+			},
+			open: { control: 'boolean' },
+			position: { control: 'select', options: ['top', 'bottom', 'left', 'right'] },
+		},
+	});
+</script>
+
+{#snippet template(props: ComponentProps<typeof Tooltip>)}
+	<Tooltip {...props}>
+		<Button color="primary">Button</Button>
+	</Tooltip>
+{/snippet}
+
+<Story name="Default" args={{ tip: "It's a button" }} children={template} />
diff --git a/packages/svelte-components/src/lib/Feedback/Tooltip.svelte b/packages/svelte-components/src/lib/Feedback/Tooltip.svelte
new file mode 100644
index 0000000..4ef9de4
--- /dev/null
+++ b/packages/svelte-components/src/lib/Feedback/Tooltip.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { DaisyColor } from '$lib/types';
+	import clsx from 'clsx';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
+
+	type Props = {
+		color?: Exclude<DaisyColor, 'neutral' | 'ghost'>;
+		open?: boolean;
+		position?: 'top' | 'bottom' | 'left' | 'right';
+		tip?: string;
+	} & SvelteHTMLElements['div'];
+	let { children, class: className, color, open, position, tip, ...props }: Props = $props();
+</script>
+
+<div
+	{...props}
+	class={twMerge('tooltip', clsx(className))}
+	class:tooltip-primary={color === 'primary'}
+	class:tooltip-secondary={color === 'secondary'}
+	class:tooltip-accent={color === 'accent'}
+	class:tooltip-info={color === 'info'}
+	class:tooltip-success={color === 'success'}
+	class:tooltip-warning={color === 'warning'}
+	class:tooltip-error={color === 'error'}
+	class:tooltip-open={open}
+	class:tooltip-top={position === 'top'}
+	class:tooltip-bottom={position === 'bottom'}
+	class:tooltip-left={position === 'left'}
+	class:tooltip-right={position === 'right'}
+	data-tip={tip}
+>
+	{@render children?.()}
+</div>
diff --git a/packages/svelte-components/src/lib/Feedback/index.ts b/packages/svelte-components/src/lib/Feedback/index.ts
new file mode 100644
index 0000000..dca62e9
--- /dev/null
+++ b/packages/svelte-components/src/lib/Feedback/index.ts
@@ -0,0 +1,6 @@
+export { default as Alert } from './Alert.svelte';
+export { default as Loader } from './Loader.svelte';
+export { default as Loading } from './Loading.svelte';
+export { default as Progress } from './Progress.svelte';
+export { default as Skeleton } from './Skeleton.svelte';
+export { default as Tooltip } from './Tooltip.svelte';
diff --git a/packages/svelte-components/src/lib/Layout/Divider.stories.svelte b/packages/svelte-components/src/lib/Layout/Divider.stories.svelte
new file mode 100644
index 0000000..97beb09
--- /dev/null
+++ b/packages/svelte-components/src/lib/Layout/Divider.stories.svelte
@@ -0,0 +1,41 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Divider from './Divider.svelte';
+	import type { ComponentProps } from 'svelte';
+
+	const { Story } = defineMeta({
+		title: 'Layout/Divider',
+		component: Divider,
+		argTypes: {
+			color: {
+				control: 'select',
+				options: [
+					'neutral',
+					'primary',
+					'secondary',
+					'accent',
+					'info',
+					'success',
+					'warning',
+					'error',
+				],
+			},
+			direction: { control: 'select', options: ['horizontal', 'vertical'] },
+			variant: { control: 'select', options: ['start', 'end'] },
+		},
+	});
+</script>
+
+{#snippet template(props: ComponentProps<typeof Divider>)}
+	<div
+		class="flex"
+		class:flex-row={props.direction === 'horizontal'}
+		class:flex-col={props.direction === 'vertical'}
+	>
+		<span>Side A</span>
+		<Divider {...props} />
+		<span>Side B</span>
+	</div>
+{/snippet}
+
+<Story name="Default" args={{}} children={template} />
diff --git a/packages/svelte-components/src/lib/Layout/Divider.svelte b/packages/svelte-components/src/lib/Layout/Divider.svelte
new file mode 100644
index 0000000..697186f
--- /dev/null
+++ b/packages/svelte-components/src/lib/Layout/Divider.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { DaisyColor } from '$lib/types';
+	import clsx from 'clsx';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
+
+	type Props = {
+		color?: Exclude<DaisyColor, 'ghost'>;
+		direction?: 'horizontal' | 'vertical';
+		variant?: 'start' | 'end';
+	} & SvelteHTMLElements['div'];
+	let { children, class: className, color, direction, variant, ...props }: Props = $props();
+</script>
+
+<div
+	{...props}
+	class={twMerge('divider', clsx(className))}
+	class:divider-neutral={color === 'neutral'}
+	class:divider-primary={color === 'primary'}
+	class:divider-secondary={color === 'secondary'}
+	class:divider-accent={color === 'accent'}
+	class:divider-info={color === 'info'}
+	class:divider-success={color === 'success'}
+	class:divider-warning={color === 'warning'}
+	class:divider-error={color === 'error'}
+	class:divider-horizontal={direction === 'horizontal'}
+	class:divider-vertical={direction === 'vertical'}
+	class:divider-start={variant === 'start'}
+	class:divider-end={variant === 'end'}
+>
+	{@render children?.()}
+</div>
diff --git a/packages/svelte-components/src/lib/Layout/index.ts b/packages/svelte-components/src/lib/Layout/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/packages/svelte-components/src/lib/Navigation/Link.stories.svelte b/packages/svelte-components/src/lib/Navigation/Link.stories.svelte
new file mode 100644
index 0000000..30ed305
--- /dev/null
+++ b/packages/svelte-components/src/lib/Navigation/Link.stories.svelte
@@ -0,0 +1,31 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import type { ComponentProps } from 'svelte';
+	import Link from './Link.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Navigation/Link',
+		component: Link,
+		argTypes: {
+			color: {
+				control: 'select',
+				options: [
+					'primary',
+					'secondary',
+					'accent',
+					'neutral',
+					'info',
+					'success',
+					'warning',
+					'error',
+				],
+			},
+		},
+	});
+</script>
+
+{#snippet template(props: ComponentProps<typeof Link>)}
+	<Link {...props}>Hello world!</Link>
+{/snippet}
+
+<Story name="Default" children={template} />
diff --git a/packages/svelte-components/src/lib/Navigation/Link.svelte b/packages/svelte-components/src/lib/Navigation/Link.svelte
new file mode 100644
index 0000000..dd88334
--- /dev/null
+++ b/packages/svelte-components/src/lib/Navigation/Link.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { DaisyColor } from '$lib/types';
+	import clsx from 'clsx';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
+
+	type Props = { color?: DaisyColor; hover?: boolean } & SvelteHTMLElements['a'];
+
+	let { children, class: className, color, hover, ...props }: Props = $props();
+</script>
+
+<a
+	{...props}
+	class={twMerge('link', clsx(className))}
+	class:link-primary={color === 'primary'}
+	class:link-secondary={color === 'secondary'}
+	class:link-accent={color === 'accent'}
+	class:link-neutral={color === 'neutral'}
+	class:link-info={color === 'info'}
+	class:link-success={color === 'success'}
+	class:link-warning={color === 'warning'}
+	class:link-error={color === 'error'}
+	class:link-hover={hover}>{@render children?.()}</a
+>
diff --git a/packages/svelte-components/src/lib/Navigation/Navbar/Navbar.stories.svelte b/packages/svelte-components/src/lib/Navigation/Navbar/Navbar.stories.svelte
new file mode 100644
index 0000000..0b35c92
--- /dev/null
+++ b/packages/svelte-components/src/lib/Navigation/Navbar/Navbar.stories.svelte
@@ -0,0 +1,27 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Navbar from './Navbar.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Navigation/Navbar',
+		component: Navbar,
+	});
+</script>
+
+<Story name="Default">
+	<Navbar>
+		{#snippet start()}
+			<button class="btn">Home</button>
+		{/snippet}
+		{#snippet center()}
+			<h2 class="text-xl">Title</h2>
+		{/snippet}
+		{#snippet end()}
+			<div class="avatar placeholder">
+				<div class="w-8 rounded-full bg-neutral text-neutral-content">
+					<span class="text-xs">UI</span>
+				</div>
+			</div>
+		{/snippet}
+	</Navbar>
+</Story>
diff --git a/packages/svelte-components/src/lib/Navigation/Navbar/Navbar.svelte b/packages/svelte-components/src/lib/Navigation/Navbar/Navbar.svelte
new file mode 100644
index 0000000..841f780
--- /dev/null
+++ b/packages/svelte-components/src/lib/Navigation/Navbar/Navbar.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { start, center, end }: { start?: Snippet; center?: Snippet; end?: Snippet } = $props();
+</script>
+
+<header class="navbar justify-between rounded-box bg-base-200 px-4">
+	<div class="navbar-start">{@render start?.()}</div>
+	<div class="navbar-center">{@render center?.()}</div>
+	<div class="navbar-end">{@render end?.()}</div>
+</header>
diff --git a/packages/svelte-components/src/lib/Navigation/Navbar/index.ts b/packages/svelte-components/src/lib/Navigation/Navbar/index.ts
new file mode 100644
index 0000000..29b38de
--- /dev/null
+++ b/packages/svelte-components/src/lib/Navigation/Navbar/index.ts
@@ -0,0 +1,3 @@
+import Navbar from './Navbar.svelte';
+
+export default Navbar;
diff --git a/packages/svelte-components/src/lib/Navigation/Tabs/Tab.svelte b/packages/svelte-components/src/lib/Navigation/Tabs/Tab.svelte
new file mode 100644
index 0000000..a30a6ee
--- /dev/null
+++ b/packages/svelte-components/src/lib/Navigation/Tabs/Tab.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	let { active, label, onclick } = $props();
+</script>
+
+<input aria-label={label} type="radio" role="tab" class="tab" class:tab-active={active} {onclick} />
diff --git a/packages/svelte-components/src/lib/Navigation/Tabs/Tabs.stories.svelte b/packages/svelte-components/src/lib/Navigation/Tabs/Tabs.stories.svelte
new file mode 100644
index 0000000..828b063
--- /dev/null
+++ b/packages/svelte-components/src/lib/Navigation/Tabs/Tabs.stories.svelte
@@ -0,0 +1,27 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import type { ComponentProps } from 'svelte';
+	import Tabs from './Tabs.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Navigation/Tabs',
+		component: Tabs,
+		tags: ['autodocs'],
+		argTypes: {
+			size: {
+				control: 'select',
+				options: ['xs', 'sm', 'rg', 'lg'],
+			},
+			variant: {
+				control: 'select',
+				options: ['none', 'bordered', 'lifted', 'boxed'],
+			},
+		},
+	});
+</script>
+
+{#snippet template(args: Partial<ComponentProps<typeof Tabs>>)}
+	<Tabs tabs={['Tab 1', 'Tab 2']} {...args} />
+{/snippet}
+
+<Story name="Default" args={{}} children={template} />
diff --git a/packages/svelte-components/src/lib/Navigation/Tabs/Tabs.svelte b/packages/svelte-components/src/lib/Navigation/Tabs/Tabs.svelte
new file mode 100644
index 0000000..a0a7e77
--- /dev/null
+++ b/packages/svelte-components/src/lib/Navigation/Tabs/Tabs.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { DaisySize } from '$lib/types';
+	import Tab from './Tab.svelte';
+
+	type Props = {
+		size?: DaisySize;
+		tabs: string[];
+		selected?: number;
+		variant?: 'none' | 'bordered' | 'lifted' | 'boxed';
+	};
+
+	let { size, tabs, selected: value = $bindable(0), variant = 'none' }: Props = $props();
+</script>
+
+<div
+	role="tablist"
+	class="tabs w-full"
+	class:tabs-xs={size === 'xs'}
+	class:tabs-sm={size === 'sm'}
+	class:tabs-lg={size === 'lg'}
+	class:tabs-bordered={variant === 'bordered'}
+	class:tabs-lifted={variant === 'lifted'}
+	class:tabs-boxed={variant === 'boxed'}
+>
+	{#each tabs as tab, index}
+		{#key [tab, value]}
+			<Tab
+				active={index === value}
+				label={tab}
+				onclick={() => {
+					value = index;
+				}}
+			/>
+		{/key}
+	{/each}
+</div>
diff --git a/packages/svelte-components/src/lib/Navigation/Tabs/index.ts b/packages/svelte-components/src/lib/Navigation/Tabs/index.ts
new file mode 100644
index 0000000..d4f7fd8
--- /dev/null
+++ b/packages/svelte-components/src/lib/Navigation/Tabs/index.ts
@@ -0,0 +1,4 @@
+import Tabs from './Tabs.svelte';
+
+export default Tabs;
+export { default as Tabs } from './Tabs.svelte';
diff --git a/packages/svelte-components/src/lib/Navigation/index.ts b/packages/svelte-components/src/lib/Navigation/index.ts
new file mode 100644
index 0000000..cb48563
--- /dev/null
+++ b/packages/svelte-components/src/lib/Navigation/index.ts
@@ -0,0 +1,5 @@
+import Navbar from './Navbar';
+import Tabs from './Tabs';
+
+export { default as Link } from './Link.svelte';
+export { Navbar, Tabs };
diff --git a/packages/svelte-components/src/lib/index.ts b/packages/svelte-components/src/lib/index.ts
new file mode 100644
index 0000000..57d36ab
--- /dev/null
+++ b/packages/svelte-components/src/lib/index.ts
@@ -0,0 +1,6 @@
+export * from "./Actions/";
+export * from "./DataInput/";
+export * from "./Datadisplay/";
+export * from "./Feedback/";
+export * from "./Layout/";
+export * from "./Navigation/";
diff --git a/packages/svelte-components/src/types/daisy-colors.ts b/packages/svelte-components/src/types/daisy-colors.ts
new file mode 100644
index 0000000..10a9915
--- /dev/null
+++ b/packages/svelte-components/src/types/daisy-colors.ts
@@ -0,0 +1,10 @@
+export type DaisyColor =
+  | "neutral"
+  | "primary"
+  | "secondary"
+  | "accent"
+  | "ghost"
+  | "info"
+  | "success"
+  | "warning"
+  | "error";
diff --git a/packages/svelte-components/src/types/daisy-sizes.ts b/packages/svelte-components/src/types/daisy-sizes.ts
new file mode 100644
index 0000000..7a81bb3
--- /dev/null
+++ b/packages/svelte-components/src/types/daisy-sizes.ts
@@ -0,0 +1 @@
+export type DaisySize = "xs" | "sm" | "lg";
diff --git a/packages/svelte-components/src/types/index.ts b/packages/svelte-components/src/types/index.ts
new file mode 100644
index 0000000..58dece4
--- /dev/null
+++ b/packages/svelte-components/src/types/index.ts
@@ -0,0 +1,2 @@
+export * from "./daisy-colors";
+export * from "./daisy-sizes";
diff --git a/packages/svelte-components/svelte.config.js b/packages/svelte-components/svelte.config.js
new file mode 100644
index 0000000..329edf6
--- /dev/null
+++ b/packages/svelte-components/svelte.config.js
@@ -0,0 +1,12 @@
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+
+  kit: {},
+};
+
+export default config;
diff --git a/packages/svelte-components/tailwind.config.ts b/packages/svelte-components/tailwind.config.ts
new file mode 100644
index 0000000..e63f8fe
--- /dev/null
+++ b/packages/svelte-components/tailwind.config.ts
@@ -0,0 +1,10 @@
+import daisyui from 'daisyui';
+import type { Config } from 'tailwindcss';
+
+export default {
+	content: ['./src/**/*.{html,js,svelte,ts}'],
+	plugins: [daisyui],
+	daisyui: {
+		logs: false,
+	},
+} satisfies Config;
\ No newline at end of file
diff --git a/packages/svelte-components/tsconfig.json b/packages/svelte-components/tsconfig.json
new file mode 100644
index 0000000..238655f
--- /dev/null
+++ b/packages/svelte-components/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    // Enable latest features
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  }
+}