diff --git a/.changeset/tough-swans-see.md b/.changeset/tough-swans-see.md
new file mode 100644
index 00000000..1f7234be
--- /dev/null
+++ b/.changeset/tough-swans-see.md
@@ -0,0 +1,5 @@
+---
+"@devup-ui/react": patch
+---
+
+Optimize typing
diff --git a/packages/react/src/components/Box.tsx b/packages/react/src/components/Box.tsx
index 5a08f423..d2531a0d 100644
--- a/packages/react/src/components/Box.tsx
+++ b/packages/react/src/components/Box.tsx
@@ -1,9 +1,9 @@
-import type { DevupProps } from '../types/props'
+import type { DevupComponentProps } from '../types/props'
 import type { Merge } from '../types/utils'
 
 export function Box<T extends React.ElementType = 'div'>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: Merge<React.ComponentProps<T>, DevupProps<T>>,
+  props: Merge<React.ComponentProps<T>, DevupComponentProps<T>>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }
diff --git a/packages/react/src/components/Button.tsx b/packages/react/src/components/Button.tsx
index 809db4c3..3a56bd2b 100644
--- a/packages/react/src/components/Button.tsx
+++ b/packages/react/src/components/Button.tsx
@@ -1,9 +1,9 @@
-import type { DevupProps } from '../types/props'
+import type { DevupComponentProps } from '../types/props'
 import type { Merge } from '../types/utils'
 
 export function Button<T extends React.ElementType = 'button'>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: Merge<React.ComponentProps<T>, DevupProps<T>>,
+  props: Merge<React.ComponentProps<T>, DevupComponentProps<T>>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }
diff --git a/packages/react/src/components/Center.tsx b/packages/react/src/components/Center.tsx
index 6b3fa786..3b04b514 100644
--- a/packages/react/src/components/Center.tsx
+++ b/packages/react/src/components/Center.tsx
@@ -1,9 +1,9 @@
-import type { DevupProps } from '../types/props'
+import type { DevupComponentProps } from '../types/props'
 import type { Merge } from '../types/utils'
 
 export function Center<T extends React.ElementType = 'div'>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: Merge<React.ComponentProps<T>, DevupProps<T>>,
+  props: Merge<React.ComponentProps<T>, DevupComponentProps<T>>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }
diff --git a/packages/react/src/components/Flex.tsx b/packages/react/src/components/Flex.tsx
index 7f664c2c..cfc30109 100644
--- a/packages/react/src/components/Flex.tsx
+++ b/packages/react/src/components/Flex.tsx
@@ -1,9 +1,9 @@
-import type { DevupProps } from '../types/props'
+import type { DevupComponentProps } from '../types/props'
 import type { Merge } from '../types/utils'
 
 export function Flex<T extends React.ElementType = 'div'>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: Merge<React.ComponentProps<T>, DevupProps<T>>,
+  props: Merge<React.ComponentProps<T>, DevupComponentProps<T>>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }
diff --git a/packages/react/src/components/Grid.tsx b/packages/react/src/components/Grid.tsx
index a507d0cc..5fcdec42 100644
--- a/packages/react/src/components/Grid.tsx
+++ b/packages/react/src/components/Grid.tsx
@@ -1,9 +1,9 @@
-import type { DevupProps } from '../types/props'
+import type { DevupComponentProps } from '../types/props'
 import type { Merge } from '../types/utils'
 
 export function Grid<T extends React.ElementType = 'div'>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: Merge<React.ComponentProps<T>, DevupProps<T>>,
+  props: Merge<React.ComponentProps<T>, DevupComponentProps<T>>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }
diff --git a/packages/react/src/components/Image.tsx b/packages/react/src/components/Image.tsx
index 00c9a82a..8ab61153 100644
--- a/packages/react/src/components/Image.tsx
+++ b/packages/react/src/components/Image.tsx
@@ -1,9 +1,9 @@
-import type { DevupProps } from '../types/props'
+import type { DevupComponentProps } from '../types/props'
 import type { Merge } from '../types/utils'
 
 export function Image<T extends React.ElementType = 'img'>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: Merge<React.ComponentProps<T>, DevupProps<T>>,
+  props: Merge<React.ComponentProps<T>, DevupComponentProps<T>>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }
diff --git a/packages/react/src/components/Input.tsx b/packages/react/src/components/Input.tsx
index 524c6560..caf9dcdb 100644
--- a/packages/react/src/components/Input.tsx
+++ b/packages/react/src/components/Input.tsx
@@ -1,9 +1,9 @@
-import type { DevupProps } from '../types/props'
+import type { DevupComponentProps } from '../types/props'
 import type { Merge } from '../types/utils'
 
 export function Input<T extends React.ElementType = 'input'>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: Merge<React.ComponentProps<T>, DevupProps<T>>,
