diff --git a/package.json b/package.json
index 4c95edd..1666252 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "@storybook/blocks": "^8.0.5",
     "@storybook/react": "^8.0.5",
     "@storybook/react-vite": "^8.0.5",
-    "@types/react": "^18.2.73",
+    "@types/react": "^18.2.74",
     "@types/react-dom": "^18.2.23",
     "@typescript-eslint/eslint-plugin": "^7.5.0",
     "@typescript-eslint/parser": "^7.5.0",
diff --git a/src/components/checkbox/Checkbox.tsx b/src/components/checkbox/Checkbox.tsx
index 47e7b57..e6b9059 100644
--- a/src/components/checkbox/Checkbox.tsx
+++ b/src/components/checkbox/Checkbox.tsx
@@ -82,7 +82,7 @@ export const Checkbox = forwardRef<
                 </SodaSimpleTransition>
             </div>
             <div className="sd-checkbox-ripple">
-                <Ripple />
+                <Ripple as="div" />
             </div>
         </div>
     )
diff --git a/src/components/chip/Chip.tsx b/src/components/chip/Chip.tsx
index 80297c1..1f793ce 100644
--- a/src/components/chip/Chip.tsx
+++ b/src/components/chip/Chip.tsx
@@ -38,6 +38,7 @@ export const Chip = forwardRef<
         <Ripple
             {...props}
             ref={ref}
+            as="div"
             className={clsx('sd-chip', `sd-chip-${variant}`, className)}
             onClick={onClick}
             data-sd-disabled={disabled}
