diff --git a/.changeset/shiny-spoons-raise.md b/.changeset/shiny-spoons-raise.md
new file mode 100644
index 00000000..769017ec
--- /dev/null
+++ b/.changeset/shiny-spoons-raise.md
@@ -0,0 +1,5 @@
+---
+"@devup-ui/react": patch
+---
+
+Add svg props
diff --git a/apps/landing/src/app/(detail)/docs/api/style-props/page.mdx b/apps/landing/src/app/(detail)/docs/api/style-props/page.mdx
index 59fce747..50fcaa4b 100644
--- a/apps/landing/src/app/(detail)/docs/api/style-props/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/style-props/page.mdx
@@ -1625,3 +1625,32 @@
+
+## Svg
+
+
+
+
+ | Props |
+ Style Property |
+
+
+
+
+ fill |
+ fill |
+
+
+ stroke |
+ stroke |
+
+
+ strokeWidth |
+ stroke-width |
+
+
+ strokeOpacity |
+ stroke-opacity |
+
+
+
diff --git a/packages/react/src/types/props/index.ts b/packages/react/src/types/props/index.ts
index deabd45f..22e2dec6 100644
--- a/packages/react/src/types/props/index.ts
+++ b/packages/react/src/types/props/index.ts
@@ -22,6 +22,7 @@ import type { DevupUiPositionProps } from './position'
import type { DevupUiScrollbarProps } from './scrollbar'
import type { DevupSelectorProps, DevupThemeSelectorProps } from './selector'
import type { DevupUiShapeProps } from './shape'
+import type { DevupUiSvgProps } from './svg'
import type { DevupUiTableProps } from './table'
import type { DevupUiTextProps } from './text'
import type { DevupUiTransformProps } from './transform'
@@ -58,7 +59,8 @@ export interface DevupCommonProps
DevupUiTransformProps,
DevupUiTransitionProps,
DevupUiUiProps,
- DevupUiViewTransitionProps {}
+ DevupUiViewTransitionProps,
+ DevupUiSvgProps {}
export interface DevupProps
extends DevupCommonProps,
diff --git a/packages/react/src/types/props/svg.ts b/packages/react/src/types/props/svg.ts
new file mode 100644
index 00000000..f290f7f9
--- /dev/null
+++ b/packages/react/src/types/props/svg.ts
@@ -0,0 +1,10 @@
+import type { Property } from 'csstype'
+
+import type { ResponsiveValue } from '../responsive-value'
+
+export interface DevupUiSvgProps {
+ fill?: ResponsiveValue
+ stroke?: ResponsiveValue
+ strokeWidth?: ResponsiveValue
+ strokeOpacity?: ResponsiveValue
+}