diff --git a/apps/docs/src/lib/components/Sidebar.svelte b/apps/docs/src/lib/components/Sidebar.svelte
index b7bb7cca..7606b333 100644
--- a/apps/docs/src/lib/components/Sidebar.svelte
+++ b/apps/docs/src/lib/components/Sidebar.svelte
@@ -161,6 +161,7 @@
 				<li>
 					<strong><Dashboard /><Space w="md" />Data Display</strong>
 					<ul>
+						<li><a href={`${base}/core/accordion`}>Accordion</a></li>
 						<li><a href={`${base}/core/badge`}>Badge</a></li>
 						<li><a href={`${base}/core/card`}>Card</a></li>
 						<li><a href={`${base}/core/image`}>Image</a></li>
diff --git a/apps/docs/src/lib/components/TopBar/data.ts b/apps/docs/src/lib/components/TopBar/data.ts
index 17514c92..9d13dced 100644
--- a/apps/docs/src/lib/components/TopBar/data.ts
+++ b/apps/docs/src/lib/components/TopBar/data.ts
@@ -36,11 +36,13 @@ export const searchLinks = [
 	{ title: 'SvelteUIProvider', link: `${base}/theming/svelteui-provider`, section: 'Theming' },
 	{ title: 'Utilities', link: `${base}/theming/stitches-utilities`, section: 'Theming' },
 
+	{ title: 'Accordion', link: `${base}/core/accordion`, section: 'Components' },
 	{ title: 'ActionIcon', link: `${base}/core/action-icon`, section: 'Components' },
 	{ title: 'Affix', link: `${base}/core/affix`, section: 'Components' },
 	{ title: 'Alert', link: `${base}/core/alert`, section: 'Components' },
 	{ title: 'Anchor', link: `${base}/core/anchor`, section: 'Components' },
 	{ title: 'AppShell', link: `${base}/core/app-shell`, section: 'Components' },
+	{ title: 'AspectRatio', link: `${base}/core/aspect-ratio`, section: 'Components' },
 	{ title: 'Badge', link: `${base}/core/badge`, section: 'Components' },
 	{ title: 'Box', link: `${base}/core/box`, section: 'Components' },
 	{ title: 'Burger', link: `${base}/core/burger`, section: 'Components' },
@@ -52,6 +54,7 @@ export const searchLinks = [
 	{ title: 'Code', link: `${base}/core/code`, section: 'Components' },
 	{ title: 'Container', link: `${base}/core/container`, section: 'Components' },
 	{ title: 'Divider', link: `${base}/core/divider`, section: 'Components' },
+	{ title: 'Flex', link: `${base}/core/flex`, section: 'Components' },
 	{ title: 'Grid', link: `${base}/core/grid`, section: 'Components' },
 	{ title: 'Group', link: `${base}/core/group`, section: 'Components' },
 	{ title: 'Image', link: `${base}/core/image`, section: 'Components' },
@@ -78,6 +81,7 @@ export const searchLinks = [
 	{ title: 'Stack', link: `${base}/core/stack`, section: 'Components' },
 	{ title: 'Switch', link: `${base}/core/switch`, section: 'Components' },
 	{ title: 'Tabs', link: `${base}/core/tabs`, section: 'Components' },
+	{ title: 'Textarea', link: `${base}/core/textarea`, section: 'Components' },
 	{ title: 'TextInput', link: `${base}/core/text-input`, section: 'Components' },
 	{ title: 'Text', link: `${base}/core/text`, section: 'Components' },
 	{ title: 'ThemeIcon', link: `${base}/core/theme-icon`, section: 'Components' },
diff --git a/apps/docs/src/lib/data/main/homepage.js b/apps/docs/src/lib/data/main/homepage.js
index 41af88ec..e1a285ea 100644
--- a/apps/docs/src/lib/data/main/homepage.js
+++ b/apps/docs/src/lib/data/main/homepage.js
@@ -1,6 +1,7 @@
 import { Accessibility, Dashboard, Box as BoxIcon } from 'radix-icons-svelte';
 import TypeScript from '../../components/svgs/TypeScript.svelte';
 import {
+	Accordion,
 	Container,
 	Center,
 	SimpleGrid,
@@ -180,6 +181,14 @@ export const components = [
 		title: 'Switch',
 		color: '$blue600'
 	},
+	{
+		icon: BoxIcon,
+		component: Accordion,
+		link: 'core/accordion',
+		title: 'Accordion',
+		color: '$blue600',
+		content: 'BETA'
+	},
 	{
 		icon: BoxIcon,
 		component: Badge,
diff --git a/apps/docs/src/routes/core/accordion/+page.md b/apps/docs/src/routes/core/accordion/+page.md
new file mode 100644
index 00000000..00a48bbd
--- /dev/null
+++ b/apps/docs/src/routes/core/accordion/+page.md
@@ -0,0 +1,81 @@
+---
+title: Accordion
+group: 'svelteuidev-core'
+packageGroup: '@svelteuidev/core'
+slug: /core/accordion/
+category: 'data-display'
+description: 'Shows and divides content into collapsible sections'
+importCode: "import { Accordion } from '@svelteuidev/core';"
+source: 'svelteui-core/src/components/Accordion/Accordion.svelte'
+docs: 'core/accordion'
+---
+
+<script lang="ts">
+  import { Demo, AccordionDemos } from '@svelteuidev/demos';
+  import { Heading } from "$lib/components";
+  import { base } from '$app/paths';
+</script>
+
+<svelte:head>
+
+  <title>{title} - SvelteUI</title>
+</svelte:head>
+
+<Heading {title} {group} {packageGroup} {slug} {category} {description} {importCode} {source} {docs} />
+
+## Usage
+
+<Demo demo={AccordionDemos.configurator} />
+
+## Customize Control
+
+Control can be fully customizable by setting any king of element inside the `control` slot.
+
+<Demo demo={AccordionDemos.custom} />
+
+## Change chevron
+
+<Demo demo={AccordionDemos.chevron} />
+
+## Controlled
+
+The accordion component can be controlled externally with the prop `value` (which can be binded) and with the `on:change` event.
+
+<Demo demo={AccordionDemos.controlled} />
+
+## Default open
+
+It's possible to set default opened items with the prop `defaultValue`. When `multiple` is false, this value should be a string.
+
+<Demo demo={AccordionDemos.defaultValue} />
+
+When `multiple` is `true`, this should be provided as an arrays of strings.
+
+<Demo demo={AccordionDemos.defaultValueMultiple} />
+
+## Disabled items
+
+<Demo demo={AccordionDemos.disabled} />
+
+## Transition
+
+It's possible to change the chevron transition duration by modifying the prop `transitionDuration` (in milliseconds).
+
+<Demo demo={AccordionDemos.transitionDuration} />
+
+To disable the transition completely, set `transitionDuration` to `0`.
+
+<Demo demo={AccordionDemos.noTransition} />
+
+## Data attributes
+
+Each item exposes data attributes that can be used to style the component.
+
+- `data-rotate` for the chevron, which tells if the chevron should rotate. If `disableChevronRotation` is set, it will always be false.
+- `data-active` in `Accordion.Item` when it's content is expanded.
+
+<Demo demo={AccordionDemos.data} />
+
+## Accessibility
+
+The accordion component follows the [WAI-ARIA recommendations](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/) on accessibility.
diff --git a/packages/svelteui-core/src/components/Accordion/Accordion.d.ts b/packages/svelteui-core/src/components/Accordion/Accordion.d.ts
new file mode 100644
index 00000000..0d494c40
--- /dev/null
+++ b/packages/svelteui-core/src/components/Accordion/Accordion.d.ts
@@ -0,0 +1,46 @@
+import { HTMLAttributes } from 'svelte/elements';
+import { Component } from '$lib/internal';
+import type { DefaultProps, SvelteUINumberSize } from '$lib/styles';
+
+export type AccordionVariant = 'default' | 'contained' | 'filled' | 'separated';
+
+export type AccordionValue<Multiple> = Multiple extends true ? string[] : string | null;
+
+export type AccordionContext<Multiple extends boolean = false> = Writable<{
+	currentValue?: AccordionValue<Multiple>;
+	variant?: AccordionVariant;
+	order?: 2 | 3 | 4 | 5 | 6;
+	radius?: SvelteUINumberSize | number;
+	chevron?: Component | HTMLOrSVGElement;
+	chevronPosition?: 'left' | 'right';
+	chevronSize?: string | number;
+	disableChevronRotation?: boolean;
+	transitionDuration?: number?;
+	updateActive: (value: string) => void;
+	isItemActive: (value: string) => boolean;
+	getControlsId: (value: string) => string;
+	getRegionId: (value: string) => string;
+}>;
+
+export interface AccordionProps<Multiple extends boolean = false>
+	extends DefaultProps,
+		HTMLAttributes<HTMLElement> {
+	variant?: AccordionVariant;
+	value?: AccordionValue<Multiple>;
+	defaultValue?: AccordionValue<Multiple>;
+	radius?: SvelteUINumberSize | number;
+	order?: 2 | 3 | 4 | 5 | 6;
+	multiple?: Multiple;
+	loop?: boolean;
+	id?: string;
+	chevron?: Component | HTMLOrSVGElement;
+	chevronPosition?: 'left' | 'right';
+	chevronSize?: string | number;
+	disableChevronRotation?: boolean;
+	transitionDuration?: number?;
+}
+
+export interface AccordionEvents<Multiple extends boolean = false> {
+	change: CustomEvent<AccordionValue<Multiple>>;
+	[evt: string]: CustomEvent<any>;
+}
diff --git a/packages/svelteui-core/src/components/Accordion/Accordion.stories.svelte b/packages/svelteui-core/src/components/Accordion/Accordion.stories.svelte
new file mode 100644
index 00000000..73925e3f
--- /dev/null
+++ b/packages/svelteui-core/src/components/Accordion/Accordion.stories.svelte
@@ -0,0 +1,96 @@
+<script lang="ts">
+	import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+	import { Accordion } from './index';
+
+	let value = 'typescript';
+</script>
+
+<Meta title="Components/Accordion" component={Accordion} />
+
+<Template let:args>
+	<Accordion {...args} defaultValue="typescript">
+		<Accordion.Item value="typescript">
+			<div slot="control">Typescript Based</div>
+			Build type safe applications. All SvelteUI packages are built with TypeScript and support it by
+			default. All components and functions export types, are documented, and give developers autocomplete
+			features!
+		</Accordion.Item>
+		<Accordion.Item value="packed">
+			<div slot="control">Feature packed</div>
+			SvelteUI contains more than just components. With Actions, Transitions, and Utilities available
+			to you, development will be fun and easy!
+		</Accordion.Item>
+		<Accordion.Item value="accessible">
+			<div slot="control">Accessible and usable</div>
+			All components are accessible according to WAI-ARIA standards. On top of that, no annoying focus
+			ring. It will appear only when user navigates with keyboard.
+		</Accordion.Item>
+	</Accordion>
+</Template>
+
+<Story name="Accordion" id="accordionStory" />
+
+<Story name="Multiple Tabs Open" id="accordionMultipleStory" args={{ multiple: true }} />
+
+<Story name="Disabled Tabs" id="accordionDisabledStory">
+	<Accordion defaultValue="typescript">
+		<Accordion.Item value="typescript">
+			<div slot="control">Typescript Based</div>
+			Build type safe applications. All SvelteUI packages are built with TypeScript and support it by
+			default. All components and functions export types, are documented, and give developers autocomplete
+			features!
+		</Accordion.Item>
+		<Accordion.Item value="packed" disabled>
+			<div slot="control">Feature packed</div>
+			SvelteUI contains more than just components. With Actions, Transitions, and Utilities available
+			to you, development will be fun and easy!
+		</Accordion.Item>
+		<Accordion.Item value="accessible">
+			<div slot="control">Accessible and usable</div>
+			All components are accessible according to WAI-ARIA standards. On top of that, no annoying focus
+			ring. It will appear only when user navigates with keyboard.
+		</Accordion.Item>
+	</Accordion>
+</Story>
+
+<Story name="Multiple Tabs Open With Default" id="accordionMultipleDefaultStory">
+	<Accordion multiple={true} defaultValue={['packed', 'accessible']}>
+		<Accordion.Item value="typescript">
+			<div slot="control">Typescript Based</div>
+			Build type safe applications. All SvelteUI packages are built with TypeScript and support it by
+			default. All components and functions export types, are documented, and give developers autocomplete
+			features!
+		</Accordion.Item>
+		<Accordion.Item value="packed">
+			<div slot="control">Feature packed</div>
+			SvelteUI contains more than just components. With Actions, Transitions, and Utilities available
+			to you, development will be fun and easy!
+		</Accordion.Item>
+		<Accordion.Item value="accessible">
+			<div slot="control">Accessible and usable</div>
+			All components are accessible according to WAI-ARIA standards. On top of that, no annoying focus
+			ring. It will appear only when user navigates with keyboard.
+		</Accordion.Item>
+	</Accordion>
+</Story>
+
+<Story name="Controlled" id="accordionControlledStory">
+	<Accordion {value} on:change={(e) => (value = e.detail)}>
+		<Accordion.Item value="typescript">
+			<div slot="control">Typescript Based</div>
+			Build type safe applications. All SvelteUI packages are built with TypeScript and support it by
+			default. All components and functions export types, are documented, and give developers autocomplete
+			features!
+		</Accordion.Item>
+		<Accordion.Item value="packed">
+			<div slot="control">Feature packed</div>
+			SvelteUI contains more than just components. With Actions, Transitions, and Utilities available
+			to you, development will be fun and easy!
+		</Accordion.Item>
+		<Accordion.Item value="accessible">
+			<div slot="control">Accessible and usable</div>
+			All components are accessible according to WAI-ARIA standards. On top of that, no annoying focus
+			ring. It will appear only when user navigates with keyboard.
+		</Accordion.Item>
+	</Accordion>
+</Story>
diff --git a/packages/svelteui-core/src/components/Accordion/Accordion.styles.ts b/packages/svelteui-core/src/components/Accordion/Accordion.styles.ts
new file mode 100644
index 00000000..1657844e
--- /dev/null
+++ b/packages/svelteui-core/src/components/Accordion/Accordion.styles.ts
@@ -0,0 +1,14 @@
+import { createStyles } from '$lib/styles';
+import type { SvelteUINumberSize } from '$lib/styles';
+import type { AccordionVariant } from './Accordion';
+
+export interface AccordionStylesParams {
+	radius: SvelteUINumberSize;
+	variant: AccordionVariant;
+}
+
+export default createStyles((theme, { radius, variant }: AccordionStylesParams) => {
+	return {
+		root: {}
+	};
+});
diff --git a/packages/svelteui-core/src/components/Accordion/Accordion.svelte b/packages/svelteui-core/src/components/Accordion/Accordion.svelte
new file mode 100644
index 00000000..3b446c66
--- /dev/null
+++ b/packages/svelteui-core/src/components/Accordion/Accordion.svelte
@@ -0,0 +1,151 @@
+<script lang="ts" generics="Multiple extends boolean = false">
+	// Temporary eslint disable while svelte-eslint-parser does not support generics in file -->
+	/* eslint-disable no-undef */
+	import { createEventDispatcher, setContext } from 'svelte';
+	import { writable } from 'svelte/store';
+	import { randomID } from '$lib/styles';
+	import { Box } from '../Box';
+	import { key } from './key';
+	import Chevron from './Chevron/Chevron.svelte';
+	import useStyles from './Accordion.styles';
+	import type {
+		AccordionContext,
+		AccordionProps as $$AccordionProps,
+		AccordionEvents as $$AccordionEvents,
+		AccordionValue
+	} from './Accordion';
+
+	interface $$Props extends $$AccordionProps<Multiple> {}
+
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	interface $$Events extends $$AccordionEvents<Multiple> {}
+
+	export let use: $$Props['use'] = [],
+		element: $$Props['element'] = undefined,
+		className: $$Props['className'] = '',
+		override: $$Props['override'] = {},
+		variant: $$Props['variant'] = 'default',
+		value: $$Props['value'] = undefined,
+		defaultValue: $$Props['defaultValue'] = undefined,
+		radius: $$Props['radius'] = 'sm',
+		order: $$Props['order'] = undefined,
+		multiple: $$Props['multiple'] = false as Multiple,
+		id: $$Props['id'] = randomID(),
+		chevron: $$Props['chevron'] = Chevron,
+		chevronPosition: $$Props['chevronPosition'] = 'right',
+		chevronSize: $$Props['chevronSize'] = 24,
+		disableChevronRotation: $$Props['disableChevronRotation'] = false,
+		transitionDuration: $$Props['transitionDuration'] = 200;
+	export { className as class };
+
+	const dispatch = createEventDispatcher();
+
+	let _value: AccordionValue<Multiple> = value || defaultValue;
+	let stateContent = {
+		variant,
+		order,
+		radius,
+		chevron,
+		chevronPosition,
+		chevronSize,
+		disableChevronRotation,
+		transitionDuration,
+		updateActive,
+		isItemActive
+	};
+	const state = writable(stateContent);
+
+	// converts internal value into correct type
+	$: {
+		if (multiple && !Array.isArray(_value)) {
+			_value = (_value ? [_value] : []) as AccordionValue<Multiple>;
+		}
+	}
+
+	// allows for reactivity to prop changes
+	$: {
+		stateContent = {
+			currentValue: _value,
+			variant,
+			order,
+			radius,
+			chevron,
+			chevronPosition,
+			chevronSize,
+			disableChevronRotation,
+			transitionDuration,
+			updateActive,
+			isItemActive,
+			getControlsId,
+			getRegionId
+		} as AccordionContext;
+		state.set(stateContent);
+	}
+
+	function updateActive(itemValue: string) {
+		if (!multiple) {
+			_value = (_value === itemValue ? undefined : itemValue) as AccordionValue<Multiple>;
+			dispatch('change', _value);
+			return;
+		}
+
+		let values = (_value || []) as string[];
+		if (values.includes(itemValue)) {
+			values = values.filter((v) => v !== itemValue);
+		} else {
+			values.push(itemValue);
+		}
+		_value = values as AccordionValue<Multiple>;
+		dispatch('change', _value);
+	}
+
+	function isItemActive(itemValue: string) {
+		return multiple ? _value.includes(itemValue) : _value === itemValue;
+	}
+
+	function getControlsId(itemValue: string) {
+		return `${id}-${itemValue}-panel`;
+	}
+
+	function getRegionId(itemValue: string) {
+		return `${id}-${itemValue}-region`;
+	}
+
+	setContext(key, state);
+
+	$: ({ cx, classes, getStyles } = useStyles({ radius, variant }, { name: 'Accordion' }));
+</script>
+
+<!--
+@component
+
+Accordion component that allows the collapsing of each item.
+
+@see https://svelteui.org/core/accordion
+@example
+    ```svelte
+    <Accordion defaultValue="typescript">
+      <Accordion.Item value="typescript">
+        <div slot="control">Typescript Based</div>
+        Content of the accordion item
+      </Accordion.Item>
+      <Accordion.Item value="packed" disabled>
+        <div slot="control">Feature packed</div>
+        ...
+      </Accordion.Item>
+      <Accordion.Item value="accessible">
+        <div slot="control">Accessible and usable</div>
+        ...
+      </Accordion.Item>
+    </Accordion>
+    ```
+-->
+
+<Box
+	class={cx(className, classes.root, getStyles({ css: override }))}
+	bind:element
+	{use}
+	{...$$restProps}
+>
+	<slot />
+</Box>
diff --git a/packages/svelteui-core/src/components/Accordion/Accordion.test.ts b/packages/svelteui-core/src/components/Accordion/Accordion.test.ts
new file mode 100644
index 00000000..112b7a3f
--- /dev/null
+++ b/packages/svelteui-core/src/components/Accordion/Accordion.test.ts
@@ -0,0 +1,8 @@
+import { describe } from 'vitest';
+import { itSupportsClassName } from '@svelteuidev/tests';
+
+import { Accordion } from './index';
+
+describe('Accordion', () => {
+	itSupportsClassName(Accordion);
+});
diff --git a/packages/svelteui-core/src/components/Accordion/AccordionItem/AccordionItem.d.ts b/packages/svelteui-core/src/components/Accordion/AccordionItem/AccordionItem.d.ts
new file mode 100644
index 00000000..3090ab40
--- /dev/null
+++ b/packages/svelteui-core/src/components/Accordion/AccordionItem/AccordionItem.d.ts
@@ -0,0 +1,11 @@
+import { HTMLAttributes } from 'svelte/elements';
+import type { DefaultProps } from '$lib/styles';
+import { Component } from '$lib/internal';
+import { SvelteUINumberSize } from '$lib/styles';
+import { ButtonProps } from '../../Button';
+
+export interface AccordionItemProps extends ButtonProps {
+	value?: string;
+	chevron?: Component | HTMLOrSVGElement;
+	disabled?: boolean;
+}
diff --git a/packages/svelteui-core/src/components/Accordion/AccordionItem/AccordionItem.styles.ts b/packages/svelteui-core/src/components/Accordion/AccordionItem/AccordionItem.styles.ts
new file mode 100644
index 00000000..30b69c5f
--- /dev/null
+++ b/packages/svelteui-core/src/components/Accordion/AccordionItem/AccordionItem.styles.ts
@@ -0,0 +1,213 @@
+import { createStyles, dark } from '$lib/styles';
+import type { SvelteUINumberSize } from '$lib/styles';
+
+export interface AccordionItemStylesParams {
+	radius?: SvelteUINumberSize | number;
+	transitionDuration?: number;
+	chevronPosition?: 'left' | 'right';
+	chevronSize?: string | number;
+}
+
+export default createStyles(
+	(
+		theme,
+		{ radius, transitionDuration, chevronPosition, chevronSize }: AccordionItemStylesParams,
+		getRef
+	) => {
+		const radiusValue = theme.fn.radius(radius);
+
+		return {
+			root: {},
+			active: {
+				ref: getRef('active')
+			},
+			control: {
+				ref: getRef('control'),
+				width: '100%',
+				display: 'flex',
+				alignItems: 'center',
+				flexDirection: chevronPosition === 'right' ? 'row-reverse' : 'row',
+				paddingRight: theme.space.mdPX.value,
+				paddingLeft:
+					chevronPosition === 'right'
+						? `calc(${theme.space.mdPX.value} + 4px)`
+						: theme.space.xsPX.value,
+				textAlign: 'left',
+				color: theme.colors.black.value,
+
+				darkMode: {
+					color: theme.fn.themeColor('dark')
+				},
+
+				'&:disabled': {
+					opacity: 0.4,
+					cursor: 'not-allowed',
+
+					'@media (hover: hover)': {
+						'&:hover': {
+							backgroundColor: 'transparent'
+						}
+					},
+					'@media (hover: none)': {
+						'&:active': {
+							backgroundColor: 'transparent'
+						}
+					}
+				}
+			},
+			chevron: {
+				display: 'flex',
+				alignItems: 'center',
+				justifyContent: 'center',
+				transition: `transform ${transitionDuration}ms ease`,
+				marginRight: chevronPosition === 'right' ? 0 : theme.space.smPX.value,
+				marginLeft: chevronPosition === 'right' ? theme.space.lgPX.value : 0,
+				width: chevronSize,
+				minWidth: chevronSize,
+				'&[data-rotate="true"]': {
+					transform: 'rotate(180deg)'
+				}
+			},
+			controlContent: {
+				color: 'inherit',
+				fontWeight: 400,
+				flex: 1,
+				overflow: 'hidden',
+				textOverflow: 'ellipsis',
+				paddingTop: theme.space.mdPX.value,
+				paddingBottom: theme.space.mdPX.value
+			},
+			panel: {
+				wordBreak: 'break-word',
+				lineHeight: theme.lineHeights.md.value,
+				padding: theme.space.mdPX.value,
+				paddingTop: `calc(${theme.space.xs.value} / 2)`
+			},
+			variants: {
+				variation: {
+					default: {
+						color: theme.colors.black.value,
+						borderBottom: `1px solid ${theme.fn.themeColor('gray', 3)}`,
+						darkMode: {
+							color: theme.fn.themeColor('dark'),
+							borderBottom: `1px solid ${theme.fn.themeColor('dark', 4)}`
+						},
+
+						[`& .${getRef('control')}`]: {
+							'@media (hover: hover)': {
+								'&:hover': {
+									darkMode: {
+										backgroundColor: theme.fn.themeColor('dark', 6)
+									},
+									backgroundColor: theme.fn.themeColor('gray')
+								}
+							},
+							'@media (hover: none)': {
+								'&:active': {
+									darkMode: {
+										backgroundColor: theme.fn.themeColor('dark', 6)
+									},
+									backgroundColor: theme.fn.themeColor('gray')
+								}
+							}
+						}
+					},
+					contained: {
+						border: `1px solid ${theme.fn.themeColor('gray', 3)}`,
+						transition: 'background-color 150ms ease',
+						overflow: 'hidden',
+
+						[`&.${getRef('active')}`]: {
+							backgroundColor: theme.fn.themeColor('gray')
+						},
+
+						darkMode: {
+							color: theme.fn.themeColor('dark'),
+							borderBottom: `1px solid ${theme.fn.themeColor('dark', 4)}`,
+
+							[`&.${getRef('active')}`]: {
+								backgroundColor: theme.fn.themeColor('dark', 6)
+							}
+						},
+
+						'&:first-of-type': {
+							borderTopRightRadius: radiusValue,
+							borderTopLeftRadius: radiusValue,
+
+							[`& > ${getRef('control')}`]: {
+								borderTopRightRadius: radiusValue,
+								borderTopLeftRadius: radiusValue
+							}
+						},
+
+						'&:last-of-type': {
+							borderBottomRightRadius: radiusValue,
+							borderBottomLeftRadius: radiusValue,
+
+							[`& > ${getRef('control')}`]: {
+								borderBottomRightRadius: radiusValue,
+								borderBottomLeftRadius: radiusValue
+							}
+						},
+
+						'& + &': {
+							borderTop: 0
+						},
+
+						[`& .${getRef('control')}`]: {
+							'@media (hover: hover)': {
+								'&:hover': {
+									darkMode: {
+										backgroundColor: theme.fn.themeColor('dark', 6)
+									},
+									backgroundColor: theme.fn.themeColor('gray')
+								}
+							},
+							'@media (hover: none)': {
+								'&:active': {
+									darkMode: {
+										backgroundColor: theme.fn.themeColor('dark', 6)
+									},
+									backgroundColor: theme.fn.themeColor('gray')
+								}
+							}
+						}
+					},
+					filled: {
+						borderRadius: radiusValue,
+						[`&.${getRef('active')}`]: {
+							backgroundColor: theme.fn.themeColor('gray')
+						},
+						darkMode: {
+							[`&.${getRef('active')}`]: {
+								backgroundColor: theme.fn.themeColor('dark', 6)
+							}
+						}
+					},
+					separated: {
+						borderRadius: radiusValue,
+						backgroundColor: theme.fn.themeColor('gray'),
+						border: `1px solid transparent`,
+						transition: 'background-color 150ms ease',
+
+						'& + &': {
+							marginTop: theme.space.mdPX.value
+						},
+
+						[`&.${getRef('active')}`]: {
+							backgroundColor: theme.colors.white.value,
+							borderColor: theme.fn.themeColor('gray', 3)
+						},
+
+						darkMode: {
+							[`&.${getRef('active')}`]: {
+								backgroundColor: theme.fn.themeColor('dark', 7),
+								borderColor: theme.fn.themeColor('dark', 4)
+							}
+						}
+					}
+				}
+			}
+		};
+	}
+);
diff --git a/packages/svelteui-core/src/components/Accordion/AccordionItem/AccordionItem.svelte b/packages/svelteui-core/src/components/Accordion/AccordionItem/AccordionItem.svelte
new file mode 100644
index 00000000..c2528f84
--- /dev/null
+++ b/packages/svelteui-core/src/components/Accordion/AccordionItem/AccordionItem.svelte
@@ -0,0 +1,96 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import { get_current_component } from 'svelte/internal';
+	import { createEventForwarder } from '$lib/internal';
+	import { Box } from '../../Box';
+	import { UnstyledButton } from '../../Button';
+	import { Collapse } from '../../Collapse';
+	import type { AccordionContext } from '../Accordion';
+	import { key } from '../key';
+	import useStyles from './AccordionItem.styles';
+	import type { AccordionItemProps as $$AccordionItemProps } from './AccordionItem';
+
+	interface $$Props extends $$AccordionItemProps {}
+
+	export let use: $$Props['use'] = [],
+		element: $$Props['element'] = undefined,
+		className: $$Props['className'] = '',
+		override: $$Props['override'] = {},
+		value: $$Props['value'] = undefined,
+		chevron: $$Props['chevron'] = undefined,
+		disabled: $$Props['disabled'] = false;
+	export { className as class };
+
+	const forwardEvents = createEventForwarder(get_current_component());
+
+	const ctx: AccordionContext = getContext(key);
+
+	function onClick() {
+		$ctx.updateActive(value);
+	}
+
+	$: ({ cx, classes, getStyles } = useStyles(
+		{
+			radius: $ctx.radius,
+			transitionDuration: $ctx.transitionDuration,
+			chevronPosition: $ctx.chevronPosition,
+			chevronSize: $ctx.chevronSize
+		},
+		{ name: 'AccordionItem' }
+	));
+</script>
+
+<!--
+@component
+
+Item of an accordion.
+
+@see https://svelteui.org/core/accordion
+@example
+    ```svelte
+    <Accordion.Item value="typescript">
+      <div slot="control">Typescript Based</div>
+      Content of the accordion item
+    </Accordion.Item>
+    ```
+-->
+
+<Box
+	class={cx(className, classes.root, getStyles({ css: override, variation: $ctx.variant }), {
+		[classes.active]: $ctx.isItemActive(value)
+	})}
+	data-active={$ctx.isItemActive(value)}
+	{use}
+	{...$$restProps}
+>
+	<UnstyledButton
+		class={classes.control}
+		bind:element
+		{disabled}
+		id={$ctx.getRegionId(value)}
+		aria-expanded={$ctx.isItemActive(value)}
+		aria-controls={$ctx.getControlsId(value)}
+		on:click={onClick}
+		use={[forwardEvents]}
+	>
+		<span
+			class={classes.chevron}
+			data-rotate={!$ctx.disableChevronRotation && $ctx.isItemActive(value)}
+		>
+			<svelte:component this={chevron || $ctx.chevron} />
+		</span>
+		<span class={classes.controlContent}>
+			<slot name="control" {disabled} />
+		</span>
+	</UnstyledButton>
+	<Collapse
+		role="region"
+		id={$ctx.getControlsId(value)}
+		aria-labelledby={$ctx.getRegionId(value)}
+		open={$ctx.isItemActive(value)}
+	>
+		<div class={classes.panel}>
+			<slot />
+		</div>
+	</Collapse>
+</Box>
diff --git a/packages/svelteui-core/src/components/Accordion/Chevron/Chevron.svelte b/packages/svelteui-core/src/components/Accordion/Chevron/Chevron.svelte
new file mode 100644
index 00000000..830320a7
--- /dev/null
+++ b/packages/svelteui-core/src/components/Accordion/Chevron/Chevron.svelte
@@ -0,0 +1,20 @@
+<script>
+	export let color = 'currentColor';
+	export let size = 15;
+</script>
+
+<svg
+  viewBox="0 0 15 15"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+	height={size}
+  {...$$restProps}
+>
+  <path
+    d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    fill={color}
+  />
+</svg>
diff --git a/packages/svelteui-core/src/components/Accordion/combinator.ts b/packages/svelteui-core/src/components/Accordion/combinator.ts
new file mode 100644
index 00000000..1be8ef77
--- /dev/null
+++ b/packages/svelteui-core/src/components/Accordion/combinator.ts
@@ -0,0 +1,11 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import _Accordion from './Accordion.svelte';
+import AccordionItem from './AccordionItem/AccordionItem.svelte';
+
+// @ts-ignore
+_Accordion.Item = AccordionItem;
+const Accordion = _Accordion as typeof _Accordion & {
+	Item: typeof AccordionItem;
+};
+
+export { Accordion };
diff --git a/packages/svelteui-core/src/components/Accordion/index.ts b/packages/svelteui-core/src/components/Accordion/index.ts
new file mode 100644
index 00000000..6fc97dbd
--- /dev/null
+++ b/packages/svelteui-core/src/components/Accordion/index.ts
@@ -0,0 +1,3 @@
+export { Accordion } from './combinator';
+export type { AccordionProps, AccordionVariant } from './Accordion';
+export type { AccordionStylesParams } from './Accordion.styles';
diff --git a/packages/svelteui-core/src/components/Accordion/key.ts b/packages/svelteui-core/src/components/Accordion/key.ts
new file mode 100644
index 00000000..796177a1
--- /dev/null
+++ b/packages/svelteui-core/src/components/Accordion/key.ts
@@ -0,0 +1 @@
+export const key = Symbol();
diff --git a/packages/svelteui-core/src/components/Collapse/Collapse.d.ts b/packages/svelteui-core/src/components/Collapse/Collapse.d.ts
index e4196c3d..19d86df3 100644
--- a/packages/svelteui-core/src/components/Collapse/Collapse.d.ts
+++ b/packages/svelteui-core/src/components/Collapse/Collapse.d.ts
@@ -2,7 +2,7 @@ import { HTMLAttributes } from 'svelte/elements';
 import { SlideParams } from 'svelte/transition';
 import { DefaultProps } from '$lib/styles';
 
-export interface CollapseProps extends DefaultProps, HTMLAttributes {
+export interface CollapseProps extends DefaultProps, HTMLAttributes<HTMLElement> {
 	open: boolean;
 	animateOpacity?: boolean;
 	transitionDuration?: number;
diff --git a/packages/svelteui-core/src/components/Collapse/Collapse.svelte b/packages/svelteui-core/src/components/Collapse/Collapse.svelte
index c9aa4dd0..fe1a5920 100644
--- a/packages/svelteui-core/src/components/Collapse/Collapse.svelte
+++ b/packages/svelteui-core/src/components/Collapse/Collapse.svelte
@@ -31,7 +31,7 @@ A section that collapses with animation, occupying no space on the page.
     <Collapse open>Content that collapses</Collapse>
     ```
 -->
-<Box class={className} bind:element css={override} {use}>
+<Box class={className} bind:element css={override} {use} {...$$restProps}>
 	{#if open}
 		{#if animateOpacity}
 			<div transition:fade={{ duration: transitionDuration }}>
diff --git a/packages/svelteui-core/src/components/index.ts b/packages/svelteui-core/src/components/index.ts
index 2a733a71..90364773 100644
--- a/packages/svelteui-core/src/components/index.ts
+++ b/packages/svelteui-core/src/components/index.ts
@@ -1,3 +1,4 @@
+export * from './Accordion';
 export * from './ActionIcon';
 export * from './Affix';
 export * from './Alert';
@@ -14,6 +15,7 @@ export * from './Center';
 export * from './Checkbox';
 export * from './Chip';
 export * from './Code';
+export * from './Collapse';
 export * from './Container';
 export * from './Divider';
 export * from './FileUpload';
diff --git a/packages/svelteui-demos/src/demos/core/Accordion/Accordion.demo.chevron.svelte b/packages/svelteui-demos/src/demos/core/Accordion/Accordion.demo.chevron.svelte
new file mode 100644
index 00000000..4254e73c
--- /dev/null
+++ b/packages/svelteui-demos/src/demos/core/Accordion/Accordion.demo.chevron.svelte
@@ -0,0 +1,56 @@
+<script lang="ts" context="module">
+	import type { CodeDemoType, CodeDemoConfiguration } from '$lib/types';
+
+	const code = `<script>
+  import { Accordion } from '@svelteuidev/core';
+  import { Plus } from 'radix-icons-svelte';
+<\/script>
+
+<Accordion chevron={Plus}>
+  <Accordion.Item value="typescript">
+    <div slot="control">Typescript Based</div>
+    Build type safe applications. All SvelteUI packages are built with TypeScript and support it by
+    default. All components and functions export types, are documented, and give developers autocomplete
+    features!
+  </Accordion.Item>
+  <Accordion.Item value="packed">
+    <div slot="control">Feature packed</div>
+    SvelteUI contains more than just components. With Actions, Transitions, and Utilities available
+    to you, development will be fun and easy!
+  </Accordion.Item>
+  <Accordion.Item value="accessible">
+    <div slot="control">Accessible and usable</div>
+    All components are accessible according to WAI-ARIA standards. On top of that, no annoying focus
+    ring. It will appear only when user navigates with keyboard.
+  </Accordion.Item>
+</Accordion>`;
+	export const type: CodeDemoType['type'] = 'demo';
+
+	export const configuration: CodeDemoConfiguration = {
+		code,
+		toggle: true
+	};
+</script>
+
+<script lang="ts">
+	import { Accordion } from '@svelteuidev/core';
+	import { Plus } from 'radix-icons-svelte';
+</script>
+
+<Accordion chevron={Plus}>
+	<Accordion.Item value="typescript">
+		<div slot="control">Typescript Based</div>
+		Build type safe applications. All SvelteUI packages are built with TypeScript and support it by default.
+		All components and functions export types, are documented, and give developers autocomplete features!
+	</Accordion.Item>
+	<Accordion.Item value="packed">
+		<div slot="control">Feature packed</div>
+		SvelteUI contains more than just components. With Actions, Transitions, and Utilities available to
+		you, development will be fun and easy!
+	</Accordion.Item>
+	<Accordion.Item value="accessible">
+		<div slot="control">Accessible and usable</div>
+		All components are accessible according to WAI-ARIA standards. On top of that, no annoying focus
+		ring. It will appear only when user navigates with keyboard.
+	</Accordion.Item>
+</Accordion>
diff --git a/packages/svelteui-demos/src/demos/core/Accordion/Accordion.demo.configurator.svelte b/packages/svelteui-demos/src/demos/core/Accordion/Accordion.demo.configurator.svelte
new file mode 100644
index 00000000..e49ffa40
--- /dev/null
+++ b/packages/svelteui-demos/src/demos/core/Accordion/Accordion.demo.configurator.svelte
@@ -0,0 +1,87 @@
+<script lang="ts" context="module">
+	import type { ConfiguratorDemoType, ConfiguratorDemoConfiguration } from '$lib/types';
+
+	const codeTemplate = (props: string, children: string) =>
+		`<script>
+  import { Accordion } from '@svelteuidev/core';
+<\/script>
+
+<Accordion${props}>
+  <Accordion.Item value="typescript">
+    <div slot="control">Typescript Based</div>
+    Build type safe applications...
+  </Accordion.Item>
+  <Accordion.Item value="packed">
+    <div slot="control">Feature packed</div>
+    SvelteUI contains more than just components...
+  </Accordion.Item>
+  <Accordion.Item value="accessible">
+    <div slot="control">Accessible and usable</div>
+    All components are accessible according to WAI-ARIA standards....
+  </Accordion.Item>
+</Accordion>`;
+
+	export const type: ConfiguratorDemoType['type'] = 'configurator';
+
+	export const configuration: ConfiguratorDemoConfiguration = {
+		codeTemplate,
+		configurator: [
+			{
+				name: 'variant',
+				type: 'select',
+				data: [
+					{ label: 'default', value: 'default' },
+					{ label: 'contained', value: 'contained' },
+					{ label: 'filled', value: 'filled' },
+					{ label: 'separated', value: 'separated' }
+				],
+				initialValue: 'default',
+				defaultValue: 'default'
+			},
+			{ name: 'radius', type: 'size', initialValue: 'sm', defaultValue: 'sm' },
+			{
+				name: 'chevronPosition',
+				label: 'Chevron Position',
+				type: 'select',
+				data: [
+					{ label: 'left', value: 'left' },
+					{ label: 'right', value: 'right' }
+				],
+				initialValue: 'right',
+				defaultValue: 'right'
+			},
+			{
+				name: 'disableChevronRotation',
+				label: 'Disable chevron rotation',
+				type: 'boolean',
+				initialValue: false,
+				defaultValue: false
+			}
+		]
+	};
+</script>
+
+<script lang="ts">
+	import type { AccordionProps } from '@svelteuidev/core';
+	import { Accordion } from '@svelteuidev/core';
+
+	export let props: AccordionProps = {};
+</script>
+
+<Accordion {...props}>
+	<Accordion.Item value="typescript">
+		<div slot="control">Typescript Based</div>
+		Build type safe applications. All SvelteUI packages are built with TypeScript and support it by default.
+		All components and functions export types, are documented, and give developers autocomplete features!
+	</Accordion.Item>
+	<Accordion.Item value="packed">
+		<div slot="control">Feature packed</div>
+		SvelteUI contains more than just components. With Actions, Transitions, and Utilities available to
+		you, development will be fun and easy!
+	</Accordion.Item>
+	<Accordion.Item value="accessible">
+		<div slot="control">Accessible and usable</div>
+		All components are accessible according to WAI-ARIA standards. On top of that, no annoying focus
+		ring. It will appear only when user navigates with keyboard.
+	</Accordion.Item>
+</Accordion>
diff --git a/packages/svelteui-demos/src/demos/core/Accordion/Accordion.demo.controlled.svelte b/packages/svelteui-demos/src/demos/core/Accordion/Accordion.demo.controlled.svelte
new file mode 100644
index 00000000..448b07b2
--- /dev/null
+++ b/packages/svelteui-demos/src/demos/core/Accordion/Accordion.demo.controlled.svelte
@@ -0,0 +1,54 @@
+<script lang="ts" context="module">
+	import type { CodeDemoType, CodeDemoConfiguration } from '$lib/types';
+
+	const code = `<script>
+  import { Accordion } from '@svelteuidev/core';
+
+  let value = "typescript";
+<\/script>
+
+<Accordion {value} on:change={(e) => value = e.detail}>
+  <Accordion.Item value="typescript">
+    <div slot="control">Typescript Based</div>
+    ...
+  </Accordion.Item>
+  <Accordion.Item value="packed">
+    <div slot="control">Feature packed</div>
+    ...
+  </Accordion.Item>
+  <Accordion.Item value="accessible">
+    <div slot="control">Accessible and usable</div>
+    ...
+  </Accordion.Item>
+</Accordion>`;
+	export const type: CodeDemoType['type'] = 'demo';
+
+	export const configuration: CodeDemoConfiguration = {
+		code,
+		toggle: true
+	};
+</script>
+
+<script lang="ts">
+	import { Accordion } from '@svelteuidev/core';
+
+	let value = 'typescript';
+</script>
+
+<Accordion {value} on:change={(e) => (value = e.detail)}>
+	<Accordion.Item value="typescript">
+		<div slot="control">Typescript Based</div>
+		Build type safe applications. All SvelteUI packages are built with TypeScript and support it by default.
+		All components and functions export types, are documented, and give developers autocomplete features!
+	</Accordion.Item>
+	<Accordion.Item value="packed">
+		<div slot="control">Feature packed</div>
+		SvelteUI contains more than just components. With Actions, Transitions, and Utilities available to
+		you, development will be fun and easy!
+	</Accordion.Item>
+	<Accordion.Item value="accessible">
+		<div slot="control">Accessible and usable</div>
+		All components are accessible according to WAI-ARIA standards. On top of that, no annoying focus
+		ring. It will appear only when user navigates with keyboard.
+	</Accordion.Item>
+</Accordion>
diff --git a/packages/svelteui-demos/src/demos/core/Accordion/Accordion.demo.custom.svelte b/packages/svelteui-demos/src/demos/core/Accordion/Accordion.demo.custom.svelte
new file mode 100644
index 00000000..21294392
--- /dev/null
+++ b/packages/svelteui-demos/src/demos/core/Accordion/Accordion.demo.custom.svelte
@@ -0,0 +1,115 @@
+<script lang="ts" context="module">
+	import type { CodeDemoType, CodeDemoConfiguration } from '$lib/types';
+	const code = `<script>
+  import { Accordion, Center, Flex, Stack, Title, Text } from '@svelteuidev/core';
+	import { Face, HobbyKnife, Moon } from 'radix-icons-svelte';
+<\/script>
+
+<Accordion>
+  <Accordion.Item value="buffy">
+    <div slot="control">
+      <Flex>
+        <Center mr="lg">
+          <HobbyKnife size={24}/>
+        </Center>
+        <Stack>
+          <Title order={4} color="blue">Buffy Summers</Title>
+          <Text size="sm" color="gray">Main character and resident bad-ass.</Text>
+        </Stack>
+    </Flex>
+    </div>
+    Initially a reluctant hero who constantly wished for nothing more than a normal life, Buffy eventually grew to embrace her destiny. She was unique as a Slayer in many ways; she refused to sacrifice her ordinary life for her supernatural destiny, often operated as part of a team with her friends the Scooby Gang,
+  </Accordion.Item>
+  <Accordion.Item value="willow">
+    <div slot="control">
+      <Flex>
+        <Center mr="lg">
+          <Moon size={24}/>
+        </Center>
+        <Stack>
+          <Title order={4} color="blue">Willow Rosenberg</Title>
+          <Text size="sm" color="gray">Computer nerd and witch, Buffy best friend.</Text>
+        </Stack>
+      </Flex>
+    </div>
+    Willow started out as a shy computer nerd, eventually developing her talents to become a powerful and assertive witch. Willow was quick to grasp basic spells and, with support from her girlfriend Tara, her powers blossomed even more rapidly.
+  </Accordion.Item>
+  <Accordion.Item value="xander">
+    <div slot="control">
+      <Flex>
+        <Center mr="lg">
+          <Face size={24} />
+        </Center>
+        <Stack>
+          <Title order={4} color="blue">Xander Harris</Title>
+          <Text size="sm" color="gray">Clown of the group and the real down to earth guy.</Text>
+        </Stack>
+      </Flex>
+    </div>
+    Being the only one of his group of friends to not possess any supernatural abilities, Xander was usually the one who saw beyond the supernatural. Besides this, he was known to be very humorous and sarcastic, especially in the face of danger.
+  </Accordion.Item>
+</Accordion>`;
+	export const type: CodeDemoType['type'] = 'demo';
+
+	export const configuration: CodeDemoConfiguration = {
+		code,
+		toggle: true
+	};
+</script>
+
+<script lang="ts">
+	import { Accordion, Center, Flex, Stack, Title, Text } from '@svelteuidev/core';
+	import { Face, HobbyKnife, Moon } from 'radix-icons-svelte';
+</script>
+
+<Accordion>
+	<Accordion.Item value="buffy">
+		<div slot="control">
+			<Flex>
+				<Center mr="lg">
+					<HobbyKnife size={24} />
+				</Center>
+				<Stack>
+					<Title order={4} color="blue">Buffy Summers</Title>
+					<Text size="sm" color="gray">Main character and resident bad-ass.</Text>
+				</Stack>
+			</Flex>
+		</div>
+		Initially a reluctant hero who constantly wished for nothing more than a normal life, Buffy eventually
+		grew to embrace her destiny. She was unique as a Slayer in many ways; she refused to sacrifice her
+		ordinary life for her supernatural destiny, often operated as part of a team with her friends the
+		Scooby Gang,
+	</Accordion.Item>
+	<Accordion.Item value="willow">
+		<div slot="control">
+			<Flex>
+				<Center mr="lg">
+					<Moon size={24} />
+				</Center>
+				<Stack>
+					<Title order={4} color="blue">Willow Rosenberg</Title>
+					<Text size="sm" color="gray">Computer nerd and witch, Buffy best friend.</Text>
+				</Stack>
+			</Flex>
+		</div>
+		Willow started out as a shy computer nerd, eventually developing her talents to become a powerful
+		and assertive witch. Willow was quick to grasp basic spells and, with support from her girlfriend
+		Tara, her powers blossomed even more rapidly.
+	</Accordion.Item>
+	<Accordion.Item value="xander">
+		<div slot="control">
+			<Flex>
+				<Center mr="lg">
+					<Face size={24} />
+				</Center>
+				<Stack>
+					<Title order={4} color="blue">Xander Harris</Title>
+					<Text size="sm" color="gray">Clown of the group and the real down to earth guy.</Text>
+				</Stack>
+			</Flex>
+		</div>
+		Being the only one of his group of friends to not possess any supernatural abilities, Xander was
+		usually the one who saw beyond the supernatural. Besides this, he was known to be very humorous and
+		sarcastic, especially in the face of danger.
+	</Accordion.Item>
+</Accordion>
diff --git a/packages/svelteui-demos/src/demos/core/Accordion/Accordion.demo.data.svelte b/packages/svelteui-demos/src/demos/core/Accordion/Accordion.demo.data.svelte
new file mode 100644
index 00000000..a473f9f5
--- /dev/null
+++ b/packages/svelteui-demos/src/demos/core/Accordion/Accordion.demo.data.svelte
@@ -0,0 +1,68 @@
+<script lang="ts" context="module">
+	import type { CodeDemoType, CodeDemoConfiguration } from '$lib/types';
+
+	const code = `<script>
+  import { Accordion } from '@svelteuidev/core';
+<\/script>
+
+<Accordion
+  override={{
+    '[data-active="true"]': {
+      backgroundColor: '#ff0000'
+    },
+    '[data-rotate="true"]': {
+      transform: 'rotate(-90deg)',
+    },
+  }}
+>
+  <Accordion.Item value="typescript">
+    <div slot="control">Typescript Based</div>
+    ...
+  </Accordion.Item>
+  <Accordion.Item value="packed">
+    <div slot="control">Feature packed</div>
+    ...
+  </Accordion.Item>
+  <Accordion.Item value="accessible">
+    <div slot="control">Accessible and usable</div>
+    ...
+  </Accordion.Item>
+</Accordion>`;
+	export const type: CodeDemoType['type'] = 'demo';
+
+	export const configuration: CodeDemoConfiguration = {
+		code,
+		toggle: true
+	};
+</script>
+
+<script lang="ts">
+	import { Accordion } from '@svelteuidev/core';
+</script>
+
+<Accordion
+	override={{
+		'[data-active="true"]': {
+			backgroundColor: '#ff0000'
+		},
+		'[data-rotate="true"]': {
+			transform: 'rotate(-90deg)'
+		}
+	}}
+>
+	<Accordion.Item value="typescript">
+		<div slot="control">Typescript Based</div>
+		Build type safe applications. All SvelteUI packages are built with TypeScript and support it by default.
+		All components and functions export types, are documented, and give developers autocomplete features!
+	</Accordion.Item>
+	<Accordion.Item value="packed">
+		<div slot="control">Feature packed</div>
+		SvelteUI contains more than just components. With Actions, Transitions, and Utilities available to
+		you, development will be fun and easy!
+	</Accordion.Item>
+	<Accordion.Item value="accessible">
+		<div slot="control">Accessible and usable</div>
+		All components are accessible according to WAI-ARIA standards. On top of that, no annoying focus
+		ring. It will appear only when user navigates with keyboard.
+	</Accordion.Item>
+</Accordion>
diff --git a/packages/svelteui-demos/src/demos/core/Accordion/Accordion.demo.default.svelte b/packages/svelteui-demos/src/demos/core/Accordion/Accordion.demo.default.svelte
new file mode 100644
index 00000000..684c4c07
--- /dev/null
+++ b/packages/svelteui-demos/src/demos/core/Accordion/Accordion.demo.default.svelte
@@ -0,0 +1,50 @@
+<script lang="ts" context="module">
+	import type { CodeDemoType, CodeDemoConfiguration } from '$lib/types';
+
+	const code = `<script>
+  import { Accordion } from '@svelteuidev/core';
+<\/script>
+
+<Accordion defaultValue="packed">
+  <Accordion.Item value="typescript">
+    <div slot="control">Typescript Based</div>
+    ...
+  </Accordion.Item>
+  <Accordion.Item value="packed">
+    <div slot="control">Feature packed</div>
+    ...
+  </Accordion.Item>
+  <Accordion.Item value="accessible">
+    <div slot="control">Accessible and usable</div>
+    ...
+  </Accordion.Item>
+</Accordion>`;
+	export const type: CodeDemoType['type'] = 'demo';
+
+	export const configuration: CodeDemoConfiguration = {
+		code,
+		toggle: true
+	};
+</script>
+
+<script lang="ts">
+	import { Accordion } from '@svelteuidev/core';
+</script>
+
+<Accordion defaultValue="packed">
+	<Accordion.Item value="typescript">
+		<div slot="control">Typescript Based</div>
+		Build type safe applications. All SvelteUI packages are built with TypeScript and support it by default.
+		All components and functions export types, are documented, and give developers autocomplete features!
+	</Accordion.Item>
+	<Accordion.Item value="packed">
+		<div slot="control">Feature packed</div>
+		SvelteUI contains more than just components. With Actions, Transitions, and Utilities available to
+		you, development will be fun and easy!
+	</Accordion.Item>
+	<Accordion.Item value="accessible">
+		<div slot="control">Accessible and usable</div>
+		All components are accessible according to WAI-ARIA standards. On top of that, no annoying focus
+		ring. It will appear only when user navigates with keyboard.
+	</Accordion.Item>
+</Accordion>
diff --git a/packages/svelteui-demos/src/demos/core/Accordion/Accordion.demo.defaultMultiple.svelte b/packages/svelteui-demos/src/demos/core/Accordion/Accordion.demo.defaultMultiple.svelte
new file mode 100644
index 00000000..325ebced
--- /dev/null
+++ b/packages/svelteui-demos/src/demos/core/Accordion/Accordion.demo.defaultMultiple.svelte
@@ -0,0 +1,50 @@
+<script lang="ts" context="module">
+	import type { CodeDemoType, CodeDemoConfiguration } from '$lib/types';
+
+	const code = `<script>
+  import { Accordion } from '@svelteuidev/core';
+<\/script>
+
+<Accordion multiple defaultValue={["packed", "accessible"]}>
+  <Accordion.Item value="typescript">
+    <div slot="control">Typescript Based</div>
+    ...
+  </Accordion.Item>
+  <Accordion.Item value="packed">
+    <div slot="control">Feature packed</div>
+    ...
+  </Accordion.Item>
+  <Accordion.Item value="accessible">
+    <div slot="control">Accessible and usable</div>
+    ...
+  </Accordion.Item>
+</Accordion>`;
+	export const type: CodeDemoType['type'] = 'demo';
+
+	export const configuration: CodeDemoConfiguration = {
+		code,
+		toggle: true
+	};
+</script>
+
+<script lang="ts">
+	import { Accordion } from '@svelteuidev/core';
+</script>
+
+<Accordion multiple defaultValue={['packed', 'accessible']}>
+	<Accordion.Item value="typescript">
+		<div slot="control">Typescript Based</div>
+		Build type safe applications. All SvelteUI packages are built with TypeScript and support it by default.
+		All components and functions export types, are documented, and give developers autocomplete features!
+	</Accordion.Item>
+	<Accordion.Item value="packed">
+		<div slot="control">Feature packed</div>
+		SvelteUI contains more than just components. With Actions, Transitions, and Utilities available to
+		you, development will be fun and easy!
+	</Accordion.Item>
+	<Accordion.Item value="accessible">
+		<div slot="control">Accessible and usable</div>
+		All components are accessible according to WAI-ARIA standards. On top of that, no annoying focus
+		ring. It will appear only when user navigates with keyboard.
+	</Accordion.Item>
+</Accordion>
diff --git a/packages/svelteui-demos/src/demos/core/Accordion/Accordion.demo.disabled.svelte b/packages/svelteui-demos/src/demos/core/Accordion/Accordion.demo.disabled.svelte
new file mode 100644
index 00000000..1d318d57
--- /dev/null
+++ b/packages/svelteui-demos/src/demos/core/Accordion/Accordion.demo.disabled.svelte
@@ -0,0 +1,54 @@
+<script lang="ts" context="module">
+	import type { CodeDemoType, CodeDemoConfiguration } from '$lib/types';
+
+	const code = `<script>
+  import { Accordion } from '@svelteuidev/core';
+<\/script>
+
+<Accordion>
+  <Accordion.Item value="typescript">
+    <div slot="control">Typescript Based</div>
+    Build type safe applications. All SvelteUI packages are built with TypeScript and support it by
+    default. All components and functions export types, are documented, and give developers autocomplete
+    features!
+  </Accordion.Item>
+  <Accordion.Item value="packed" disabled>
+    <div slot="control">Feature packed</div>
+    SvelteUI contains more than just components. With Actions, Transitions, and Utilities available
+    to you, development will be fun and easy!
+  </Accordion.Item>
+  <Accordion.Item value="accessible">
+    <div slot="control">Accessible and usable</div>
+    All components are accessible according to WAI-ARIA standards. On top of that, no annoying focus
+    ring. It will appear only when user navigates with keyboard.
+  </Accordion.Item>
+</Accordion>`;
+	export const type: CodeDemoType['type'] = 'demo';
+
+	export const configuration: CodeDemoConfiguration = {
+		code,
+		toggle: true
+	};
+</script>
+
+<script lang="ts">
+	import { Accordion } from '@svelteuidev/core';
+</script>
+
+<Accordion>
+	<Accordion.Item value="typescript">
+		<div slot="control">Typescript Based</div>
+		Build type safe applications. All SvelteUI packages are built with TypeScript and support it by default.
+		All components and functions export types, are documented, and give developers autocomplete features!
+	</Accordion.Item>
+	<Accordion.Item value="packed" disabled>
+		<div slot="control">Feature packed</div>
+		SvelteUI contains more than just components. With Actions, Transitions, and Utilities available to
+		you, development will be fun and easy!
+	</Accordion.Item>
+	<Accordion.Item value="accessible">
+		<div slot="control">Accessible and usable</div>
+		All components are accessible according to WAI-ARIA standards. On top of that, no annoying focus
+		ring. It will appear only when user navigates with keyboard.
+	</Accordion.Item>
+</Accordion>
diff --git a/packages/svelteui-demos/src/demos/core/Accordion/Accordion.demo.noTransition.svelte b/packages/svelteui-demos/src/demos/core/Accordion/Accordion.demo.noTransition.svelte
new file mode 100644
index 00000000..549b6dff
--- /dev/null
+++ b/packages/svelteui-demos/src/demos/core/Accordion/Accordion.demo.noTransition.svelte
@@ -0,0 +1,50 @@
+<script lang="ts" context="module">
+	import type { CodeDemoType, CodeDemoConfiguration } from '$lib/types';
+
+	const code = `<script>
+  import { Accordion } from '@svelteuidev/core';
+<\/script>
+
+<Accordion transitionDuration={0}>
+  <Accordion.Item value="typescript">
+    <div slot="control">Typescript Based</div>
+    ...
+  </Accordion.Item>
+  <Accordion.Item value="packed">
+    <div slot="control">Feature packed</div>
+    ...
+  </Accordion.Item>
+  <Accordion.Item value="accessible">
+    <div slot="control">Accessible and usable</div>
+    ...
+  </Accordion.Item>
+</Accordion>`;
+	export const type: CodeDemoType['type'] = 'demo';
+
+	export const configuration: CodeDemoConfiguration = {
+		code,
+		toggle: true
+	};
+</script>
+
+<script lang="ts">
+	import { Accordion } from '@svelteuidev/core';
+</script>
+
+<Accordion transitionDuration={0}>
+	<Accordion.Item value="typescript">
+		<div slot="control">Typescript Based</div>
+		Build type safe applications. All SvelteUI packages are built with TypeScript and support it by default.
+		All components and functions export types, are documented, and give developers autocomplete features!
+	</Accordion.Item>
+	<Accordion.Item value="packed">
+		<div slot="control">Feature packed</div>
+		SvelteUI contains more than just components. With Actions, Transitions, and Utilities available to
+		you, development will be fun and easy!
+	</Accordion.Item>
+	<Accordion.Item value="accessible">
+		<div slot="control">Accessible and usable</div>
+		All components are accessible according to WAI-ARIA standards. On top of that, no annoying focus
+		ring. It will appear only when user navigates with keyboard.
+	</Accordion.Item>
+</Accordion>
diff --git a/packages/svelteui-demos/src/demos/core/Accordion/Accordion.demo.transitionDuration.svelte b/packages/svelteui-demos/src/demos/core/Accordion/Accordion.demo.transitionDuration.svelte
new file mode 100644
index 00000000..6b7befbd
--- /dev/null
+++ b/packages/svelteui-demos/src/demos/core/Accordion/Accordion.demo.transitionDuration.svelte
@@ -0,0 +1,50 @@
+<script lang="ts" context="module">
+	import type { CodeDemoType, CodeDemoConfiguration } from '$lib/types';
+
+	const code = `<script>
+  import { Accordion } from '@svelteuidev/core';
+<\/script>
+
+<Accordion transitionDuration={1000}>
+  <Accordion.Item value="typescript">
+    <div slot="control">Typescript Based</div>
+    ...
+  </Accordion.Item>
+  <Accordion.Item value="packed">
+    <div slot="control">Feature packed</div>
+    ...
+  </Accordion.Item>
+  <Accordion.Item value="accessible">
+    <div slot="control">Accessible and usable</div>
+    ...
+  </Accordion.Item>
+</Accordion>`;
+	export const type: CodeDemoType['type'] = 'demo';
+
+	export const configuration: CodeDemoConfiguration = {
+		code,
+		toggle: true
+	};
+</script>
+
+<script lang="ts">
+	import { Accordion } from '@svelteuidev/core';
+</script>
+
+<Accordion transitionDuration={1000}>
+	<Accordion.Item value="typescript">
+		<div slot="control">Typescript Based</div>
+		Build type safe applications. All SvelteUI packages are built with TypeScript and support it by default.
+		All components and functions export types, are documented, and give developers autocomplete features!
+	</Accordion.Item>
+	<Accordion.Item value="packed">
+		<div slot="control">Feature packed</div>
+		SvelteUI contains more than just components. With Actions, Transitions, and Utilities available to
+		you, development will be fun and easy!
+	</Accordion.Item>
+	<Accordion.Item value="accessible">
+		<div slot="control">Accessible and usable</div>
+		All components are accessible according to WAI-ARIA standards. On top of that, no annoying focus
+		ring. It will appear only when user navigates with keyboard.
+	</Accordion.Item>
+</Accordion>
diff --git a/packages/svelteui-demos/src/demos/core/Accordion/index.ts b/packages/svelteui-demos/src/demos/core/Accordion/index.ts
new file mode 100644
index 00000000..a129e6e8
--- /dev/null
+++ b/packages/svelteui-demos/src/demos/core/Accordion/index.ts
@@ -0,0 +1,10 @@
+export * as configurator from './Accordion.demo.configurator.svelte';
+export * as custom from './Accordion.demo.custom.svelte';
+export * as chevron from './Accordion.demo.chevron.svelte';
+export * as disabled from './Accordion.demo.disabled.svelte';
+export * as data from './Accordion.demo.data.svelte';
+export * as transitionDuration from './Accordion.demo.transitionDuration.svelte';
+export * as noTransition from './Accordion.demo.noTransition.svelte';
+export * as defaultValue from './Accordion.demo.default.svelte';
+export * as defaultValueMultiple from './Accordion.demo.defaultMultiple.svelte';
+export * as controlled from './Accordion.demo.controlled.svelte';
diff --git a/packages/svelteui-demos/src/index.ts b/packages/svelteui-demos/src/index.ts
index 529b03a5..6d9cbe48 100644
--- a/packages/svelteui-demos/src/index.ts
+++ b/packages/svelteui-demos/src/index.ts
@@ -9,6 +9,7 @@ export * as CreateStylesDemos from './demos/createStyles';
 export * as ThemeDemos from './demos/theme';
 
 // @svelteuidev/core
+export * as AccordionDemos from './demos/core/Accordion';
 export * as ActionIconDemos from './demos/core/ActionIcon';
 export * as AppShellDemos from './demos/core/AppShell';
 export * as AffixDemos from './demos/core/Affix';