diff --git a/bun.lockb b/bun.lockb
index 6a66b02..e9b437c 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components.json b/components.json
index cbd2be4..79b6f65 100644
--- a/components.json
+++ b/components.json
@@ -1,5 +1,5 @@
 {
-	"$schema": "https://shadcn-svelte.com/schema.json",
+	"$schema": "https://next.shadcn-svelte.com/schema.json",
 	"style": "default",
 	"tailwind": {
 		"config": "tailwind.config.js",
@@ -8,7 +8,10 @@
 	},
 	"aliases": {
 		"components": "$lib/components",
-		"utils": "$lib/utils"
+		"utils": "$lib/utils",
+		"ui": "$lib/components/ui",
+		"hooks": "$lib/hooks"
 	},
-	"typescript": true
+	"typescript": true,
+	"registry": "https://next.shadcn-svelte.com/registry"
 }
diff --git a/package.json b/package.json
index 3974f83..d5b555a 100644
--- a/package.json
+++ b/package.json
@@ -12,32 +12,30 @@
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^3.2.4",
-		"@sveltejs/kit": "^2.5.25",
-		"@sveltejs/vite-plugin-svelte": "^3.1.2",
+		"@sveltejs/adapter-auto": "^3.3.1",
+		"@sveltejs/adapter-static": "^3.0.6",
+		"@sveltejs/kit": "^2.8.1",
+		"@sveltejs/vite-plugin-svelte": "^4.0.1",
 		"autoprefixer": "^10.4.20",
-		"postcss": "^8.4.41",
-		"postcss-load-config": "^5.1.0",
-		"prettier": "^3.3.3",
-		"prettier-plugin-svelte": "^3.2.6",
-		"prettier-plugin-tailwindcss": "^0.5.14",
-		"svelte": "^4.2.19",
-		"svelte-check": "^3.8.6",
-		"tailwindcss": "^3.4.10",
-		"tslib": "^2.7.0",
-		"typescript": "^5.5.4",
-		"vite": "^5.4.2"
-	},
-	"type": "module",
-	"dependencies": {
-		"@sveltejs/adapter-static": "^3.0.4",
-		"bits-ui": "^0.21.13",
+		"bits-ui": "^1.0.0-next.59",
 		"clsx": "^2.1.1",
 		"install": "^0.13.0",
 		"lucide-svelte": "^0.436.0",
 		"mode-watcher": "^0.3.1",
-		"tailwind-merge": "^2.5.2",
-		"tailwind-variants": "^0.2.1",
-		"vaul-svelte": "^0.3.2"
-	}
+		"prettier": "^3.3.3",
+		"prettier-plugin-svelte": "^3.2.8",
+		"prettier-plugin-tailwindcss": "^0.5.14",
+		"svelte": "^5.2.2",
+		"svelte-check": "^4.0.9",
+		"tailwind-merge": "^2.5.4",
+		"tailwind-variants": "^0.3.0",
+		"tailwindcss": "^3.4.15",
+		"tailwindcss-animate": "^1.0.7",
+		"tslib": "^2.8.1",
+		"typescript": "^5.6.3",
+		"vaul-svelte": "^0.3.2",
+		"vite": "^5.4.11"
+	},
+	"type": "module",
+	"dependencies": {}
 }
diff --git a/src/app.pcss b/src/app.css
similarity index 100%
rename from src/app.pcss
rename to src/app.css
diff --git a/src/lib/components/ui/alert/alert-description.svelte b/src/lib/components/ui/alert/alert-description.svelte
index 06d344c..ef74aa4 100644
--- a/src/lib/components/ui/alert/alert-description.svelte
+++ b/src/lib/components/ui/alert/alert-description.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from '$lib/utils.js';
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
-
-	let className: $$Props['class'] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div class={cn('text-sm [&_p]:leading-relaxed', className)} {...$$restProps}>
-	<slot />
+<div bind:this={ref} class={cn("text-sm [&_p]:leading-relaxed", className)} {...restProps}>
+	{@render children?.()}
 </div>
diff --git a/src/lib/components/ui/alert/alert-title.svelte b/src/lib/components/ui/alert/alert-title.svelte
index c63089b..12ec9fc 100644
--- a/src/lib/components/ui/alert/alert-title.svelte
+++ b/src/lib/components/ui/alert/alert-title.svelte
@@ -1,21 +1,25 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import type { HeadingLevel } from './index.js';
-	import { cn } from '$lib/utils.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
-		level?: HeadingLevel;
-	};
-
-	let className: $$Props['class'] = undefined;
-	export let level: $$Props['level'] = 'h5';
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 5,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		level?: 1 | 2 | 3 | 4 | 5 | 6;
+	} = $props();
 </script>
 
