diff --git a/README.md b/README.md
index 465d253..ed14461 100644
--- a/README.md
+++ b/README.md
@@ -41,7 +41,7 @@ npm install framer-motion
 ## Usage
 
 ```jsx
-import Sheet from 'react-modal-sheet';
+import { Sheet } from 'react-modal-sheet';
 import { useState } from 'react';
 
 function Example() {
@@ -98,7 +98,7 @@ Also, by constructing the sheet from smaller pieces makes it easier to apply any
 Imperative method that can be accessed via a ref for snapping to a snap point in given index.
 
 ```tsx
-import Sheet, { SheetRef } from 'react-modal-sheet';
+import { Sheet, SheetRef } from 'react-modal-sheet';
 import { useState, useRef } from 'react';
 
 function Example() {
@@ -144,7 +144,7 @@ Similarly to the `snapTo` method the `y` value can be accessed via a ref.
 The `y` value can be useful for certain situtation eg. when you want to combine snap points with scrollable sheet content and ensure that the content stays properly scrollable in any snap point. Below you can see a simplified example of this situation and for a more detailed example take a look at the [ScrollableSnapPoints](example/components/ScrollableSnapPoints.tsx) component in the example app.
 
 ```tsx
-import Sheet, { SheetRef } from 'react-modal-sheet';
+import { Sheet, SheetRef } from 'react-modal-sheet';
 import { useState, useRef } from 'react';
 
 function Example() {
@@ -371,7 +371,7 @@ You can add your own styles or override the default sheet styles via the exposed
 #### CSS-in-JS
 
 ```jsx
-import Sheet from 'react-modal-sheet';
+import { Sheet } from 'react-modal-sheet';
 import styled from 'styled-components';
 import { useState } from 'react';
 
@@ -421,7 +421,7 @@ The example below utilizes React Aria to achieve an accessible modal-like bottom
 > ℹ️ The example was built by following the React Aria's [useDialog](https://react-spectrum.adobe.com/react-aria/useDialog.html) documentation.
 
 ```jsx
-import Sheet from 'react-modal-sheet';
+import { Sheet } from 'react-modal-sheet';
 import { useRef } from 'react';
 import { useOverlayTriggerState } from 'react-stately';
 
diff --git a/example/components/ContentHeight.tsx b/example/components/ContentHeight.tsx
index 34e0bc3..203e6d7 100644
--- a/example/components/ContentHeight.tsx
+++ b/example/components/ContentHeight.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import Sheet, { SheetRef } from 'react-modal-sheet';
+import { Sheet, SheetRef } from 'react-modal-sheet';
 
 import { Button } from './common';
 
@@ -36,7 +36,7 @@ const ContentHeight = () => {
                 {boxes.map((_, i) => (
                   <Box
                     key={i}
-                    onClick={() => setBoxes(prev => [...prev, i + 1])}
+                    onClick={() => setBoxes((prev) => [...prev, i + 1])}
                   >
                     {i} (click to create new boxes )
                   </Box>
diff --git a/example/components/DisableDrag.tsx b/example/components/DisableDrag.tsx
index f89634b..1a51570 100644
--- a/example/components/DisableDrag.tsx
+++ b/example/components/DisableDrag.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import Sheet from 'react-modal-sheet';
+import { Sheet } from 'react-modal-sheet';
 
 import { Button } from './common';
 
diff --git a/example/components/Scrollable.tsx b/example/components/Scrollable.tsx
index a934c58..a315ed9 100644
--- a/example/components/Scrollable.tsx
+++ b/example/components/Scrollable.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import Sheet from 'react-modal-sheet';
+import { Sheet } from 'react-modal-sheet';
 
 import { Button } from './common';
 
diff --git a/example/components/SnapPoints.tsx b/example/components/SnapPoints.tsx
index a7c38de..fd9b012 100644
--- a/example/components/SnapPoints.tsx
+++ b/example/components/SnapPoints.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import Sheet, { SheetRef } from 'react-modal-sheet';
+import { Sheet, SheetRef } from 'react-modal-sheet';
 
 import { Button } from './common';
 import { useMetaThemeColor } from './hooks';
diff --git a/example/components/a11y/A11ySheet.tsx b/example/components/a11y/A11ySheet.tsx
index e9cadfa..735affd 100644
--- a/example/components/a11y/A11ySheet.tsx
+++ b/example/components/a11y/A11ySheet.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { OverlayTriggerState } from 'react-stately';
-import Sheet from 'react-modal-sheet';
+import { Sheet } from 'react-modal-sheet';
 
 import {
   FocusScope,
diff --git a/example/components/apple-music/index.tsx b/example/components/apple-music/index.tsx
index 8fdb678..946363d 100644
--- a/example/components/apple-music/index.tsx
+++ b/example/components/apple-music/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import Sheet from 'react-modal-sheet';
+import { Sheet } from 'react-modal-sheet';
 
 import { useMetaThemeColor } from '../hooks';
 import { album } from './data';
diff --git a/example/components/slack-message/NewMessageContent.tsx b/example/components/slack-message/NewMessageContent.tsx
index ac58c80..bd7d0fd 100644
--- a/example/components/slack-message/NewMessageContent.tsx
+++ b/example/components/slack-message/NewMessageContent.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import Sheet from 'react-modal-sheet';
+import { Sheet } from 'react-modal-sheet';
 
 const people = [
   'john',
diff --git a/example/components/slack-message/index.tsx b/example/components/slack-message/index.tsx
index a64a913..78e69d2 100644
--- a/example/components/slack-message/index.tsx
+++ b/example/components/slack-message/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { FiEdit as MessageIcon, FiSearch as SearchIcon } from 'react-icons/fi';
 import { useOverlayTriggerState } from 'react-stately';
-import Sheet from 'react-modal-sheet';
+import { Sheet } from 'react-modal-sheet';
 
 import {
   useOverlay,
diff --git a/src/index.tsx b/src/index.tsx
index 823e26e..acde621 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,6 +1,6 @@
 import { type MotionValue } from 'framer-motion';
 
-import Sheet from './sheet';
+import _Sheet from './sheet';
 import SheetContainer from './SheetContainer';
 import SheetContent from './SheetContent';
 import SheetHeader from './SheetHeader';
@@ -14,11 +14,11 @@ export interface SheetRef {
 }
 
 // HACK: this is needed to get the typing to work properly...
-const _SheetCompound: any = Sheet;
+const _SheetCompound: any = _Sheet;
 _SheetCompound.Container = SheetContainer;
 _SheetCompound.Header = SheetHeader;
 _SheetCompound.Content = SheetContent;
 _SheetCompound.Backdrop = SheetBackdrop;
 _SheetCompound.Scroller = SheetScroller;
 
-export default _SheetCompound as SheetCompound;
+export const Sheet = _SheetCompound as SheetCompound;