diff --git a/src/components/date-picker/MenuButton.tsx b/src/components/date-picker/MenuButton.tsx
index e9ea7ca..88522f4 100644
--- a/src/components/date-picker/MenuButton.tsx
+++ b/src/components/date-picker/MenuButton.tsx
@@ -18,7 +18,7 @@ export function MenuButton({
         <div className="sd-menu_button-outer">
             <IconButton path={mdiChevronLeft} onClick={onLeft} />
             {children && (
-                <Ripple className="sd-menu_button" onClick={onClick}>
+                <Ripple as="div" className="sd-menu_button" onClick={onClick}>
                     <span>{children}</span>
                     <Icon size={1} path={mdiMenuDown} />
                 </Ripple>
diff --git a/src/components/navigation/NavigationDrawer.tsx b/src/components/navigation/NavigationDrawer.tsx
index 9aab0fa..6ba8d6b 100644
--- a/src/components/navigation/NavigationDrawer.tsx
+++ b/src/components/navigation/NavigationDrawer.tsx
@@ -178,6 +178,7 @@ export const NavigationDrawerItem = forwardRef<
     <Ripple
         {...props}
         ref={ref}
+        as="div"
         data-sd-active={active}
         className={clsx('sd-navigation_drawer_item', className)}
     >
diff --git a/src/components/radio-button/RadioButton.tsx b/src/components/radio-button/RadioButton.tsx
index 2323cbb..a075178 100644
--- a/src/components/radio-button/RadioButton.tsx
+++ b/src/components/radio-button/RadioButton.tsx
@@ -80,7 +80,7 @@ export const RadioButton = forwardRef<
             <div className="sd-radio_button-box">
                 <div className="sd-radio_button-circle" />
                 <div className="sd-radio_button-ripple">
-                    <Ripple ref={rippleRef} />
+                    <Ripple as="div" ref={rippleRef} />
                 </div>
             </div>
             <span
diff --git a/src/components/segmented-button/SegmentedButton.tsx b/src/components/segmented-button/SegmentedButton.tsx
index cffb909..8e7a7aa 100644
--- a/src/components/segmented-button/SegmentedButton.tsx
+++ b/src/components/segmented-button/SegmentedButton.tsx
@@ -60,6 +60,7 @@ export const SegmentedButton = forwardRef<
             {items &&
                 items.map(({ label, disabled, value: value$i }, index) => (
                     <Ripple
+                        as="div"
                         key={value$i}
                         tabIndex={index + 1}
                         className="sd-segmented_button-item"
diff --git a/src/components/tab/Tab.tsx b/src/components/tab/Tab.tsx
index f3a5574..e57334f 100644
--- a/src/components/tab/Tab.tsx
+++ b/src/components/tab/Tab.tsx
@@ -38,6 +38,7 @@ export const Tab = forwardRef<
         <Ripple
             {...props}
             ref={ref}
+            as="div"
             tabIndex={0}
             className={clsx('sd-tab', className)}
             data-sd-active={active}
diff --git a/src/composition/ActionButton.scss b/src/composition/ActionButton/ActionButton.scss
similarity index 100%
rename from src/composition/ActionButton.scss
rename to src/composition/ActionButton/ActionButton.scss
diff --git a/src/composition/ActionButton.stories.tsx b/src/composition/ActionButton/ActionButton.stories.tsx
similarity index 100%
rename from src/composition/ActionButton.stories.tsx
rename to src/composition/ActionButton/ActionButton.stories.tsx
diff --git a/src/composition/ActionButton.tsx b/src/composition/ActionButton/ActionButton.tsx
similarity index 100%
rename from src/composition/ActionButton.tsx
rename to src/composition/ActionButton/ActionButton.tsx
diff --git a/src/composition/ActionButton/index.ts b/src/composition/ActionButton/index.ts
new file mode 100644
index 0000000..5657da9
--- /dev/null
+++ b/src/composition/ActionButton/index.ts
@@ -0,0 +1 @@
+export * from './ActionButton'
diff --git a/src/composition/Blockquote.scss b/src/composition/Blockquote/Blockquote.scss
similarity index 100%
rename from src/composition/Blockquote.scss
rename to src/composition/Blockquote/Blockquote.scss
diff --git a/src/composition/Blockquote.stories.tsx b/src/composition/Blockquote/Blockquote.stories.tsx
similarity index 100%
rename from src/composition/Blockquote.stories.tsx
rename to src/composition/Blockquote/Blockquote.stories.tsx
diff --git a/src/composition/Blockquote.tsx b/src/composition/Blockquote/Blockquote.tsx
similarity index 97%
rename from src/composition/Blockquote.tsx
rename to src/composition/Blockquote/Blockquote.tsx
index 7a20711..3ac5519 100644
--- a/src/composition/Blockquote.tsx
+++ b/src/composition/Blockquote/Blockquote.tsx
@@ -6,7 +6,7 @@ import { Icon } from '@mdi/react'
 import { useCollapsible } from '@/hooks/use-collapsible'
 import { useMergeRefs } from '@/hooks/use-merge'
 import { ExtendProps } from '@/utils/type'
-import { IconRippleButton } from './IconRippleButton'
+import { IconRippleButton } from '../IconRippleButton'
 
 export const Blockquote = forwardRef<
     HTMLQuoteElement,
diff --git a/src/composition/Blockquote/index.ts b/src/composition/Blockquote/index.ts
new file mode 100644
index 0000000..923a351
--- /dev/null
+++ b/src/composition/Blockquote/index.ts
@@ -0,0 +1 @@
+export * from './Blockquote'
diff --git a/src/composition/Details.scss b/src/composition/Details/Details.scss
similarity index 100%
rename from src/composition/Details.scss
rename to src/composition/Details/Details.scss
diff --git a/src/composition/Details.stories.tsx b/src/composition/Details/Details.stories.tsx
similarity index 100%
rename from src/composition/Details.stories.tsx
rename to src/composition/Details/Details.stories.tsx
diff --git a/src/composition/Details.tsx b/src/composition/Details/Details.tsx
similarity index 100%
rename from src/composition/Details.tsx
rename to src/composition/Details/Details.tsx
diff --git a/src/composition/Details/index.ts b/src/composition/Details/index.ts
new file mode 100644
index 0000000..fdbadef
--- /dev/null
+++ b/src/composition/Details/index.ts
@@ -0,0 +1 @@
+export * from './Details'
diff --git a/src/composition/IconRippleButton.scss b/src/composition/IconRippleButton/IconRippleButton.scss
similarity index 100%
rename from src/composition/IconRippleButton.scss
rename to src/composition/IconRippleButton/IconRippleButton.scss
diff --git a/src/composition/IconRippleButton.stories.tsx b/src/composition/IconRippleButton/IconRippleButton.stories.tsx
similarity index 100%
rename from src/composition/IconRippleButton.stories.tsx
rename to src/composition/IconRippleButton/IconRippleButton.stories.tsx
diff --git a/src/composition/IconRippleButton.tsx b/src/composition/IconRippleButton/IconRippleButton.tsx
similarity index 96%
rename from src/composition/IconRippleButton.tsx
rename to src/composition/IconRippleButton/IconRippleButton.tsx
index 2f5661f..1635d59 100644
--- a/src/composition/IconRippleButton.tsx
+++ b/src/composition/IconRippleButton/IconRippleButton.tsx
@@ -33,7 +33,7 @@ export const IconRippleButton = forwardRef<
         >
             {path ? <Icon path={path} /> : children}
             <div className="sd-icon_ripple_button-ripple">
-                <Ripple />
+                <Ripple as="div" />
             </div>
         </div>
     )
diff --git a/src/composition/IconRippleButton/index.ts b/src/composition/IconRippleButton/index.ts
new file mode 100644
index 0000000..f3c907a
--- /dev/null
+++ b/src/composition/IconRippleButton/index.ts
@@ -0,0 +1 @@
+export * from './IconRippleButton'
diff --git a/src/composition/NestedMenu.stories.tsx b/src/composition/NestedMenu/NestedMenu.stories.tsx
similarity index 98%
rename from src/composition/NestedMenu.stories.tsx
rename to src/composition/NestedMenu/NestedMenu.stories.tsx
index c9a902c..5b825c1 100644
--- a/src/composition/NestedMenu.stories.tsx
+++ b/src/composition/NestedMenu/NestedMenu.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { mdiDotsVertical } from '@mdi/js'
-import { IconButton } from '..'
+import { IconButton } from '../..'
 import { NestedMenu as Menu, NestedMenuItem as MenuItem } from './NestedMenu'
 
 const meta = {
diff --git a/src/composition/NestedMenu.tsx b/src/composition/NestedMenu/NestedMenu.tsx
similarity index 100%
rename from src/composition/NestedMenu.tsx
rename to src/composition/NestedMenu/NestedMenu.tsx
diff --git a/src/composition/NestedMenu/index.ts b/src/composition/NestedMenu/index.ts
new file mode 100644
index 0000000..cd45f81
--- /dev/null
+++ b/src/composition/NestedMenu/index.ts
@@ -0,0 +1 @@
+export * from './NestedMenu'
diff --git a/src/composition/PopoverHolder.stories.tsx b/src/composition/PopoverHolder/PopoverHolder.stories.tsx
similarity index 93%
rename from src/composition/PopoverHolder.stories.tsx
rename to src/composition/PopoverHolder/PopoverHolder.stories.tsx
index 1445896..cbf7399 100644
--- a/src/composition/PopoverHolder.stories.tsx
+++ b/src/composition/PopoverHolder/PopoverHolder.stories.tsx
@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { useRef } from 'react'
 import { mdiAccount, mdiDotsVertical, mdiMenu } from '@mdi/js'
-import { TopAppBar } from '../components/app-bar'
-import { IconButton } from '../components/icon-button'
-import { Default as menuDefaultStory } from '../components/menu/Menu.stories'
-import { PlainTooltip, RichTooltip } from '../components/tooltip'
+import { TopAppBar } from '@/components/app-bar'
+import { IconButton } from '@/components/icon-button'
+import { Default as menuDefaultStory } from '@/components/menu/Menu.stories'
+import { PlainTooltip, RichTooltip } from '@/components/tooltip'
 import { PopoverHolder, PopoverHolderHandle } from './PopoverHolder'
 
 const meta = {
diff --git a/src/composition/PopoverHolder.tsx b/src/composition/PopoverHolder/PopoverHolder.tsx
similarity index 100%
rename from src/composition/PopoverHolder.tsx
rename to src/composition/PopoverHolder/PopoverHolder.tsx
diff --git a/src/composition/PopoverHolder/index.ts b/src/composition/PopoverHolder/index.ts
new file mode 100644
index 0000000..b4a6cae
--- /dev/null
+++ b/src/composition/PopoverHolder/index.ts
@@ -0,0 +1 @@
+export * from './PopoverHolder'
diff --git a/src/composition/Scrim.scss b/src/composition/Scrim/Scrim.scss
similarity index 100%
rename from src/composition/Scrim.scss
rename to src/composition/Scrim/Scrim.scss
diff --git a/src/composition/Scrim.stories.tsx b/src/composition/Scrim/Scrim.stories.tsx
similarity index 100%
rename from src/composition/Scrim.stories.tsx
rename to src/composition/Scrim/Scrim.stories.tsx
diff --git a/src/composition/Scrim.tsx b/src/composition/Scrim/Scrim.tsx
similarity index 100%
rename from src/composition/Scrim.tsx
rename to src/composition/Scrim/Scrim.tsx
diff --git a/src/composition/Scrim/index.ts b/src/composition/Scrim/index.ts
new file mode 100644
index 0000000..c9c7021
--- /dev/null
+++ b/src/composition/Scrim/index.ts
@@ -0,0 +1 @@
+export * from './Scrim'
diff --git a/src/composition/Select.scss b/src/composition/Select/Select.scss
similarity index 100%
rename from src/composition/Select.scss
rename to src/composition/Select/Select.scss
diff --git a/src/composition/Select.stories.tsx b/src/composition/Select/Select.stories.tsx
similarity index 97%
rename from src/composition/Select.stories.tsx
rename to src/composition/Select/Select.stories.tsx
index 5b7b256..51b5fb2 100644
--- a/src/composition/Select.stories.tsx
+++ b/src/composition/Select/Select.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { mdiChevronRight } from '@mdi/js'
 import Icon from '@mdi/react'
-import { List } from '../components/list'
+import { List } from '@/components/list'
 import { Select } from './Select'
 
 const fruits = [
diff --git a/src/composition/Select.tsx b/src/composition/Select/Select.tsx
similarity index 98%
rename from src/composition/Select.tsx
rename to src/composition/Select/Select.tsx
index fe6e77e..b7b729e 100644
--- a/src/composition/Select.tsx
+++ b/src/composition/Select/Select.tsx
@@ -291,7 +291,10 @@ export const Select = forwardRef<
                     {typeof children === 'function'
                         ? children(value!)
                         : children ?? (
-                              <Ripple className="sd-select-menu_button">
+                              <Ripple
+                                  as="div"
+                                  className="sd-select-menu_button"
+                              >
                                   <div className="sd-select-menu_button-label">
                                       <span>
                                           {getOptionValue(
diff --git a/src/composition/Select/index.ts b/src/composition/Select/index.ts
new file mode 100644
index 0000000..3e383f0
--- /dev/null
+++ b/src/composition/Select/index.ts
@@ -0,0 +1 @@
+export * from './Select'
diff --git a/src/composition/SodaImage.scss b/src/composition/SodaImage/SodaImage.scss
similarity index 100%
rename from src/composition/SodaImage.scss
rename to src/composition/SodaImage/SodaImage.scss
diff --git a/src/composition/SodaImage.stories.tsx b/src/composition/SodaImage/SodaImage.stories.tsx
similarity index 96%
rename from src/composition/SodaImage.stories.tsx
rename to src/composition/SodaImage/SodaImage.stories.tsx
index 239b0ec..87e16a3 100644
--- a/src/composition/SodaImage.stories.tsx
+++ b/src/composition/SodaImage/SodaImage.stories.tsx
@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { useRef, useState } from 'react'
-import { Button } from '..'
+import { Button } from '@/components/button'
 import { SodaImage } from './SodaImage'
+import 'csstype'
 
 const meta = {
     title: 'composition/SodaImage',
@@ -11,7 +12,7 @@ const meta = {
         minWidth: 100,
         minHeight: 100,
     },
-} satisfies Meta<typeof SodaImage>
+} satisfies Meta<typeof SodaImage> as any
 
 export default meta
 
diff --git a/src/composition/SodaImage.tsx b/src/composition/SodaImage/SodaImage.tsx
similarity index 100%
rename from src/composition/SodaImage.tsx
rename to src/composition/SodaImage/SodaImage.tsx
diff --git a/src/composition/SodaImage/index.ts b/src/composition/SodaImage/index.ts
new file mode 100644
index 0000000..99d2eab
--- /dev/null
+++ b/src/composition/SodaImage/index.ts
@@ -0,0 +1 @@
+export * from './SodaImage'
diff --git a/src/composition/SodaTransition.stories.tsx b/src/composition/SodaTransition/SodaTransition.stories.tsx
similarity index 97%
rename from src/composition/SodaTransition.stories.tsx
rename to src/composition/SodaTransition/SodaTransition.stories.tsx
index 0121ef9..3207087 100644
--- a/src/composition/SodaTransition.stories.tsx
+++ b/src/composition/SodaTransition/SodaTransition.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { useState } from 'react'
-import { Button } from '..'
+import { Button } from '@/components/button'
 import { SodaSimpleTransition, SodaTransition } from './SodaTransition'
 
 const meta = {
diff --git a/src/composition/SodaTransition.tsx b/src/composition/SodaTransition/SodaTransition.tsx
similarity index 100%
rename from src/composition/SodaTransition.tsx
rename to src/composition/SodaTransition/SodaTransition.tsx
diff --git a/src/composition/SodaTransition/index.ts b/src/composition/SodaTransition/index.ts
new file mode 100644
index 0000000..d027945
--- /dev/null
+++ b/src/composition/SodaTransition/index.ts
@@ -0,0 +1 @@
+export * from './SodaTransition'
diff --git a/src/composition/Table.scss b/src/composition/Table/Table.scss
similarity index 100%
rename from src/composition/Table.scss
rename to src/composition/Table/Table.scss
diff --git a/src/composition/Table.stories.tsx b/src/composition/Table/Table.stories.tsx
similarity index 100%
rename from src/composition/Table.stories.tsx
rename to src/composition/Table/Table.stories.tsx
diff --git a/src/composition/Table.tsx b/src/composition/Table/Table.tsx
similarity index 100%
rename from src/composition/Table.tsx
rename to src/composition/Table/Table.tsx
diff --git a/src/composition/Table/index.ts b/src/composition/Table/index.ts
new file mode 100644
index 0000000..a86149c
--- /dev/null
+++ b/src/composition/Table/index.ts
@@ -0,0 +1 @@
+export * from './Table'
diff --git a/src/composition/TooltipHolder.stories.tsx b/src/composition/TooltipHolder/TooltipHolder.stories.tsx
similarity index 93%
rename from src/composition/TooltipHolder.stories.tsx
rename to src/composition/TooltipHolder/TooltipHolder.stories.tsx
index 66880c3..c7504fd 100644
--- a/src/composition/TooltipHolder.stories.tsx
+++ b/src/composition/TooltipHolder/TooltipHolder.stories.tsx
@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { useRef } from 'react'
 import { mdiAccount, mdiDotsVertical, mdiMenu } from '@mdi/js'
-import { TopAppBar } from '../components/app-bar'
-import { IconButton } from '../components/icon-button'
-import { Default as menuDefaultStory } from '../components/menu/Menu.stories'
-import { PlainTooltip, RichTooltip } from '../components/tooltip'
+import { TopAppBar } from '@/components/app-bar'
+import { IconButton } from '@/components/icon-button'
+import { Default as menuDefaultStory } from '@/components/menu/Menu.stories'
+import { PlainTooltip, RichTooltip } from '@/components/tooltip'
 import { TooltipHolder, TooltipHolderHandle } from './TooltipHolder'
 
 const meta = {
diff --git a/src/composition/TooltipHolder.tsx b/src/composition/TooltipHolder/TooltipHolder.tsx
similarity index 100%
rename from src/composition/TooltipHolder.tsx
rename to src/composition/TooltipHolder/TooltipHolder.tsx
diff --git a/src/composition/TooltipHolder/index.ts b/src/composition/TooltipHolder/index.ts
new file mode 100644
index 0000000..4593fcc
--- /dev/null
+++ b/src/composition/TooltipHolder/index.ts
@@ -0,0 +1 @@
+export * from './TooltipHolder'
diff --git a/src/composition/index.ts b/src/composition/index.ts
index 4a026cd..7e34d4c 100644
--- a/src/composition/index.ts
+++ b/src/composition/index.ts
@@ -1,12 +1,12 @@
-export * from './ActionButton.tsx'
-export * from './Blockquote.tsx'
-export * from './Details.tsx'
-export * from './IconRippleButton.tsx'
-export * from './NestedMenu.tsx'
-export * from './PopoverHolder.tsx'
-export * from './Scrim.tsx'
-export * from './Select.tsx'
-export * from './SodaImage.tsx'
-export * from './SodaTransition.tsx'
-export * from './Table.tsx'
-export * from './TooltipHolder.tsx'
+export * from './ActionButton'
+export * from './Blockquote'
+export * from './Details'
+export * from './IconRippleButton'
+export * from './NestedMenu'
+export * from './PopoverHolder'
+export * from './Scrim'
+export * from './Select'
+export * from './SodaImage'
+export * from './SodaTransition'
+export * from './Table'
+export * from './TooltipHolder'
diff --git a/src/ripple/Ripple.tsx b/src/ripple/Ripple.tsx
index e99bc4f..7027dc7 100644
--- a/src/ripple/Ripple.tsx
+++ b/src/ripple/Ripple.tsx
@@ -2,12 +2,7 @@ import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
 import { ExtendProps, TagNameString } from '@/utils/type'
 import { ripple } from './ripple-effect'
 
-type Props = ExtendProps<{
-    /**
-     * HTML tag name, div by default
-     */
-    as?: TagNameString
-    children?: React.ReactNode
+interface RippleProps {
     disabled?: boolean
     /**
      * In ms
@@ -17,7 +12,22 @@ type Props = ExtendProps<{
      * Any css color string
      */
     rippleColor?: string
-}>
+}
+
+interface RippleRefProps extends RippleProps {
+    /**
+     * HTML tag name, div by default
+     */
+    as: TagNameString
+    children?: React.ReactNode
+}
+
+interface RippleFnProps extends RippleProps {
+    as?: undefined
+    children: (ref: React.Ref<HTMLElement>) => React.ReactNode
+}
+
+type Props = ExtendProps<RippleRefProps | RippleFnProps>
 
 type RippleAt = (
     rippleX: number,
@@ -31,7 +41,7 @@ export type RippleHandle = HTMLElement & { rippleAt?: RippleAt }
  * Wrapper component for ripple-effect.ts
  */
 export const Ripple = forwardRef<RippleHandle, Props>(
-    ({ as, disabled, rippleColor, ...props }, ref) => {
+    ({ as, disabled, rippleColor, children, ...props }, ref) => {
         const eRef = useRef<HTMLElement>(null)
         const rippleAtRef = useRef<RippleAt | undefined>(undefined)
         useEffect(() => {
@@ -45,12 +55,15 @@ export const Ripple = forwardRef<RippleHandle, Props>(
             return e
         })
 
-        const As: any = as || 'div'
+        if (as) {
+            const As = as as any
+            return (
+                <As {...props} ref={eRef} disabled={disabled}>
+                    {children}
+                </As>
+            )
+        }
 
-        return (
-            <As {...props} ref={eRef} disabled={disabled}>
-                {props.children}
-            </As>
-        )
+        return children(eRef)
     },
 )
diff --git a/src/ripple/index.ts b/src/ripple/index.ts
new file mode 100644
index 0000000..9bb0948
--- /dev/null
+++ b/src/ripple/index.ts
@@ -0,0 +1,3 @@
+export * from './ripple-effect'
+export * from './hooks'
+export * from './Ripple'