-<svelte:element
-	this={level}
-	class={cn('mb-1 font-medium leading-none tracking-tight', className)}
-	{...$$restProps}
+<div
+	role="heading"
+	aria-level={level}
+	bind:this={ref}
+	class={cn("mb-1 font-medium leading-none tracking-tight", className)}
+	{...restProps}
 >
-	<slot />
-</svelte:element>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/alert/alert.svelte b/src/lib/components/ui/alert/alert.svelte
index 0bf6eec..8b4528f 100644
--- a/src/lib/components/ui/alert/alert.svelte
+++ b/src/lib/components/ui/alert/alert.svelte
@@ -1,17 +1,39 @@
-<script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { type Variant, alertVariants } from './index.js';
-	import { cn } from '$lib/utils.js';
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const alertVariants = tv({
+		base: "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7",
+		variants: {
+			variant: {
+				default: "bg-background text-foreground",
+				destructive:
+					"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
 
-	type $$Props = HTMLAttributes<HTMLDivElement> & {
-		variant?: Variant;
-	};
+	export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
-	let className: $$Props['class'] = undefined;
-	export let variant: $$Props['variant'] = 'default';
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: AlertVariant;
+	} = $props();
 </script>
 
-<div class={cn(alertVariants({ variant }), className)} {...$$restProps} role="alert">
-	<slot />
+<div bind:this={ref} class={cn(alertVariants({ variant }), className)} {...restProps} role="alert">
+	{@render children?.()}
 </div>
diff --git a/src/lib/components/ui/alert/index.ts b/src/lib/components/ui/alert/index.ts
index c8f3474..97e21b4 100644
--- a/src/lib/components/ui/alert/index.ts
+++ b/src/lib/components/ui/alert/index.ts
@@ -1,26 +1,7 @@
-import { type VariantProps, tv } from 'tailwind-variants';
-
-import Root from './alert.svelte';
-import Description from './alert-description.svelte';
-import Title from './alert-title.svelte';
-
-export const alertVariants = tv({
-	base: '[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4',
-
-	variants: {
-		variant: {
-			default: 'bg-background text-foreground',
-			destructive:
-				'border-destructive/50 text-destructive text-destructive dark:border-destructive [&>svg]:text-destructive'
-		}
-	},
-	defaultVariants: {
-		variant: 'default'
-	}
-});
-
-export type Variant = VariantProps<typeof alertVariants>['variant'];
-export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+import Root from "./alert.svelte";
+import Description from "./alert-description.svelte";
+import Title from "./alert-title.svelte";
+export { alertVariants, type AlertVariant } from "./alert.svelte";
 
 export {
 	Root,
@@ -29,5 +10,5 @@ export {
 	//
 	Root as Alert,
 	Description as AlertDescription,
-	Title as AlertTitle
+	Title as AlertTitle,
 };
diff --git a/src/lib/components/ui/avatar/avatar-fallback.svelte b/src/lib/components/ui/avatar/avatar-fallback.svelte
index 42409b5..4f97379 100644
--- a/src/lib/components/ui/avatar/avatar-fallback.svelte
+++ b/src/lib/components/ui/avatar/avatar-fallback.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { Avatar as AvatarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
-	type $$Props = AvatarPrimitive.FallbackProps;
-
-	let className: $$Props['class'] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.FallbackProps = $props();
 </script>
 
 <AvatarPrimitive.Fallback
-	class={cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className)}
-	{...$$restProps}
->
-	<slot />
-</AvatarPrimitive.Fallback>
+	bind:ref
+	class={cn("bg-muted flex h-full w-full items-center justify-center rounded-full", className)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/avatar/avatar-image.svelte b/src/lib/components/ui/avatar/avatar-image.svelte
index 95cf424..c7511ea 100644
--- a/src/lib/components/ui/avatar/avatar-image.svelte
+++ b/src/lib/components/ui/avatar/avatar-image.svelte
@@ -1,18 +1,16 @@
 <script lang="ts">
-	import { Avatar as AvatarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
-	type $$Props = AvatarPrimitive.ImageProps;
-
-	let className: $$Props['class'] = undefined;
-	export let src: $$Props['src'] = undefined;
-	export let alt: $$Props['alt'] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.ImageProps = $props();
 </script>
 
 <AvatarPrimitive.Image
-	{src}
-	{alt}
-	class={cn('aspect-square h-full w-full', className)}
-	{...$$restProps}
+	bind:ref
+	class={cn("aspect-square h-full w-full", className)}
+	{...restProps}
 />
diff --git a/src/lib/components/ui/avatar/avatar.svelte b/src/lib/components/ui/avatar/avatar.svelte
index b2e1acf..4b42599 100644
--- a/src/lib/components/ui/avatar/avatar.svelte
+++ b/src/lib/components/ui/avatar/avatar.svelte
@@ -2,17 +2,15 @@
 	import { Avatar as AvatarPrimitive } from 'bits-ui';
 	import { cn } from '$lib/utils.js';
 
-	type $$Props = AvatarPrimitive.Props;
-
-	let className: $$Props['class'] = undefined;
-	export let delayMs: $$Props['delayMs'] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.RootProps = $props();
 </script>
 
 <AvatarPrimitive.Root
-	{delayMs}
-	class={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-sm', className)}
-	{...$$restProps}
->
-	<slot />
-</AvatarPrimitive.Root>
+	bind:ref
+	class={cn('relative flex size-10 shrink-0 overflow-hidden rounded-md', className)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/avatar/index.ts b/src/lib/components/ui/avatar/index.ts
index 9585f8a..d06457b 100644
--- a/src/lib/components/ui/avatar/index.ts
+++ b/src/lib/components/ui/avatar/index.ts
@@ -1,6 +1,6 @@
-import Root from './avatar.svelte';
-import Image from './avatar-image.svelte';
-import Fallback from './avatar-fallback.svelte';
+import Root from "./avatar.svelte";
+import Image from "./avatar-image.svelte";
+import Fallback from "./avatar-fallback.svelte";
 
 export {
 	Root,
@@ -9,5 +9,5 @@ export {
 	//
 	Root as Avatar,
 	Image as AvatarImage,
-	Fallback as AvatarFallback
+	Fallback as AvatarFallback,
 };
diff --git a/src/lib/components/ui/badge/badge.svelte b/src/lib/components/ui/badge/badge.svelte
index ba65f8c..9c7457a 100644
--- a/src/lib/components/ui/badge/badge.svelte
+++ b/src/lib/components/ui/badge/badge.svelte
@@ -1,18 +1,50 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const badgeVariants = tv({
+		base: "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+		variants: {
+			variant: {
+				default:
+					"bg-primary text-primary-foreground hover:bg-primary/80 border-transparent",
+				secondary:
+					"bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
+				destructive:
+					"bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent",
+				outline: "text-foreground",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+</script>
+
 <script lang="ts">
-	import { type Variant, badgeVariants } from './index.js';
-	import { cn } from '$lib/utils.js';
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
 
-	let className: string | undefined | null = undefined;
-	export let href: string | undefined = undefined;
-	export let variant: Variant = 'default';
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+	} = $props();
 </script>
 
 <svelte:element
-	this={href ? 'a' : 'span'}
+	this={href ? "a" : "span"}
+	bind:this={ref}
 	{href}
 	class={cn(badgeVariants({ variant, className }))}
-	{...$$restProps}
+	{...restProps}
 >
-	<slot />
+	{@render children?.()}
 </svelte:element>
diff --git a/src/lib/components/ui/badge/index.ts b/src/lib/components/ui/badge/index.ts
index f22051a..64e0aa9 100644
--- a/src/lib/components/ui/badge/index.ts
+++ b/src/lib/components/ui/badge/index.ts
@@ -1,20 +1,2 @@
-import { type VariantProps, tv } from 'tailwind-variants';
-export { default as Badge } from './badge.svelte';
-
-export const badgeVariants = tv({
-	base: 'focus:ring-ring inline-flex select-none items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2',
-	variants: {
-		variant: {
-			default: 'bg-primary text-primary-foreground hover:bg-primary/80 border-transparent',
-			secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent',
-			destructive:
-				'bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent',
-			outline: 'text-foreground'
-		}
-	},
-	defaultVariants: {
-		variant: 'default'
-	}
-});
-
-export type Variant = VariantProps<typeof badgeVariants>['variant'];
+export { default as Badge } from "./badge.svelte";
+export { badgeVariants, type BadgeVariant } from "./badge.svelte";
diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte
index f578a57..8f44d5c 100644
--- a/src/lib/components/ui/button/button.svelte
+++ b/src/lib/components/ui/button/button.svelte
@@ -1,25 +1,74 @@
-<script lang="ts">
-	import { Button as ButtonPrimitive } from 'bits-ui';
-	import { type Events, type Props, buttonVariants } from './index.js';
-	import { cn } from '$lib/utils.js';
+<script lang="ts" module>
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const buttonVariants = tv({
+		base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground hover:bg-primary/90",
+				destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+				outline:
+					"border-input bg-background hover:bg-accent hover:text-accent-foreground border",
+				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+				ghost: "hover:bg-accent hover:text-accent-foreground",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-10 px-4 py-2",
+				sm: "h-9 rounded-md px-3",
+				lg: "h-11 rounded-md px-8",
+				icon: "h-10 w-10",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
 
-	type $$Props = Props;
-	type $$Events = Events;
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+		};
+</script>
+
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
 
-	let className: $$Props['class'] = undefined;
-	export let variant: $$Props['variant'] = 'default';
-	export let size: $$Props['size'] = 'default';
-	export let builders: $$Props['builders'] = [];
-	export { className as class };
+	let {
+		class: className,
+		variant = "default",
+		size = "default",
+		ref = $bindable(null),
+		href = undefined,
+		type = "button",
+		children,
+		...restProps
+	}: ButtonProps = $props();
 </script>
 
-<ButtonPrimitive.Root
-	{builders}
-	class={cn(buttonVariants({ variant, size, className }))}
-	type="button"
-	{...$$restProps}
-	on:click
-	on:keydown
->
-	<slot />
-</ButtonPrimitive.Root>
+{#if href}
+	<a
+		bind:this={ref}
+		class={cn(buttonVariants({ variant, size, className }))}
+		{href}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		class={cn(buttonVariants({ variant, size, className }))}
+		{type}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}
diff --git a/src/lib/components/ui/button/index.ts b/src/lib/components/ui/button/index.ts
index 0f43874..fb585d7 100644
--- a/src/lib/components/ui/button/index.ts
+++ b/src/lib/components/ui/button/index.ts
@@ -1,48 +1,17 @@
-import { type VariantProps, tv } from 'tailwind-variants';
-import type { Button as ButtonPrimitive } from 'bits-ui';
-import Root from './button.svelte';
-
-const buttonVariants = tv({
-	base: 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
-	variants: {
-		variant: {
-			default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-			destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-			outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-			secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-			ghost: 'hover:bg-accent hover:text-accent-foreground',
-			link: 'text-primary underline-offset-4 hover:underline'
-		},
-		size: {
-			default: 'h-10 px-4 py-2',
-			sm: 'h-9 rounded-md px-3',
-			lg: 'h-11 rounded-md px-8',
-			icon: 'h-10 w-10'
-		}
-	},
-	defaultVariants: {
-		variant: 'default',
-		size: 'default'
-	}
-});
-
-type Variant = VariantProps<typeof buttonVariants>['variant'];
-type Size = VariantProps<typeof buttonVariants>['size'];
-
-type Props = ButtonPrimitive.Props & {
-	variant?: Variant;
-	size?: Size;
-};
-
-type Events = ButtonPrimitive.Events;
+import Root, {
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+	buttonVariants,
+} from "./button.svelte";
 
 export {
 	Root,
-	type Props,
-	type Events,
+	type ButtonProps as Props,
 	//
 	Root as Button,
-	type Props as ButtonProps,
-	type Events as ButtonEvents,
-	buttonVariants
+	buttonVariants,
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
 };
diff --git a/src/lib/components/ui/card/card-content.svelte b/src/lib/components/ui/card/card-content.svelte
index 52776fa..1f52856 100644
--- a/src/lib/components/ui/card/card-content.svelte
+++ b/src/lib/components/ui/card/card-content.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from '$lib/utils.js';
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
-
-	let className: $$Props['class'] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div class={cn('p-6 pt-0', className)} {...$$restProps}>
-	<slot />
+<div bind:this={ref} class={cn("p-6", className)} {...restProps}>
+	{@render children?.()}
 </div>
diff --git a/src/lib/components/ui/card/card-description.svelte b/src/lib/components/ui/card/card-description.svelte
index 33d2930..da02664 100644
--- a/src/lib/components/ui/card/card-description.svelte
+++ b/src/lib/components/ui/card/card-description.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from '$lib/utils.js';
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLParagraphElement>;
-
-	let className: $$Props['class'] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
 </script>
 
-<p class={cn('text-sm text-muted-foreground', className)} {...$$restProps}>
-	<slot />
+<p bind:this={ref} class={cn("text-muted-foreground text-sm", className)} {...restProps}>
+	{@render children?.()}
 </p>
diff --git a/src/lib/components/ui/card/card-footer.svelte b/src/lib/components/ui/card/card-footer.svelte
index c97fd43..6894149 100644
--- a/src/lib/components/ui/card/card-footer.svelte
+++ b/src/lib/components/ui/card/card-footer.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from '$lib/utils.js';
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
-
-	let className: $$Props['class'] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div class={cn('flex items-center p-6 pt-0', className)} {...$$restProps}>
-	<slot />
+<div bind:this={ref} class={cn("flex items-center p-6 pt-0", className)} {...restProps}>
+	{@render children?.()}
 </div>
diff --git a/src/lib/components/ui/card/card-header.svelte b/src/lib/components/ui/card/card-header.svelte
index 43be1c6..1baa92c 100644
--- a/src/lib/components/ui/card/card-header.svelte
+++ b/src/lib/components/ui/card/card-header.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from '$lib/utils.js';
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
-
-	let className: $$Props['class'] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div class={cn('flex flex-col space-y-1.5 p-6', className)} {...$$restProps}>
-	<slot />
+<div bind:this={ref} class={cn("flex flex-col space-y-1.5 p-6 pb-0", className)} {...restProps}>
+	{@render children?.()}
 </div>
diff --git a/src/lib/components/ui/card/card-title.svelte b/src/lib/components/ui/card/card-title.svelte
index 5520e72..aa4f7f8 100644
--- a/src/lib/components/ui/card/card-title.svelte
+++ b/src/lib/components/ui/card/card-title.svelte
@@ -1,21 +1,25 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import type { HeadingLevel } from './index.js';
-	import { cn } from '$lib/utils.js';
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
-		tag?: HeadingLevel;
-	};
-
-	let className: $$Props['class'] = undefined;
-	export let tag: $$Props['tag'] = 'h3';
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 3,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		level?: 1 | 2 | 3 | 4 | 5 | 6;
+	} = $props();
 </script>
 
-<svelte:element
-	this={tag}
-	class={cn('text-lg font-semibold leading-none tracking-tight', className)}
-	{...$$restProps}
+<div
+	role="heading"
+	aria-level={level}
+	bind:this={ref}
+	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	{...restProps}
 >
-	<slot />
-</svelte:element>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/card/card.svelte b/src/lib/components/ui/card/card.svelte
index 78fe4ff..3e3a4ed 100644
--- a/src/lib/components/ui/card/card.svelte
+++ b/src/lib/components/ui/card/card.svelte
@@ -1,16 +1,20 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from '$lib/utils.js';
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
-
-	let className: $$Props['class'] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
-	class={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
-	{...$$restProps}
+	bind:this={ref}
+	class={cn("bg-card text-card-foreground rounded-lg border shadow-sm", className)}
+	{...restProps}
 >
-	<slot />
+	{@render children?.()}
 </div>
diff --git a/src/lib/components/ui/card/index.ts b/src/lib/components/ui/card/index.ts
index 86c5408..0f9084d 100644
--- a/src/lib/components/ui/card/index.ts
+++ b/src/lib/components/ui/card/index.ts
@@ -1,9 +1,9 @@
-import Root from './card.svelte';
-import Content from './card-content.svelte';
-import Description from './card-description.svelte';
-import Footer from './card-footer.svelte';
-import Header from './card-header.svelte';
-import Title from './card-title.svelte';
+import Root from "./card.svelte";
+import Content from "./card-content.svelte";
+import Description from "./card-description.svelte";
+import Footer from "./card-footer.svelte";
+import Header from "./card-header.svelte";
+import Title from "./card-title.svelte";
 
 export {
 	Root,
@@ -18,7 +18,5 @@ export {
 	Description as CardDescription,
 	Footer as CardFooter,
 	Header as CardHeader,
-	Title as CardTitle
+	Title as CardTitle,
 };
-
-export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
diff --git a/src/lib/components/ui/skeleton/index.ts b/src/lib/components/ui/skeleton/index.ts
index 3120ce1..186db21 100644
--- a/src/lib/components/ui/skeleton/index.ts
+++ b/src/lib/components/ui/skeleton/index.ts
@@ -1,7 +1,7 @@
-import Root from './skeleton.svelte';
+import Root from "./skeleton.svelte";
 
 export {
 	Root,
 	//
-	Root as Skeleton
+	Root as Skeleton,
 };
diff --git a/src/lib/components/ui/skeleton/skeleton.svelte b/src/lib/components/ui/skeleton/skeleton.svelte
index d810af1..4089b49 100644
--- a/src/lib/components/ui/skeleton/skeleton.svelte
+++ b/src/lib/components/ui/skeleton/skeleton.svelte
@@ -1,11 +1,17 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from '$lib/utils.js';
+	import type { WithElementRef, WithoutChildren } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
-
-	let className: $$Props['class'] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
 </script>
 
-<div class={cn('animate-pulse rounded-t-md bg-muted', className)} {...$$restProps}></div>
+<div
+	bind:this={ref}
+	class={cn("bg-muted animate-pulse rounded-md", className)}
+	{...restProps}
+></div>
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 42f23ed..6912355 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,3 +1,20 @@
+export const skills = [
+	{ name: 'Rust', icon: '🦀', url: 'https://www.rust-lang.org/' },
+	{ name: 'Svelte', icon: '🧡', url: 'https://svelte.dev/' },
+	{ name: 'Zig', icon: '⚡️', url: 'https://ziglang.org/' },
+	{ name: 'Go', icon: '🐹', url: 'https://golang.org/' },
+	{ name: 'Godot', icon: '🎮', url: 'https://godotengine.org/' },
+	{ name: 'Python', icon: '🐍', url: 'https://www.python.org/' },
+	{
+		name: 'JavaScript',
+		icon: '📺',
+		url: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript'
+	},
+	{ name: 'TypeScript', icon: '💻', url: 'https://www.typescriptlang.org/' },
+	{ name: 'HTML & CSS', icon: '🌐', url: 'https://developer.mozilla.org/en-US/docs/Learn/HTML' },
+	{ name: 'Git & GitHub', icon: '🔧', url: 'https://github.com/' }
+];
+
 export const projects = [
 	{
 		title: 'chadmaths',
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index eba19d8..ac680b3 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,56 +1,6 @@
-import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { cubicOut } from 'svelte/easing';
-import type { TransitionConfig } from 'svelte/transition';
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs));
 }
-
-type FlyAndScaleParams = {
-	y?: number;
-	x?: number;
-	start?: number;
-	duration?: number;
-};
-
-export const flyAndScale = (
-	node: Element,
-	params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
-): TransitionConfig => {
-	const style = getComputedStyle(node);
-	const transform = style.transform === 'none' ? '' : style.transform;
-
-	const scaleConversion = (valueA: number, scaleA: [number, number], scaleB: [number, number]) => {
-		const [minA, maxA] = scaleA;
-		const [minB, maxB] = scaleB;
-
-		const percentage = (valueA - minA) / (maxA - minA);
-		const valueB = percentage * (maxB - minB) + minB;
-
-		return valueB;
-	};
-
-	const styleToString = (style: Record<string, number | string | undefined>): string => {
-		return Object.keys(style).reduce((str, key) => {
-			if (style[key] === undefined) return str;
-			return str + `${key}:${style[key]};`;
-		}, '');
-	};
-
-	return {
-		duration: params.duration ?? 200,
-		delay: 0,
-		css: (t) => {
-			const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
-			const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
-			const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
-
-			return styleToString({
-				transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
-				opacity: t
-			});
-		},
-		easing: cubicOut
-	};
-};
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 67073b1..0fbb65a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,16 +1,21 @@
 <script lang="ts">
-	import '../app.pcss';
+	import '../app.css';
 	import { ModeWatcher, toggleMode } from 'mode-watcher';
 	import * as Avatar from '$lib/components/ui/avatar';
 	import { Button } from '$lib/components/ui/button';
 	import { Sun, Moon } from 'lucide-svelte';
 
 	import { page } from '$app/stores';
-	import { onMount } from 'svelte';
+	import { onMount, type Snippet } from 'svelte';
 	import { fade } from 'svelte/transition';
+	interface Props {
+		children?: Snippet;
+	}
+
+	let { children }: Props = $props();
 
-	let coords = { x: 0, y: 0 };
-	let size = 0;
+	let coords = $state({ x: 0, y: 0 });
+	let size = $state(0);
 	let button_down = false;
 
 	function handleLeave(e: PointerEvent) {
@@ -78,24 +83,26 @@
 		}
 	}
 
-	let mounted = false;
+	let mounted = $state(false);
 	onMount(() => (mounted = true));
 
-	let isTouchDevice = false;
-	$: if (mounted) isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+	let isTouchDevice = $state(false);
+	$effect(() => {
+		if (mounted) isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+	});
 </script>
 
 <ModeWatcher disableTransitions={false} />
 
 <svelte:body
-	on:pointerleave={!isTouchDevice ? handleLeave : null}
-	on:pointerenter={!isTouchDevice ? handleEnter : null}
-	on:pointerdown={!isTouchDevice ? handleDown : null}
-	on:pointerup={!isTouchDevice ? handleUp : null}
-	on:pointermove={!isTouchDevice ? handleMove : null}
+	onpointerleave={!isTouchDevice ? handleLeave : null}
+	onpointerenter={!isTouchDevice ? handleEnter : null}
+	onpointerdown={!isTouchDevice ? handleDown : null}
+	onpointerup={!isTouchDevice ? handleUp : null}
+	onpointermove={!isTouchDevice ? handleMove : null}
 />
 
-<svelte:window on:scroll={!isTouchDevice ? handleScroll : null} />
+<svelte:window onscroll={!isTouchDevice ? handleScroll : null} />
 
 <div class="min-h-screen">
 	<header
@@ -106,7 +113,7 @@
 				<div class="hidden items-center gap-1.5 sm:flex">
 					<Button href="/" variant="link" class="p-0">
 						<Avatar.Root>
-							<Avatar.Image src="favicon.png" alt="portfolio" class="rounded-md" />
+							<Avatar.Image src="favicon.png" alt="portfolio" />
 							<Avatar.Fallback>PF</Avatar.Fallback>
 						</Avatar.Root>
 					</Button>
@@ -123,12 +130,12 @@
 					<Button href="https://github.com/nwrenger" target="_blank" variant="link">Github</Button>
 				</div>
 				<div class="flex items-center justify-end gap-2.5">
-					<Button on:click={toggleMode} variant="outline" size="icon">
+					<Button onclick={toggleMode} variant="outline" size="icon">
 						<Sun
-							class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+							class="!size-5 h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
 						/>
 						<Moon
-							class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+							class="absolute !size-5 h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
 						/>
 						<span class="sr-only">Toggle theme</span>
 					</Button>
@@ -138,7 +145,7 @@
 	</header>
 
 	<div class="container max-w-6xl space-y-8 px-4 py-5">
-		<slot />
+		{@render children?.()}
 	</div>
 </div>
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9deddb1..26fecb0 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,3 +1,8 @@
+<script>
+	import { skills } from '$lib';
+	import * as Card from '$lib/components/ui/card';
+</script>
+
 <svelte:head>
 	<title>portfolio</title>
 	<meta
@@ -29,17 +34,26 @@
 		<code>Python</code>, or even a game engine like
 		<code>Godot</code>, so keep your eyes peeled! Or just check out the list below:
 	</p>
-	<ul>
-		<li><code>Rust</code></li>
-		<li><code>Svelte</code></li>
-		<li><code>Zig</code></li>
-		<li><code>Go</code></li>
-		<li><code>Godot</code></li>
-		<li><code>Python</code></li>
-		<li><code>JavaScript</code> / <code>TypeScript</code></li>
-		<li><code>HTML</code> & <code>CSS</code></li>
-		<li><code>Git</code> & <code>GitHub</code></li>
-	</ul>
+	<div class="grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-4">
+		{#each skills as skill}
+			<a href={skill.url} target="_blank" rel="noopener noreferrer">
+				<Card.Root
+					class="group flex h-full transform-gpu flex-col items-start justify-start overflow-hidden rounded-lg border-none transition-all duration-300 ease-out hover:scale-[104%] hover:bg-primary hover:text-accent hover:shadow-lg hover:shadow-primary/30"
+				>
+					<Card.Header class="w-full p-4">
+						<div class="flex w-full items-center justify-between">
+							<Card.Title class="font-semibold">{skill.name}</Card.Title>
+							<span
+								class="text-3xl transition-transform duration-300 ease-out group-hover:rotate-3"
+							>
+								{skill.icon}
+							</span>
+						</div>
+					</Card.Header>
+				</Card.Root>
+			</a>
+		{/each}
+	</div>
 </div>
 
 <div class="mt-10 space-y-3">
diff --git a/src/routes/ImageLoader.svelte b/src/routes/ImageLoader.svelte
index 2395d9f..47ed9a6 100644
--- a/src/routes/ImageLoader.svelte
+++ b/src/routes/ImageLoader.svelte
@@ -1,17 +1,28 @@
 <script lang="ts">
 	import Skeleton from '$lib/components/ui/skeleton/skeleton.svelte';
 	import { onMount } from 'svelte';
-	export let src: string;
-	export let alt = '';
 
-	export let width = 'w-full';
-	export let height = 'h-full';
-	export let ratio = 'aspect-auto';
-	export let rounded = 'rounded-lg';
+	interface Props {
+		src: string;
+		alt?: string;
+		width?: string;
+		height?: string;
+		ratio?: string;
+		rounded?: string;
+	}
+
+	let {
+		src,
+		alt = '',
+		width = 'w-full',
+		height = 'h-full',
+		ratio = 'aspect-auto',
+		rounded = 'rounded-lg'
+	}: Props = $props();
 	const base = `${width} ${height} ${ratio} ${rounded}`;
 
-	let loaded = false;
-	let mounted = false;
+	let loaded = $state(false);
+	let mounted = $state(false);
 
 	function handleLoad() {
 		loaded = true;
@@ -25,5 +36,5 @@
 {/if}
 
 {#if mounted}
-	<img {src} {alt} on:load={handleLoad} class="{base} object-cover {!loaded ? 'hidden' : ''}" />
+	<img {src} {alt} onload={handleLoad} class="{base} object-cover {!loaded ? 'hidden' : ''}" />
 {/if}
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index d109df8..0797177 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -26,9 +26,9 @@
 	<div class="grid w-full gap-6 md:grid-cols-2">
 		{#each projects as { title, summary, picture, description, link, archived }}
 			<Card.Root
-				class="flex h-full transform flex-col items-start justify-start overflow-hidden rounded-lg border-none transition-transform hover:scale-[102%] hover:shadow-lg"
+				class="flex h-full transform-gpu flex-col items-start justify-start overflow-hidden rounded-lg border-none transition-all duration-300 ease-out hover:scale-[102%] hover:shadow-md"
 			>
-				<a href={'projects/' + picture} target="_blank" class="link w-full">
+				<a href={'projects/' + picture} target="_blank" class="w-full">
 					<ImageLoader
 						src={'projects/' + picture}
 						alt={title}
@@ -38,20 +38,21 @@
 				</a>
 				<Card.Header class="w-full p-4">
 					<div class="flex w-full items-center justify-between">
-						<Card.Title class="text-2xl font-semibold">{title}</Card.Title>
+						<Card.Title class="text-2xl font-semibold">
+							{title}
+						</Card.Title>
 						{#if archived}
 							<Badge variant="secondary">Archived</Badge>
 						{/if}
 					</div>
-					<Card.Description class="mb-2 text-base leading-7 text-muted-foreground"
-						>{summary}</Card.Description
-					>
+					<Card.Description class="mb-2 text-base leading-7">
+						{summary}
+					</Card.Description>
 					<p>{@html description}</p>
 					<div class="mt-4">
 						<a href={link} class="link flex w-fit items-center" target="_blank">
-							See the {archived ? 'archived' : ''} Project here <ExternalLink
-								class="size- pl-2 pt-[2px]"
-							/>
+							See the {archived ? 'archived' : ''} Project here
+							<ExternalLink class="size- pl-2 pt-[2px]" />
 						</a>
 					</div>
 				</Card.Header>
diff --git a/tailwind.config.js b/tailwind.config.ts
similarity index 59%
rename from tailwind.config.js
rename to tailwind.config.ts
index 502a380..c1ff5f8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.ts
@@ -1,7 +1,8 @@
 import { fontFamily } from 'tailwindcss/defaultTheme';
+import tailwindcssAnimate from 'tailwindcss-animate';
+import { Config } from 'tailwindcss/types/config';
 
-/** @type {import('tailwindcss').Config} */
-const config = {
+const config: Config = {
 	darkMode: ['class'],
 	content: ['./src/**/*.{html,js,svelte,ts}'],
 	safelist: ['dark'],
@@ -47,21 +48,49 @@ const config = {
 				card: {
 					DEFAULT: 'hsl(var(--card) / <alpha-value>)',
 					foreground: 'hsl(var(--card-foreground) / <alpha-value>)'
+				},
+				sidebar: {
+					DEFAULT: 'hsl(var(--sidebar-background))',
+					foreground: 'hsl(var(--sidebar-foreground))',
+					primary: 'hsl(var(--sidebar-primary))',
+					'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+					accent: 'hsl(var(--sidebar-accent))',
+					'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+					border: 'hsl(var(--sidebar-border))',
+					ring: 'hsl(var(--sidebar-ring))'
 				}
 			},
-			backgroundImage: {
-				'gradient-conic': 'conic-gradient(at 50% -80%, var(--tw-gradient-stops))'
-			},
 			borderRadius: {
+				xl: 'calc(var(--radius) + 4px)',
 				lg: 'var(--radius)',
 				md: 'calc(var(--radius) - 2px)',
 				sm: 'calc(var(--radius) - 4px)'
 			},
 			fontFamily: {
 				sans: [...fontFamily.sans]
+			},
+			keyframes: {
+				'accordion-down': {
+					from: { height: '0' },
+					to: { height: 'var(--radix-accordion-content-height)' }
+				},
+				'accordion-up': {
+					from: { height: 'var(--radix-accordion-content-height)' },
+					to: { height: '0' }
+				},
+				'caret-blink': {
+					'0%,70%,100%': { opacity: '1' },
+					'20%,50%': { opacity: '0' }
+				}
+			},
+			animation: {
+				'accordion-down': 'accordion-down 0.2s ease-out',
+				'accordion-up': 'accordion-up 0.2s ease-out',
+				'caret-blink': 'caret-blink 1.25s ease-out infinite'
 			}
 		}
-	}
+	},
+	plugins: [tailwindcssAnimate]
 };
 
 export default config;