diff --git a/packages/core/src/Lib/UseColor/Internal/Lib/UseColor.ts b/packages/core/src/Lib/UseColor/Internal/Lib/UseColor.ts
index 69b070a2..266d14b2 100644
--- a/packages/core/src/Lib/UseColor/Internal/Lib/UseColor.ts
+++ b/packages/core/src/Lib/UseColor/Internal/Lib/UseColor.ts
@@ -9,6 +9,17 @@ export function useColor(
     componentName: MaybeRefOrGetter<ColorableComponentName>,
     color: MaybeRefOrGetter<Color | undefined>,
 ): ComputedRef<string> {
+    const textClasses: Record<Color, string> = {
+        neutral:   'text-neutral',
+        primary:   'text-primary',
+        secondary: 'text-secondary',
+        accent:    'text-accent',
+        info:      'text-info',
+        success:   'text-success',
+        warning:   'text-warning',
+        error:     'text-error',
+    };
+
     return useComponentClass<ColorableComponentName, Color>(
         componentName,
         {
@@ -62,17 +73,8 @@ export function useColor(
                 warning:   'divider-warning',
                 error:     'divider-error',
             },
-            FoHeading: {
-                neutral:   'text-neutral',
-                primary:   'text-primary',
-                secondary: 'text-secondary',
-                accent:    'text-accent',
-                info:      'text-info',
-                success:   'text-success',
-                warning:   'text-warning',
-                error:     'text-error',
-            },
-            FoLink: {
+            FoHeading: textClasses,
+            FoLink:    {
                 neutral:   'link-neutral',
                 primary:   'link-primary',
                 secondary: 'link-secondary',
@@ -92,17 +94,9 @@ export function useColor(
                 warning:   'bg-warning/30',
                 error:     'bg-error/30',
             },
-            FoLoading: {
-                neutral:   'text-neutral',
-                primary:   'text-primary',
-                secondary: 'text-secondary',
-                accent:    'text-accent',
-                info:      'text-info',
-                success:   'text-success',
-                warning:   'text-warning',
-                error:     'text-error',
-            },
-            FoRadio: {
+            FoLoading:        textClasses,
+            FoRadialProgress: textClasses,
+            FoRadio:          {
                 neutral:   '',
                 primary:   'radio-primary',
                 secondary: 'radio-secondary',
diff --git a/packages/core/src/Lib/UseColor/Types/Color.ts b/packages/core/src/Lib/UseColor/Types/Color.ts
index 6a32f16f..8a456722 100644
--- a/packages/core/src/Lib/UseColor/Types/Color.ts
+++ b/packages/core/src/Lib/UseColor/Types/Color.ts
@@ -8,6 +8,7 @@ export type ColorableComponentName = Extract<
     | 'FoCheckbox'
     | 'FoDivider'
     | 'FoModal'
+    | 'FoRadialProgress'
     | 'FoRadio'
     | 'FoRange'
     | 'FoStatus'
diff --git a/packages/core/src/Lib/UseFlyonUIVueAppConfig/Types/FlyonUIVueAppConfig.ts b/packages/core/src/Lib/UseFlyonUIVueAppConfig/Types/FlyonUIVueAppConfig.ts
index d667190b..6cb03e6b 100644
--- a/packages/core/src/Lib/UseFlyonUIVueAppConfig/Types/FlyonUIVueAppConfig.ts
+++ b/packages/core/src/Lib/UseFlyonUIVueAppConfig/Types/FlyonUIVueAppConfig.ts
@@ -9,8 +9,12 @@ import type {
     LoadingProps,
     MenuProps,
 } from '@/UI/Components';
-import type { AlertProps }                                                             from '@/UI/Components/Alert';
-import type { AvatarProps }                                                            from '@/UI/Components/Avatar';
+import type { AlertProps }  from '@/UI/Components/Alert';
+import type { AvatarProps } from '@/UI/Components/Avatar';
+import type {
+    RadialProgressBackgroundProps,
+    RadialProgressProps,
+} from '@/UI/Components/RadialProgress';
 import type { StatusProps }                                                            from '@/UI/Components/Status';
 import type { HeadingProps, KeyboardProps, LinkProps }                                 from '@/UI/Content';
 import type { DividerProps }                                                           from '@/UI/Content/Divider';
@@ -113,24 +117,24 @@ export interface ConfigurableComponentProps {
         & HorizontalPositionComponentConfig<HorizontalPositionGlobalConfig>
         & LabelTypeComponentConfig
     >;
-    FoKeyboard: ConfigurableProps<KeyboardProps>;
+    FoKeyboard:       ConfigurableProps<KeyboardProps>;
     /** Link defaults */
-    FoLink:     ConfigurableProps<LinkProps>;
+    FoLink:           ConfigurableProps<LinkProps>;
     /** Loading defaults */
-    FoLoading:  ConfigurableProps<LoadingProps>;
+    FoLoading:        ConfigurableProps<LoadingProps>;
     /** Menu defaults */
-    FoMenu:     ConfigurableProps<MenuProps>;
-    FoModal:    ConfigurableProps<Omit<ModalProps, 'backdrop'> & Colorable>;
-    /** Radio defaults */
-    FoRadio:    ConfigurableProps<ButtonProps>; // todo: temporary
-    FoRange:    ConfigurableProps<RangeProps>;
+    FoMenu:           ConfigurableProps<MenuProps>;
+    FoModal:          ConfigurableProps<Omit<ModalProps, 'backdrop'> & Colorable>;
+    FoRadialProgress: ConfigurableProps<RadialProgressProps & RadialProgressBackgroundProps>;
+    FoRadio:          ConfigurableProps<ButtonProps>; // todo: temporary
+    FoRange:          ConfigurableProps<RangeProps>;
     /** Select defaults */
-    FoSelect:   ConfigurableProps<SelectProps> & LabelTypeComponentConfig & HorizontalPositionComponentConfig<HorizontalHelperTextPositionConfig>;
-    FoStatus:   ConfigurableProps<StatusProps>;
-    FoSwitch:   ConfigurableProps<SwitchProps> & HorizontalPositionComponentConfig<HorizontalIconPositionConfig>;
+    FoSelect:         ConfigurableProps<SelectProps> & LabelTypeComponentConfig & HorizontalPositionComponentConfig<HorizontalHelperTextPositionConfig>;
+    FoStatus:         ConfigurableProps<StatusProps>;
+    FoSwitch:         ConfigurableProps<SwitchProps> & HorizontalPositionComponentConfig<HorizontalIconPositionConfig>;
     /** Table defaults */
-    FoTable:    ConfigurableProps<TableProps>;
-    FoTabs:     ConfigurableProps<TabsProps<TabProps>>;
+    FoTable:          ConfigurableProps<TableProps>;
+    FoTabs:           ConfigurableProps<TabsProps<TabProps>>;
     FoTextarea: ConfigurableProps<
         TextareaProps
         & HorizontalPositionComponentConfig<HorizontalPositionGlobalConfig>
diff --git a/packages/core/src/UI/Components/RadialProgress/Types/RadialProgress.ts b/packages/core/src/UI/Components/RadialProgress/Types/RadialProgress.ts
new file mode 100644
index 00000000..55c4d95a
--- /dev/null
+++ b/packages/core/src/UI/Components/RadialProgress/Types/RadialProgress.ts
@@ -0,0 +1,13 @@
+import type { Colorable, Preset, Presettable } from '@/Lib';
+
+export type RadialProgressBackgroundPreset = Extract<Preset, 'solid' | 'soft'>;
+
+export type RadialProgressBackgroundProps = Colorable & Presettable<RadialProgressBackgroundPreset>;
+
+export interface RadialProgressProps extends Colorable {
+    /** The progress' value */
+    value: number;
+
+    /** The progress' background style, if this is set, the color prop will be ignored */
+    background?: RadialProgressBackgroundProps;
+}
diff --git a/packages/core/src/UI/Components/RadialProgress/Types/index.ts b/packages/core/src/UI/Components/RadialProgress/Types/index.ts
new file mode 100644
index 00000000..ff4042c7
--- /dev/null
+++ b/packages/core/src/UI/Components/RadialProgress/Types/index.ts
@@ -0,0 +1 @@
+export * from '@/UI/Components/RadialProgress/Types/RadialProgress';
diff --git a/packages/core/src/UI/Components/RadialProgress/UI/FoRadialProgress.vue b/packages/core/src/UI/Components/RadialProgress/UI/FoRadialProgress.vue
new file mode 100644
index 00000000..952251cb
--- /dev/null
+++ b/packages/core/src/UI/Components/RadialProgress/UI/FoRadialProgress.vue
@@ -0,0 +1,72 @@
+<template>
+    <div class="radial-progress"
+         :class="background === undefined ? colorClass : backgroundClass"
+         :style="`--value:${value};`"
+         role="progressbar"
+         :aria-valuenow="value"
+    >
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Color, ComponentName, Preset } from '@/Lib';
+import type { RadialProgressProps }          from '@/UI/Components/RadialProgress';
+import { useFlyonUIVueAppConfig }            from '@/Lib';
+import { useColor }                          from '@/Lib/UseColor/Internal';
+import { useFlyonUIVueAppConfigProperty }    from '@/Lib/UseFlyonUIVueAppConfig/Internal';
+import { computed }                          from 'vue';
+
+const props = defineProps<RadialProgressProps>();
+
+const componentName: ComponentName = 'FoRadialProgress';
+const { config }                   = useFlyonUIVueAppConfig();
+
+const colorClass = useColor(config, componentName, () => props.color);
+
+const backgroundClass = computed((): string => {
+    const emptyColorClasses: Record<Color, ''> = {
+        neutral:   '',
+        primary:   '',
+        secondary: '',
+        accent:    '',
+        info:      '',
+        success:   '',
+        warning:   '',
+        error:     '',
+    };
+
+    const colorClasses: Record<Preset, Record<Color, string>> = {
+        solid: {
+            neutral:   'bg-neutral text-neutral-content border-4 border-transparent',
+            primary:   'bg-primary text-primary-content border-4 border-transparent',
+            secondary: 'bg-secondary text-secondary-content border-4 border-transparent',
+            accent:    'bg-accent text-accent-content border-4 border-transparent',
+            info:      'bg-info text-info-content border-4 border-transparent',
+            success:   'bg-success text-success-content border-4 border-transparent',
+            warning:   'bg-warning text-warning-content border-4 border-transparent',
+            error:     'bg-error text-error-content border-4 border-transparent',
+        },
+        outline: emptyColorClasses,
+        dash:    emptyColorClasses,
+        soft:    {
+            neutral:   'bg-neutral/10 text-neutral border-4 border-transparent',
+            primary:   'bg-primary/10 text-primary border-4 border-transparent',
+            secondary: 'bg-secondary/10 text-secondary border-4 border-transparent',
+            accent:    'bg-accent/10 text-accent border-4 border-transparent',
+            info:      'bg-info/10 text-info border-4 border-transparent',
+            success:   'bg-success/10 text-success border-4 border-transparent',
+            warning:   'bg-warning/10 text-warning border-4 border-transparent',
+            error:     'bg-error/10 text-error border-4 border-transparent',
+        },
+        gradient: emptyColorClasses,
+        text:     emptyColorClasses,
+        dot:      emptyColorClasses,
+    };
+
+    const defaultPreset = useFlyonUIVueAppConfigProperty(config, componentName, 'preset', props.background?.preset).value;
+    const defaultColor  = useFlyonUIVueAppConfigProperty(config, componentName, 'color', props.background?.color).value;
+
+    return colorClasses[defaultPreset][defaultColor];
+});
+</script>
diff --git a/packages/core/src/UI/Components/RadialProgress/UI/index.ts b/packages/core/src/UI/Components/RadialProgress/UI/index.ts
new file mode 100644
index 00000000..973351ad
--- /dev/null
+++ b/packages/core/src/UI/Components/RadialProgress/UI/index.ts
@@ -0,0 +1 @@
+export { default as FoRadialProgress } from '@/UI/Components/RadialProgress/UI/FoRadialProgress.vue';
diff --git a/packages/core/src/UI/Components/RadialProgress/index.ts b/packages/core/src/UI/Components/RadialProgress/index.ts
new file mode 100644
index 00000000..cdb0b7c4
--- /dev/null
+++ b/packages/core/src/UI/Components/RadialProgress/index.ts
@@ -0,0 +1,2 @@
+export * from '@/UI/Components/RadialProgress/Types';
+export * from '@/UI/Components/RadialProgress/UI';
diff --git a/packages/core/src/UI/Components/index.ts b/packages/core/src/UI/Components/index.ts
index 0234afae..ab298b0b 100644
--- a/packages/core/src/UI/Components/index.ts
+++ b/packages/core/src/UI/Components/index.ts
@@ -9,10 +9,10 @@ export * from '@/UI/Components/ListGroup';
 export * from '@/UI/Components/Loading';
 export * from '@/UI/Components/Menu';
 export * from '@/UI/Components/Navbar';
+export * from '@/UI/Components/RadialProgress';
 export * from '@/UI/Components/Skeleton';
 export * from '@/UI/Components/Stats';
 export * from '@/UI/Components/Status';
 export * from '@/UI/Components/Swap';
-
 export * from '@/UI/Components/ThemeController';
 // export * from '@/Components/Radio';
diff --git a/packages/docs/.vitepress/theme/Components/Layout/Features/Sidebar/Lib/UseSidebarItems.ts b/packages/docs/.vitepress/theme/Components/Layout/Features/Sidebar/Lib/UseSidebarItems.ts
index 536954fa..1502842b 100644
--- a/packages/docs/.vitepress/theme/Components/Layout/Features/Sidebar/Lib/UseSidebarItems.ts
+++ b/packages/docs/.vitepress/theme/Components/Layout/Features/Sidebar/Lib/UseSidebarItems.ts
@@ -124,6 +124,13 @@ export function useSidebarItems(): ComputedRef<SidebarItem[]> {
                         icon:     'line-md:loading-twotone-loop',
                         children: [],
                     },
+                    {
+                        text:     'Radial Progress',
+                        to:       `${flyonUIVueNextPath}/components/radial-progress`,
+                        icon:     'tabler:progress',
+                        children: [],
+                        badge:    _unreleasedBadge,
+                    },
                     {
                         text:     'Skeleton',
                         to:       `${flyonUIVueNextPath}/components/skeleton`,
diff --git a/packages/docs/.vitepress/theme/index.ts b/packages/docs/.vitepress/theme/index.ts
index cb701fad..ad0004e1 100644
--- a/packages/docs/.vitepress/theme/index.ts
+++ b/packages/docs/.vitepress/theme/index.ts
@@ -32,6 +32,7 @@ import TabsDocs                                       from '@/Navigations/Tabs/T
 import AlertDocs                                      from '@/Next/Components/Alert/AlertDocs.vue';
 import AvatarDocs                                     from '@/Next/Components/Avatar/AvatarDocs.vue';
 import DiffDocs                                       from '@/Next/Components/Diff/DiffDocs.vue';
+import RadialProgressDocs                             from '@/Next/Components/RadialProgress/RadialProgressDocs.vue';
 import SkeletonDocs                                   from '@/Next/Components/Skeleton/SkeletonDocs.vue';
 import StatusDocs                                     from '@/Next/Components/Status/StatusDocs.vue';
 import BlockQuoteDocs                                 from '@/Next/Content/BlockQuote/BlockQuoteDocs.vue';
@@ -111,6 +112,7 @@ export default {
             { name: 'PaginationDocs', instance: PaginationDocs },
             { name: 'PopoverDocs', instance: PopoverDocs },
             { name: 'RangeDocs', instance: RangeDocs },
+            { name: 'RadialProgressDocs', instance: RadialProgressDocs },
             { name: 'SkeletonDocs', instance: SkeletonDocs },
             { name: 'StatsDocs', instance: StatsDocs },
             { name: 'StatusDocs', instance: StatusDocs },
diff --git a/packages/docs/Next/Components/Avatar.md b/packages/docs/Next/Components/Avatar.md
index 89b721f4..5a8a2523 100644
--- a/packages/docs/Next/Components/Avatar.md
+++ b/packages/docs/Next/Components/Avatar.md
@@ -20,7 +20,7 @@
 
 <AvatarDocs section="initials-placeholder" />
 
-## Variants
+## Presets
 
 ### Solid
 
diff --git a/packages/docs/Next/Components/RadialProgress.md b/packages/docs/Next/Components/RadialProgress.md
new file mode 100644
index 00000000..5ec13c30
--- /dev/null
+++ b/packages/docs/Next/Components/RadialProgress.md
@@ -0,0 +1,47 @@
+# Radial Progress
+
+## Variants
+
+### Default
+
+<RadialProgressDocs section="default" />
+
+### With values
+
+<RadialProgressDocs section="with-value" />
+
+### With text
+
+<RadialProgressDocs section="with-text" />
+
+## Colors
+
+### Solid
+
+<RadialProgressDocs section="color" />
+
+## Background
+
+### Color
+
+<RadialProgressDocs section="background-color" />
+
+### Soft
+
+<RadialProgressDocs section="soft-background" />
+
+## Sizes
+
+### Custom size & thickness
+
+<RadialProgressDocs section="custom-size-and-thickness" />
+
+## Api
+
+### Props
+
+<RadialProgressDocs section="props" />
+
+### Slots
+
+<RadialProgressDocs section="slots" />
diff --git a/packages/docs/Next/Components/RadialProgress/CustomRadialProgressSizeAndThickness.vue b/packages/docs/Next/Components/RadialProgress/CustomRadialProgressSizeAndThickness.vue
new file mode 100644
index 00000000..5883de95
--- /dev/null
+++ b/packages/docs/Next/Components/RadialProgress/CustomRadialProgressSizeAndThickness.vue
@@ -0,0 +1,26 @@
+<template>
+    <FoRadialProgress color="neutral"
+                      :value="70"
+                      style="--size:12rem; --thickness: 2px;"
+    >
+        70%
+    </FoRadialProgress>
+
+    <FoRadialProgress color="neutral"
+                      :value="70"
+                      style="--size:12rem; --thickness: 2rem;"
+    >
+        70%
+    </FoRadialProgress>
+
+    <FoRadialProgress color="primary"
+                      :value="70"
+                      style="--size:12rem; --thickness: 1rem;"
+    >
+        70%
+    </FoRadialProgress>
+</template>
+
+<script setup lang="ts">
+import { FoRadialProgress } from 'flyonui-vue';
+</script>
diff --git a/packages/docs/Next/Components/RadialProgress/DefaultRadialProgress.vue b/packages/docs/Next/Components/RadialProgress/DefaultRadialProgress.vue
new file mode 100644
index 00000000..686f384e
--- /dev/null
+++ b/packages/docs/Next/Components/RadialProgress/DefaultRadialProgress.vue
@@ -0,0 +1,7 @@
+<template>
+    <FoRadialProgress :value="75" />
+</template>
+
+<script setup lang="ts">
+import { FoRadialProgress } from 'flyonui-vue';
+</script>
diff --git a/packages/docs/Next/Components/RadialProgress/RadialProgressBackgroundColor.vue b/packages/docs/Next/Components/RadialProgress/RadialProgressBackgroundColor.vue
new file mode 100644
index 00000000..829e0359
--- /dev/null
+++ b/packages/docs/Next/Components/RadialProgress/RadialProgressBackgroundColor.vue
@@ -0,0 +1,51 @@
+<template>
+    <FoRadialProgress :value="70">
+        70%
+    </FoRadialProgress>
+
+    <FoRadialProgress :background="{ color: 'primary' }"
+                      :value="70"
+    >
+        70%
+    </FoRadialProgress>
+
+    <FoRadialProgress :background="{ color: 'secondary' }"
+                      :value="70"
+    >
+        70%
+    </FoRadialProgress>
+
+    <FoRadialProgress :background="{ color: 'accent' }"
+                      :value="70"
+    >
+        70%
+    </FoRadialProgress>
+
+    <FoRadialProgress :background="{ color: 'info' }"
+                      :value="70"
+    >
+        70%
+    </FoRadialProgress>
+
+    <FoRadialProgress :background="{ color: 'success' }"
+                      :value="70"
+    >
+        70%
+    </FoRadialProgress>
+
+    <FoRadialProgress :background="{ color: 'warning' }"
+                      :value="70"
+    >
+        70%
+    </FoRadialProgress>
+
+    <FoRadialProgress :background="{ color: 'error' }"
+                      :value="70"
+    >
+        70%
+    </FoRadialProgress>
+</template>
+
+<script setup lang="ts">
+import { FoRadialProgress } from 'flyonui-vue';
+</script>
diff --git a/packages/docs/Next/Components/RadialProgress/RadialProgressColor.vue b/packages/docs/Next/Components/RadialProgress/RadialProgressColor.vue
new file mode 100644
index 00000000..94567152
--- /dev/null
+++ b/packages/docs/Next/Components/RadialProgress/RadialProgressColor.vue
@@ -0,0 +1,51 @@
+<template>
+    <FoRadialProgress :value="70">
+        70%
+    </FoRadialProgress>
+
+    <FoRadialProgress color="primary"
+                      :value="70"
+    >
+        70%
+    </FoRadialProgress>
+
+    <FoRadialProgress color="secondary"
+                      :value="70"
+    >
+        70%
+    </FoRadialProgress>
+
+    <FoRadialProgress color="accent"
+                      :value="70"
+    >
+        70%
+    </FoRadialProgress>
+
+    <FoRadialProgress color="info"
+                      :value="70"
+    >
+        70%
+    </FoRadialProgress>
+
+    <FoRadialProgress color="success"
+                      :value="70"
+    >
+        70%
+    </FoRadialProgress>
+
+    <FoRadialProgress color="warning"
+                      :value="70"
+    >
+        70%
+    </FoRadialProgress>
+
+    <FoRadialProgress color="error"
+                      :value="70"
+    >
+        70%
+    </FoRadialProgress>
+</template>
+
+<script setup lang="ts">
+import { FoRadialProgress } from 'flyonui-vue';
+</script>
diff --git a/packages/docs/Next/Components/RadialProgress/RadialProgressDocs.vue b/packages/docs/Next/Components/RadialProgress/RadialProgressDocs.vue
new file mode 100644
index 00000000..6ba41d12
--- /dev/null
+++ b/packages/docs/Next/Components/RadialProgress/RadialProgressDocs.vue
@@ -0,0 +1,101 @@
+<template>
+    <ComponentDocs :previews="previews"
+                   :section="section"
+                   api-docs-component-names="FoRadialProgress"
+    />
+</template>
+
+<script setup lang="ts">
+import type { ComponentDocsPreview }        from '@/.vitepress/theme/Components/ComponentDocs/Types/ComponentDocs';
+import type { ApiType }                     from '@/Api/Types/Api.ts';
+import type { Default }                     from 'flyonui-vue';
+import ComponentDocs                        from '@/.vitepress/theme/Components/ComponentDocs/UI/ComponentDocs.vue';
+import CustomRadialProgressSizeAndThickness
+    from '@/Next/Components/RadialProgress/CustomRadialProgressSizeAndThickness.vue';
+import CustomRadialProgressSizeAndThicknessRaw
+    from '@/Next/Components/RadialProgress/CustomRadialProgressSizeAndThickness.vue?raw';
+import DefaultRadialProgress            from '@/Next/Components/RadialProgress/DefaultRadialProgress.vue';
+import DefaultRadialProgressRaw         from '@/Next/Components/RadialProgress/DefaultRadialProgress.vue?raw';
+import RadialProgressBackgroundColor    from '@/Next/Components/RadialProgress/RadialProgressBackgroundColor.vue';
+import RadialProgressBackgroundColorRaw
+    from '@/Next/Components/RadialProgress/RadialProgressBackgroundColor.vue?raw';
+import RadialProgressColor             from '@/Next/Components/RadialProgress/RadialProgressColor.vue';
+import RadialProgressColorRaw          from '@/Next/Components/RadialProgress/RadialProgressColor.vue?raw';
+import RadialProgressSoftBackground    from '@/Next/Components/RadialProgress/RadialProgressSoftBackground.vue';
+import RadialProgressSoftBackgroundRaw
+    from '@/Next/Components/RadialProgress/RadialProgressSoftBackground.vue?raw';
+import RadialProgressWithText     from '@/Next/Components/RadialProgress/RadialProgressWithText.vue';
+import RadialProgressWithTextRaw  from '@/Next/Components/RadialProgress/RadialProgressWithText.vue?raw';
+import RadialProgressWithValue    from '@/Next/Components/RadialProgress/RadialProgressWithValue.vue';
+import RadialProgressWithValueRaw from '@/Next/Components/RadialProgress/RadialProgressWithValue.vue?raw';
+import { computed }               from 'vue';
+
+type Section = Default
+    | 'with-value'
+    | 'with-text'
+    | 'color'
+    | 'background-color'
+    | 'soft-background'
+    | 'custom-size-and-thickness'
+    | ApiType;
+
+interface Props {
+    section: Section;
+}
+
+defineProps<Props>();
+
+const previews = computed(() => {
+    return new Map<Section, ComponentDocsPreview>([
+        [
+            'default',
+            {
+                code:      DefaultRadialProgressRaw,
+                component: DefaultRadialProgress,
+            },
+        ],
+        [
+            'with-value',
+            {
+                code:      RadialProgressWithValueRaw,
+                component: RadialProgressWithValue,
+            },
+        ],
+        [
+            'with-text',
+            {
+                code:      RadialProgressWithTextRaw,
+                component: RadialProgressWithText,
+            },
+        ],
+        [
+            'color',
+            {
+                code:      RadialProgressColorRaw,
+                component: RadialProgressColor,
+            },
+        ],
+        [
+            'background-color',
+            {
+                code:      RadialProgressBackgroundColorRaw,
+                component: RadialProgressBackgroundColor,
+            },
+        ],
+        [
+            'soft-background',
+            {
+                code:      RadialProgressSoftBackgroundRaw,
+                component: RadialProgressSoftBackground,
+            },
+        ],
+        [
+            'custom-size-and-thickness',
+            {
+                code:      CustomRadialProgressSizeAndThicknessRaw,
+                component: CustomRadialProgressSizeAndThickness,
+            },
+        ],
+    ]);
+});
+</script>
diff --git a/packages/docs/Next/Components/RadialProgress/RadialProgressSoftBackground.vue b/packages/docs/Next/Components/RadialProgress/RadialProgressSoftBackground.vue
new file mode 100644
index 00000000..07a5b963
--- /dev/null
+++ b/packages/docs/Next/Components/RadialProgress/RadialProgressSoftBackground.vue
@@ -0,0 +1,51 @@
+<template>
+    <FoRadialProgress :value="70">
+        70%
+    </FoRadialProgress>
+
+    <FoRadialProgress :background="{ color: 'primary', preset: 'soft' }"
+                      :value="70"
+    >
+        70%
+    </FoRadialProgress>
+
+    <FoRadialProgress :background="{ color: 'secondary', preset: 'soft' }"
+                      :value="70"
+    >
+        70%
+    </FoRadialProgress>
+
+    <FoRadialProgress :background="{ color: 'accent', preset: 'soft' }"
+                      :value="70"
+    >
+        70%
+    </FoRadialProgress>
+
+    <FoRadialProgress :background="{ color: 'info', preset: 'soft' }"
+                      :value="70"
+    >
+        70%
+    </FoRadialProgress>
+
+    <FoRadialProgress :background="{ color: 'success', preset: 'soft' }"
+                      :value="70"
+    >
+        70%
+    </FoRadialProgress>
+
+    <FoRadialProgress :background="{ color: 'warning', preset: 'soft' }"
+                      :value="70"
+    >
+        70%
+    </FoRadialProgress>
+
+    <FoRadialProgress :background="{ color: 'error', preset: 'soft' }"
+                      :value="70"
+    >
+        70%
+    </FoRadialProgress>
+</template>
+
+<script setup lang="ts">
+import { FoRadialProgress } from 'flyonui-vue';
+</script>
diff --git a/packages/docs/Next/Components/RadialProgress/RadialProgressWithText.vue b/packages/docs/Next/Components/RadialProgress/RadialProgressWithText.vue
new file mode 100644
index 00000000..e7a040fc
--- /dev/null
+++ b/packages/docs/Next/Components/RadialProgress/RadialProgressWithText.vue
@@ -0,0 +1,25 @@
+<template>
+    <FoRadialProgress :value="60">
+        <div class="mx-auto">
+            60%
+        </div>
+
+        <span class="text-secondary text-xs">
+            Loss
+        </span>
+    </FoRadialProgress>
+
+    <FoRadialProgress :value="80">
+        <div class="mx-auto">
+            80%
+        </div>
+
+        <span class="text-secondary text-xs">
+            Profit
+        </span>
+    </FoRadialProgress>
+</template>
+
+<script setup lang="ts">
+import { FoRadialProgress } from 'flyonui-vue';
+</script>
diff --git a/packages/docs/Next/Components/RadialProgress/RadialProgressWithValue.vue b/packages/docs/Next/Components/RadialProgress/RadialProgressWithValue.vue
new file mode 100644
index 00000000..62a1172d
--- /dev/null
+++ b/packages/docs/Next/Components/RadialProgress/RadialProgressWithValue.vue
@@ -0,0 +1,25 @@
+<template>
+    <FoRadialProgress :value="0">
+        0%
+    </FoRadialProgress>
+
+    <FoRadialProgress :value="20">
+        20%
+    </FoRadialProgress>
+
+    <FoRadialProgress :value="60">
+        60%
+    </FoRadialProgress>
+
+    <FoRadialProgress :value="80">
+        80%
+    </FoRadialProgress>
+
+    <FoRadialProgress :value="100">
+        100%
+    </FoRadialProgress>
+</template>
+
+<script setup lang="ts">
+import { FoRadialProgress } from 'flyonui-vue';
+</script>
diff --git a/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/components-radial-progress-background-color-chromium-linux.png b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/components-radial-progress-background-color-chromium-linux.png
new file mode 100644
index 00000000..ad643f2e
Binary files /dev/null and b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/components-radial-progress-background-color-chromium-linux.png differ
diff --git a/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/components-radial-progress-color-chromium-linux.png b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/components-radial-progress-color-chromium-linux.png
new file mode 100644
index 00000000..e28bc1ab
Binary files /dev/null and b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/components-radial-progress-color-chromium-linux.png differ
diff --git a/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/components-radial-progress-custom-size-and-thickness-chromium-linux.png b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/components-radial-progress-custom-size-and-thickness-chromium-linux.png
new file mode 100644
index 00000000..49165641
Binary files /dev/null and b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/components-radial-progress-custom-size-and-thickness-chromium-linux.png differ
diff --git a/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/components-radial-progress-default-chromium-linux.png b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/components-radial-progress-default-chromium-linux.png
new file mode 100644
index 00000000..85d092d4
Binary files /dev/null and b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/components-radial-progress-default-chromium-linux.png differ
diff --git a/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/components-radial-progress-soft-background-chromium-linux.png b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/components-radial-progress-soft-background-chromium-linux.png
new file mode 100644
index 00000000..7ad66321
Binary files /dev/null and b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/components-radial-progress-soft-background-chromium-linux.png differ
diff --git a/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/components-radial-progress-with-text-chromium-linux.png b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/components-radial-progress-with-text-chromium-linux.png
new file mode 100644
index 00000000..8a9d08e2
Binary files /dev/null and b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/components-radial-progress-with-text-chromium-linux.png differ
diff --git a/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/components-radial-progress-with-value-chromium-linux.png b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/components-radial-progress-with-value-chromium-linux.png
new file mode 100644
index 00000000..9b321140
Binary files /dev/null and b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/components-radial-progress-with-value-chromium-linux.png differ