+  props: Merge<React.ComponentProps<T>, DevupComponentProps<T>>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }
diff --git a/packages/react/src/components/Text.tsx b/packages/react/src/components/Text.tsx
index b99be487..5a9cd0db 100644
--- a/packages/react/src/components/Text.tsx
+++ b/packages/react/src/components/Text.tsx
@@ -1,9 +1,9 @@
-import type { DevupProps } from '../types/props'
+import type { DevupComponentProps } from '../types/props'
 import type { Merge } from '../types/utils'
 
 export function Text<T extends React.ElementType = 'span'>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: Merge<React.ComponentProps<T>, DevupProps<T>>,
+  props: Merge<React.ComponentProps<T>, DevupComponentProps<T>>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }
diff --git a/packages/react/src/components/ThemeScript.tsx b/packages/react/src/components/ThemeScript.tsx
index 14fffed6..07c2ff54 100644
--- a/packages/react/src/components/ThemeScript.tsx
+++ b/packages/react/src/components/ThemeScript.tsx
@@ -1,6 +1,5 @@
-import type { Conditional } from 'src/types/utils'
-
 import type { DevupTheme } from '../types/theme'
+import type { Conditional } from '../types/utils'
 
 interface ThemeScriptProps {
   auto?: boolean
diff --git a/packages/react/src/components/VStack.tsx b/packages/react/src/components/VStack.tsx
index 58df5e3b..2814af4d 100644
--- a/packages/react/src/components/VStack.tsx
+++ b/packages/react/src/components/VStack.tsx
@@ -1,9 +1,9 @@
-import type { DevupProps } from '../types/props'
+import type { DevupComponentProps } from '../types/props'
 import type { Merge } from '../types/utils'
 
 export function VStack<T extends React.ElementType = 'div'>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: Merge<React.ComponentProps<T>, DevupProps<T>>,
+  props: Merge<React.ComponentProps<T>, DevupComponentProps<T>>,
 ): React.ReactElement {
   throw new Error('Cannot run on the runtime')
 }
diff --git a/packages/react/src/types/props/__tests__/index.test-d.ts b/packages/react/src/types/props/__tests__/index.test-d.ts
index 31a43321..4e540007 100644
--- a/packages/react/src/types/props/__tests__/index.test-d.ts
+++ b/packages/react/src/types/props/__tests__/index.test-d.ts
@@ -1,5 +1,4 @@
-import type { DevupCommonProps, DevupProps } from '..'
-import type { DevupSelectorProps } from '../selector'
+import type { DevupCommonProps, DevupComponentProps } from '..'
 
 describe('index', () => {
   it('DevupCommonProps', () => {
@@ -10,7 +9,7 @@ describe('index', () => {
   })
 
   it('DevupCommonProps _selector', () => {
-    assertType<DevupProps<'div'>>({
+    assertType<DevupComponentProps<'div'>>({
       _hover: {
         bg: 'red',
         _active: {
@@ -19,24 +18,26 @@ describe('index', () => {
       },
     })
 
-    assertType<DevupProps<'div'>>({
+    assertType<DevupComponentProps<'div'>>({
       _hover: `
       background-color: red;
       `,
     })
 
-    expectTypeOf<DevupProps<'div'>>().toExtend<DevupProps<'div'>['_hover']>()
+    expectTypeOf<DevupComponentProps<'div'>>().toExtend<
+      DevupComponentProps<'div'>['_hover']
+    >()
   })
 
   it('DevupCommonProps selectors', () => {
-    assertType<DevupProps<'div'>>({
+    assertType<DevupComponentProps<'div'>>({
       selectors: {
         '&:hover': {
           bg: 'red',
         },
       },
     })
-    assertType<DevupProps<'div'>>({
+    assertType<DevupComponentProps<'div'>>({
       selectors: {
         '&:hover': `
         background-color: red;
@@ -44,7 +45,7 @@ describe('index', () => {
       },
     })
 
-    assertType<DevupProps<'div'>>({
+    assertType<DevupComponentProps<'div'>>({
       selectors: {
         '&:hover': [
           `
@@ -58,7 +59,7 @@ describe('index', () => {
     })
   })
   it('DevupSelectorProps', () => {
-    assertType<DevupSelectorProps>({
+    assertType<DevupComponentProps<'div'>>({
       _hover: {
         bg: 'red',
       },
@@ -68,7 +69,7 @@ describe('index', () => {
         },
       },
     })
-    assertType<DevupSelectorProps>({
+    assertType<DevupComponentProps<'div'>>({
       selectors: {
         '&:hover': `
         background-color: red;
@@ -79,7 +80,7 @@ describe('index', () => {
       },
     })
 
-    assertType<DevupSelectorProps>({
+    assertType<DevupComponentProps<'div'>>({
       _hover: `
       background-color: red;
       `,
diff --git a/packages/react/src/types/props/index.ts b/packages/react/src/types/props/index.ts
index 7dd84558..76f68bc7 100644
--- a/packages/react/src/types/props/index.ts
+++ b/packages/react/src/types/props/index.ts
@@ -23,6 +23,7 @@ export interface DevupShortcutsProps
     DevupUiMotionPathProps,
     DevupUiPositionProps,
     DevupUiTextProps {}
+
 export type DevupCommonProps = Merge<
   {
     [K in keyof Properties]?: ResponsiveValue<Properties[K]>
@@ -30,10 +31,14 @@ export type DevupCommonProps = Merge<
   DevupShortcutsProps
 >
 
-export interface DevupProps<T extends React.ElementType>
-  extends DevupCommonProps,
-    DevupSelectorProps,
-    DevupThemeSelectorProps {
+export interface DevupProps extends DevupCommonProps, DevupSelectorProps {}
+
+export interface DevupPropsWithTheme
+  extends DevupProps,
+    DevupThemeSelectorProps {}
+
+export interface DevupComponentProps<T extends React.ElementType>
+  extends DevupPropsWithTheme {
   as?: T
   styleVars?: Record<string, string | undefined>
 }
diff --git a/packages/react/src/types/props/selector/index.ts b/packages/react/src/types/props/selector/index.ts
index 5b7f5334..683d0f6b 100644
--- a/packages/react/src/types/props/selector/index.ts
+++ b/packages/react/src/types/props/selector/index.ts
@@ -2,7 +2,7 @@ import type { Pseudos } from 'csstype'
 
 import type { ResponsiveValue } from '../../responsive-value'
 import type { DevupTheme } from '../../theme'
-import type { DevupCommonProps } from '../index'
+import type { DevupProps } from '../index'
 
 type CamelCase<S extends string> =
   S extends Lowercase<S>
@@ -13,18 +13,13 @@ type CamelCase<S extends string> =
 
 type PascalCase<S extends string> = Capitalize<CamelCase<S>>
 
+type SelectorProps = ResponsiveValue<DevupProps | string | false>
 export type DevupThemeSelectorProps = keyof DevupTheme extends undefined
-  ? Record<`_theme${string}`, DevupCommonProps & DevupSelectorProps>
+  ? Record<`_theme${string}`, SelectorProps>
   : {
-      [K in keyof DevupTheme as `_theme${PascalCase<K>}`]?: DevupCommonProps &
-        DevupSelectorProps
+      [K in keyof DevupTheme as `_theme${PascalCase<K>}`]?: SelectorProps
     }
 
-type SelectorProps = ResponsiveValue<
-  | (DevupCommonProps & DevupSelectorProps & DevupThemeSelectorProps)
-  | string
-  | false
->
 type NormalSelector = Exclude<
   Pseudos,
   `:-${string}` | `::-${string}` | `${string}()`
diff --git a/packages/react/src/utils/css.ts b/packages/react/src/utils/css.ts
index 22414662..63d6b483 100644
--- a/packages/react/src/utils/css.ts
+++ b/packages/react/src/utils/css.ts
@@ -1,20 +1,12 @@
-import type { DevupCommonProps } from '../types/props'
-import type { DevupSelectorProps } from '../types/props/selector'
-import type { DevupThemeSelectorProps } from '../types/props/selector'
+import type { DevupPropsWithTheme } from '../types/props'
 
-export function css(
-  props: DevupCommonProps | DevupSelectorProps | DevupThemeSelectorProps,
-): string
+export function css(props: DevupPropsWithTheme): string
 export function css(strings: TemplateStringsArray): string
 export function css(): string
 
 export function css(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  strings?:
-    | TemplateStringsArray
-    | DevupCommonProps
-    | DevupSelectorProps
-    | DevupThemeSelectorProps,
+  strings?: TemplateStringsArray | DevupPropsWithTheme,
 ): string {
   throw new Error('Cannot run on the runtime')
 }