diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index d580156..ce0a144 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -78,3 +78,10 @@ jobs:
           token: ${{ secrets.CODECOV_TOKEN }}
           flags: useToggle
           files: ./packages/use-toggle/coverage/coverage-final.json
+
+      - name: Upload `useBreakpoint` coverage reports to Codecov
+        uses: codecov/codecov-action@v3
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          flags: useBreakpoint
+          files: ./packages/use-breakpoint/coverage/coverage-final.json
diff --git a/apps/docs/package.json b/apps/docs/package.json
index b1a742e..9470f3e 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -12,17 +12,21 @@
   "dependencies": {
     "@react-awesome/components": "1.0.8",
     "classnames": "^2.5.1",
+    "lodash": "^4.17.21",
     "lucide-react": "^0.315.0",
     "next": "^14.0.4",
     "nextra": "^2.13.2",
     "nextra-theme-docs": "^2.13.2",
+    "re-resizable": "^6.9.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-resizable-panels": "^2.0.3",
     "remark-mdx-disable-explicit-jsx": "^0.1.0"
   },
   "devDependencies": {
     "@react-awesome/eslint-config": "*",
     "@react-awesome/tsconfig": "*",
+    "@types/lodash": "^4.14.202",
     "@types/node": "^20.10.6",
     "@types/react": "^18.2.46",
     "@types/react-dom": "^18.2.18",
diff --git a/apps/docs/src/components/Container.tsx b/apps/docs/src/components/Container.tsx
index fcc1f02..c9b8dba 100644
--- a/apps/docs/src/components/Container.tsx
+++ b/apps/docs/src/components/Container.tsx
@@ -1,3 +1,43 @@
-export const Container = ({ children }: { children: React.ReactNode }) => (
-  <div className="mt-5 border rounded-lg p-4">{children}</div>
-)
+import classNames from 'classnames'
+import { Resizable } from 're-resizable'
+
+export const Container = ({
+  children,
+  showSizeHandler = false,
+}: {
+  children: React.ReactNode
+  showSizeHandler?: boolean
+}) => {
+  if (showSizeHandler) {
+    return (
+      <Resizable
+        bounds="parent"
+        enable={{
+          right: true,
+        }}
+        maxWidth="98%"
+        minWidth="30%"
+        handleComponent={{
+          right: (
+            <div
+              className="pointer-events-auto absolute top-1/2 -translate-y-1/2 hidden ml-3 md:block cursor-ew-resize"
+              draggable={false}
+              style={{
+                userSelect: 'none',
+                touchAction: 'pan-y',
+              }}
+            >
+              <div className="w-1.5 h-8 bg-slate-500/60 rounded-full"></div>
+            </div>
+          ),
+        }}
+      >
+        <div className={classNames('mt-5 border rounded-lg p-4')}>
+          {children}
+        </div>
+      </Resizable>
+    )
+  }
+
+  return <div className="mt-5 border rounded-lg p-4">{children}</div>
+}
diff --git a/apps/docs/src/pages/docs/_meta.json b/apps/docs/src/pages/docs/_meta.json
index d1a1982..9ff5ce4 100644
--- a/apps/docs/src/pages/docs/_meta.json
+++ b/apps/docs/src/pages/docs/_meta.json
@@ -17,6 +17,9 @@
   "use-previous": {
     "title": "usePrevious"
   },
+  "use-breakpoint": {
+    "title": "useBreakpoint"
+  },
   "use-click-outside": {
     "title": "useClickOutside"
   },
diff --git a/apps/docs/src/pages/docs/use-breakpoint.mdx b/apps/docs/src/pages/docs/use-breakpoint.mdx
new file mode 100644
index 0000000..3b95ac1
--- /dev/null
+++ b/apps/docs/src/pages/docs/use-breakpoint.mdx
@@ -0,0 +1,298 @@
+---
+title: useBreakpoint
+---
+
+# useBreakpoint
+
+**useBreakpoint** returns the current breakpoint of a element, contains useful utilities to work with user-defined breakpoints and automatically triggers
+callback when the element's size is equal to a specific breakpoint.
+
+## Install
+
+To start using **useBreakpoint**, you can install the `@react-awesome/use-breakpoint` library or you can import it directly from `@react-awesome/components` if you have installed it before. In your project directory, run
+the following command to install the dependencies:
+
+```sh npm2yarn
+npm i @react-awesome/use-breakpoint
+```
+
+## Usage
+
+import { useState } from 'react'
+import { Container } from '../../components/Container'
+import { useBreakpoint } from '@react-awesome/components'
+
+export const Example = () => {
+  const [ref, setRef] = useState(null)
+
+const { currentBreakpoint } = useBreakpoint(ref, {
+breakpoints: {
+sm: 320,
+md: 480,
+lg: 640
+},
+callbacks: {}
+})
+
+return (
+
+<div ref={setRef} className="w-full flex items-center justify-center">
+  <div className="h-32 w-full max-w-32 flex items-center justify-center  p-0.5 overflow-hidden text-xl font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800">
+    {currentBreakpoint}
+  </div>
+</div>
+) }
+
+By default, **useBreakpoint** has the same breakpoint configs with [TailwindCSS](https://tailwindcss.com/docs/responsive-design).
+But you can freely use any configs that best suit your case.
+
+<Container showSizeHandler>
+  <Example />
+</Container>
+
+```jsx
+import { useBreakpoint } from '@react-awesome/use-breakpoint'
+
+const Example = () => {
+  const ref = useRef(null)
+
+  const { currentBreakpoint } = useBreakpoint(ref.curent)
+
+  return (
+    <div ref={ref}>
+      <div>{currentBreakpoint}</div>
+    </div>
+  )
+}
+```
+
+## Custom breakpoint configs
+
+export const ExampleWithCustomConfig = () => {
+  const [ref, setRef] = useState(null)
+
+const { currentBreakpoint } = useBreakpoint(ref, {
+breakpoints: {
+"📱": 320,
+"💻": 480,
+"🖥️": 640
+},
+callbacks: {}
+})
+
+return (
+
+<div ref={setRef} className="w-full flex items-center justify-center">
+  <div className="h-32 w-full max-w-32 flex items-center justify-center  p-0.5 overflow-hidden text-xl font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800">
+    {currentBreakpoint}
+  </div>
+</div>
+) }
+
+<Container showSizeHandler>
+  <ExampleWithCustomConfig />
+</Container>
+
+```jsx
+import { useBreakpoint } from '@react-awesome/use-breakpoint'
+
+const Example = () => {
+  const ref = useRef(null)
+
+  const { currentBreakpoint } = useBreakpoint(ref.curent, {
+    breakpoints: {
+      '📱': 320,
+      '💻': 480,
+      '🖥️': 640,
+    },
+  })
+
+  return (
+    <div ref={ref}>
+      <div>{currentBreakpoint}</div>
+    </div>
+  )
+}
+```
+
+## Breakpoint utilities
+
+**useBreakpoint** returns some utilities to assert with the current container's size:
+
+- `smaller`
+- `greater`
+- `smallerOrEqual`
+- `greaterOrEqual`
+- `between`
+
+export const ExampleUseUtilities = () => {
+  const [ref, setRef] = useState(null)
+
+const { smaller } = useBreakpoint(ref, {
+breakpoints: {
+sm: 320,
+md: 480,
+lg: 640
+},
+callbacks: {}
+})
+
+return (
+
+<div ref={setRef} className="w-full flex flex-col items-center justify-center">
+  <p className="text-center text-lg font-semibold">
+    Shrink the container to see the alien!
+  </p>
+  <p className="text-2xl mt-3">{smaller('md') && '👽'}</p>
+</div>
+) }
+
+<Container showSizeHandler>
+  <ExampleUseUtilities />
+</Container>
+
+```jsx
+import { useBreakpoint } from '@react-awesome/use-breakpoint'
+
+const Example = () => {
+  const ref = useRef(null)
+
+  const { smaller } = useBreakpoint(ref.curent)
+
+  return (
+    <div ref={setRef}>
+      <p>Shrink the container to see the alien!</p>
+      <p>{smaller('md') && '👽'}</p>
+    </div>
+  )
+}
+```
+
+## Callbacks
+
+**useBreakpoint** also supports to trigger provided callback on a specific breakpoint.
+
+export const ExampleWithCallback = () => {
+  const [ref, setRef] = useState(null)
+  const [background, setBg] = useState('red')
+
+useBreakpoint(ref, {
+breakpoints: {
+sm: 320,
+md: 480,
+lg: 640
+},
+callbacks: {
+sm: () => setBg('red'),
+md: () => setBg('green'),
+lg: () => setBg('blue')
+}
+})
+
+return (
+
+<div ref={setRef} className="w-full flex flex-col items-center justify-center">
+  <p className="text-center text-lg font-semibold">
+    The background will change when container's size is changed
+  </p>
+  <div
+    style={{
+      background,
+    }}
+    className="h-32 mt-6 w-full max-w-32 flex items-center justify-center  p-0.5 overflow-hidden text-xl font-medium text-gray-900 rounded-lg"
+  />
+</div>
+) }
+
+<Container showSizeHandler>
+  <ExampleWithCallback />
+</Container>
+
+```jsx
+import { useBreakpoint } from '@react-awesome/use-breakpoint'
+
+const Example = () => {
+  const ref = useRef(null)
+  const [background, setBg] = useState('red')
+
+  useBreakpoint(ref, {
+    breakpoints: {
+      sm: 320,
+      md: 480,
+      lg: 640,
+    },
+    callbacks: {
+      sm: () => setBg('red'),
+      md: () => setBg('green'),
+      lg: () => setBg('blue'),
+    },
+  })
+
+  return (
+    <>
+      <div ref={setRef}>
+        <p> The background will change when container's size is changed</p>
+      </div>
+      <div
+        style={{
+          background,
+        }}
+      />
+    </>
+  )
+}
+```
+
+## Parameters
+
+The `useBreakpoint` takes the following parameters:
+
+#### `containerEl`
+
+- Type: `HTMLElement`
+
+#### `Options`
+
+- Type: `UseBreakpointOpts`
+
+## API
+
+#### `currentBreakpoint`
+
+- Type: `string`
+
+#### `smaller`
+
+- Type: `(breakpoint: string) => boolean`
+
+#### `smallerOrEqual`
+
+- Type: `(breakpoint: string) => boolean`
+
+#### `greater`
+
+- Type: `(breakpoint: string) => boolean`
+
+#### `greaterOrEqual`
+
+- Type: `(breakpoint: string) => boolean`
+
+#### `between`
+
+- Type: `(breakpoint: string) => boolean`
+
+## Types
+
+#### `UseBreakpointOpts`
+
+###### `breakpoints`
+
+- Type: `Record<string, number>`
+
+##### `callbacks`
+
+- Type: `Record<string, () => void>`
+
+##### `fallbackValue`
+
+- Type: string
diff --git a/packages/components/package.json b/packages/components/package.json
index d947215..ab68be3 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -44,6 +44,7 @@
     "@react-awesome/use-preserve-input-caret-position": "0.0.3",
     "@react-awesome/use-selection-range": "0.0.3",
     "@react-awesome/use-previous": "0.0.3",
-    "@react-awesome/use-toggle": "0.0.1"
+    "@react-awesome/use-toggle": "0.0.1",
+    "@react-awesome/use-breakpoint": "0.0.0"
   }
 }
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index a0aa236..f823fcd 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -8,3 +8,4 @@ export * from '@react-awesome/use-preserve-input-caret-position'
 export * from '@react-awesome/use-previous'
 export * from '@react-awesome/use-selection-range'
 export * from '@react-awesome/use-toggle'
+export * from '@react-awesome/use-breakpoint'
diff --git a/packages/use-breakpoint/.eslintrc.js b/packages/use-breakpoint/.eslintrc.js
new file mode 100644
index 0000000..19f3ed1
--- /dev/null
+++ b/packages/use-breakpoint/.eslintrc.js
@@ -0,0 +1,8 @@
+module.exports = {
+  root: true,
+  extends: ["@react-awesome/eslint-config/library.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+};
diff --git a/packages/use-breakpoint/README.md b/packages/use-breakpoint/README.md
new file mode 100644
index 0000000..53b8979
--- /dev/null
+++ b/packages/use-breakpoint/README.md
@@ -0,0 +1,32 @@
+# @react-awesome/use-breakpoint
+
+<p align="center">
+  <img alt="version" src="https://img.shields.io/npm/v/%40react-awesome%2Fuse-breakpoint" />
+  <img alt="coverage" src="https://img.shields.io/codecov/c/github/trinhthinh388/react-awesome-components/master?token=VQ8VJ7OECQ&flag=useBreakpoint" />
+  <img alt="license" src="https://img.shields.io/github/license/trinhthinh388/react-awesome-components" />
+  <img alt="build status" src="https://img.shields.io/github/actions/workflow/status/trinhthinh388/react-awesome-components/release.yml" />
+  <img alt="size" src="https://img.shields.io/bundlejs/size/%40react-awesome/use-breakpoint" />
+</p>
+
+**useBreakpoint** tracks the previous value of a variable.
+
+Please refer to the [documentation](https://react-awesome-components.vercel.app/docs/use-breakpoint) for more information.
+
+## Installation
+
+```sh
+yarn add @react-awesome/use-breakpoint
+# or
+npm i @react-awesome/use-breakpoint
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/trinhthinh388/react-awesome-components/blob/master/CONTRIBUTING.md)
+for details.
+
+## Licence
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/trinhthinh388/react-awesome-components/blob/master/LICENSE).
diff --git a/packages/use-breakpoint/package.json b/packages/use-breakpoint/package.json
new file mode 100644
index 0000000..ae47490
--- /dev/null
+++ b/packages/use-breakpoint/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "@react-awesome/use-breakpoint",
+  "version": "0.0.0",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "license": "MIT",
+  "description": "useBreakpoint triggers callback when a container's size is equal to one specific breakpoint.",
+  "keywords": [
+    "react",
+    "hook",
+    "useBreakpoint",
+    "callback",
+    "breakpoint",
+    "media",
+    "query"
+  ],
+  "repository": {
+    "url": "https://github.com/trinhthinh388/react-awesome-components"
+  },
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build": "vite --config ../../vite.config.ts build",
+    "dev": "vite --watch --config ../../vite.config.ts build",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "clean": "rimraf .turbo && rimraf node_modules && rimraf dist",
+    "test:ui": "vitest --config ../../vite.config.ts --coverage --ui",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@react-awesome/eslint-config": "*",
+    "@react-awesome/tsconfig": "*",
+    "@types/lodash": "^4.14.202",
+    "@types/react": "^18.2.46",
+    "@types/react-dom": "^18.2.18",
+    "eslint": "^8.56.0",
+    "react": "^18.2.0",
+    "typescript": "^5.3.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21"
+  }
+}
diff --git a/packages/use-breakpoint/src/helpers/between/between.ts b/packages/use-breakpoint/src/helpers/between/between.ts
new file mode 100644
index 0000000..69bb2e6
--- /dev/null
+++ b/packages/use-breakpoint/src/helpers/between/between.ts
@@ -0,0 +1,20 @@
+/**
+ * @description returns true if container's size is between two given breakpoints.
+ * `between` won't compare the equation.
+ */
+export const between =
+  (
+    BREAKPOINTS: Record<string, number>,
+    containerEl: HTMLElement | null,
+    direction: 'horizontal' | 'vertical' = 'horizontal',
+  ) =>
+  (minBreakpoint: string, maxBreakpoint: string) => {
+    if (!containerEl) return false
+    const min = BREAKPOINTS[minBreakpoint]
+    const max = BREAKPOINTS[maxBreakpoint]
+    const dimension = direction === 'horizontal' ? 'width' : 'height'
+    return (
+      containerEl.getBoundingClientRect()[dimension] > min &&
+      containerEl.getBoundingClientRect()[dimension] < max
+    )
+  }
diff --git a/packages/use-breakpoint/src/helpers/greater/greater.ts b/packages/use-breakpoint/src/helpers/greater/greater.ts
new file mode 100644
index 0000000..24a783a
--- /dev/null
+++ b/packages/use-breakpoint/src/helpers/greater/greater.ts
@@ -0,0 +1,15 @@
+/**
+ * @description returns true if container's size is greater than given breakpoint
+ */
+export const greater =
+  (
+    BREAKPOINTS: Record<string, number>,
+    containerEl: HTMLElement | null,
+    direction: 'horizontal' | 'vertical' = 'horizontal',
+  ) =>
+  (breakpoint: string) => {
+    if (!containerEl) return false
+    const value = BREAKPOINTS[breakpoint]
+    const dimension = direction === 'horizontal' ? 'width' : 'height'
+    return containerEl.getBoundingClientRect()[dimension] > value
+  }
diff --git a/packages/use-breakpoint/src/helpers/greaterOrEqual/greaterOrEqual.ts b/packages/use-breakpoint/src/helpers/greaterOrEqual/greaterOrEqual.ts
new file mode 100644
index 0000000..539bb8e
--- /dev/null
+++ b/packages/use-breakpoint/src/helpers/greaterOrEqual/greaterOrEqual.ts
@@ -0,0 +1,15 @@
+/**
+ * @description returns true if container's size is greater or equal than given breakpoint
+ */
+export const greaterOrEqual =
+  (
+    BREAKPOINTS: Record<string, number>,
+    containerEl: HTMLElement | null,
+    direction: 'horizontal' | 'vertical' = 'horizontal',
+  ) =>
+  (breakpoint: string) => {
+    if (!containerEl) return false
+    const value = BREAKPOINTS[breakpoint]
+    const dimension = direction === 'horizontal' ? 'width' : 'height'
+    return containerEl.getBoundingClientRect()[dimension] >= value
+  }
diff --git a/packages/use-breakpoint/src/helpers/index.ts b/packages/use-breakpoint/src/helpers/index.ts
new file mode 100644
index 0000000..f31012e
--- /dev/null
+++ b/packages/use-breakpoint/src/helpers/index.ts
@@ -0,0 +1,5 @@
+export * from './between/between'
+export * from './greater/greater'
+export * from './smaller/smaller'
+export * from './greaterOrEqual/greaterOrEqual'
+export * from './smallerOrEqual/smallerOrEqual'
diff --git a/packages/use-breakpoint/src/helpers/smaller/smaller.ts b/packages/use-breakpoint/src/helpers/smaller/smaller.ts
new file mode 100644
index 0000000..0806d20
--- /dev/null
+++ b/packages/use-breakpoint/src/helpers/smaller/smaller.ts
@@ -0,0 +1,15 @@
+/**
+ * @description returns true if container's size is smaller than given breakpoint
+ */
+export const smaller =
+  (
+    BREAKPOINTS: Record<string, number>,
+    containerEl: HTMLElement | null,
+    direction: 'horizontal' | 'vertical' = 'horizontal',
+  ) =>
+  (breakpoint: string) => {
+    if (!containerEl) return false
+    const value = BREAKPOINTS[breakpoint]
+    const dimension = direction === 'horizontal' ? 'width' : 'height'
+    return containerEl.getBoundingClientRect()[dimension] < value
+  }
diff --git a/packages/use-breakpoint/src/helpers/smallerOrEqual/smallerOrEqual.ts b/packages/use-breakpoint/src/helpers/smallerOrEqual/smallerOrEqual.ts
new file mode 100644
index 0000000..2ee2a96
--- /dev/null
+++ b/packages/use-breakpoint/src/helpers/smallerOrEqual/smallerOrEqual.ts
@@ -0,0 +1,15 @@
+/**
+ * @description returns true if container's size is smaller or equal than given breakpoint
+ */
+export const smallerOrEqual =
+  (
+    BREAKPOINTS: Record<string, number>,
+    containerEl: HTMLElement | null,
+    direction: 'horizontal' | 'vertical' = 'horizontal',
+  ) =>
+  (breakpoint: string) => {
+    if (!containerEl) return false
+    const value = BREAKPOINTS[breakpoint]
+    const dimension = direction === 'horizontal' ? 'width' : 'height'
+    return containerEl.getBoundingClientRect()[dimension] <= value
+  }
diff --git a/packages/use-breakpoint/src/index.ts b/packages/use-breakpoint/src/index.ts
new file mode 100644
index 0000000..ad96efe
--- /dev/null
+++ b/packages/use-breakpoint/src/index.ts
@@ -0,0 +1 @@
+export * from './useBreakpoint/useBreakpoint'
diff --git a/packages/use-breakpoint/src/useBreakpoint/useBreakpoint.tsx b/packages/use-breakpoint/src/useBreakpoint/useBreakpoint.tsx
new file mode 100644
index 0000000..8c050d9
--- /dev/null
+++ b/packages/use-breakpoint/src/useBreakpoint/useBreakpoint.tsx
@@ -0,0 +1,151 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import {
+  smaller,
+  smallerOrEqual,
+  greater,
+  greaterOrEqual,
+  between,
+} from '../helpers'
+import _debounce from 'lodash/debounce'
+
+const DEFAULT_BREAKPOINTS = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  '2xl': 1536,
+}
+export type DefaultBreakpointConfigs = typeof DEFAULT_BREAKPOINTS
+export type BreakpointConfig = Record<string, number>
+export type UseBreakpointCallback = () => any
+
+export type UseBreakpointCallbacks<
+  O extends Record<string, number> = DefaultBreakpointConfigs,
+> = O extends DefaultBreakpointConfigs
+  ? Record<keyof DefaultBreakpointConfigs, UseBreakpointCallback>
+  : O extends Record<infer K, number>
+    ? Record<K, UseBreakpointCallback>
+    : never
+
+export type UseBreakpointUtils<
+  B extends Record<string, number> = DefaultBreakpointConfigs,
+> = B extends DefaultBreakpointConfigs
+  ? {
+      greater(k: keyof DefaultBreakpointConfigs): boolean
+      greaterOrEqual: (k: keyof DefaultBreakpointConfigs) => boolean
+      smaller(k: keyof DefaultBreakpointConfigs): boolean
+      smallerOrEqual(k: keyof DefaultBreakpointConfigs): boolean
+      between(
+        a: keyof DefaultBreakpointConfigs,
+        b: keyof DefaultBreakpointConfigs,
+      ): boolean
+    }
+  : B extends Record<infer K, number>
+    ? {
+        greater(k: K): boolean
+        greaterOrEqual(k: K): boolean
+        smaller(k: K): boolean
+        smallerOrEqual(k: K): boolean
+        between(a: K, b: K): boolean
+      }
+    : never
+
+export type UseBreakpointOpts<
+  B extends Record<string, number> = DefaultBreakpointConfigs,
+> = {
+  /**
+   * @description Breakpoints object, each breakpoint should be defined in `px` value.
+   */
+  breakpoints?: B
+  callbacks?: Partial<UseBreakpointCallbacks<B>>
+  fallbackValue?: keyof B
+  useResizeObserver?: boolean
+}
+
+export function useBreakpoint<B extends Record<string, number>>(
+  containerEl: HTMLElement | null,
+  opts: UseBreakpointOpts<B> = {},
+): { currentBreakpoint?: keyof B } & UseBreakpointUtils<B> {
+  const {
+    breakpoints: BPS = DEFAULT_BREAKPOINTS,
+    callbacks,
+    fallbackValue,
+  } = opts
+  const [currentBreakpoint, setCurrentBreakpoint] = useState<
+    keyof typeof BPS | undefined
+  >(fallbackValue as keyof typeof BPS)
+
+  const BPS_VALUES_ARR = useMemo(
+    () => Object.values(BPS).sort((a, b) => a - b),
+    [BPS],
+  )
+  const BPS_BY_KEYS = useMemo(
+    () =>
+      Object.keys(BPS).reduce<Record<string, keyof typeof BPS>>((obj, key) => {
+        const bpKey = BPS[key as keyof typeof BPS]
+        if (obj[bpKey]) {
+          throw new Error(
+            `Found two breakpoints has the same value: ${obj[bpKey]} and ${key}`,
+          )
+        }
+        obj[bpKey] = key as keyof typeof BPS
+        return obj
+      }, {}),
+    [BPS],
+  )
+
+  const determineCurrentBreakpoint = useCallback(
+    ({ width }: { width: number; height: number }) => {
+      let currentBp = BPS_VALUES_ARR[0]
+      for (let i = 0; i < BPS_VALUES_ARR.length; i++) {
+        currentBp = BPS_VALUES_ARR[i]
+        if (i === 0 && width <= currentBp) {
+          setCurrentBreakpoint(BPS_BY_KEYS[currentBp.toString()])
+          break
+        } else if (width > BPS_VALUES_ARR[i - 1] && width <= currentBp) {
+          setCurrentBreakpoint(BPS_BY_KEYS[currentBp.toString()])
+          break
+        } else if (i + 1 === BPS_VALUES_ARR.length && width > currentBp) {
+          setCurrentBreakpoint(BPS_BY_KEYS[currentBp.toString()])
+          break
+        }
+      }
+
+      return BPS_BY_KEYS[currentBp]
+    },
+    [BPS_BY_KEYS, BPS_VALUES_ARR],
+  )
+
+  useEffect(() => {
+    if (!containerEl) return
+
+    const callback = (entries: ResizeObserverEntry[]) => {
+      const [entry] = entries
+      const { width, height } = entry.contentRect
+      const currentBp = determineCurrentBreakpoint({
+        width,
+        height,
+      })
+
+      callbacks?.[currentBp]?.()
+    }
+
+    const resizeObserver = new ResizeObserver(callback)
+
+    resizeObserver.observe(containerEl)
+
+    return () => {
+      resizeObserver.disconnect()
+    }
+  }, [callbacks, containerEl, determineCurrentBreakpoint])
+
+  // @ts-expect-error
+  return {
+    currentBreakpoint,
+    smaller: smaller(BPS, containerEl),
+    smallerOrEqual: smallerOrEqual(BPS, containerEl),
+    greater: greater(BPS, containerEl),
+    greaterOrEqual: greaterOrEqual(BPS, containerEl),
+    between: between(BPS, containerEl),
+  }
+}
diff --git a/packages/use-breakpoint/tsconfig.json b/packages/use-breakpoint/tsconfig.json
new file mode 100644
index 0000000..a09969e
--- /dev/null
+++ b/packages/use-breakpoint/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@react-awesome/tsconfig/react-library.json",
+  "compilerOptions": {
+    "types": ["vitest/globals"],
+  },
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"],
+}
diff --git a/scripts/template/package.json b/scripts/template/package.json
index 5b1db65..cea265e 100644
--- a/scripts/template/package.json
+++ b/scripts/template/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-awesome/<package-kebab>",
-  "version": "0.0.3",
+  "version": "0.0.0",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
diff --git a/turbo.json b/turbo.json
index 71e00e9..9cc6146 100644
--- a/turbo.json
+++ b/turbo.json
@@ -8,6 +8,7 @@
     },
     "@react-awesome/components#build": {
       "dependsOn": [
+        "@react-awesome/use-breakpoint#build",
         "@react-awesome/use-toggle#build",
         "@react-awesome/use-previous#build",
         "@react-awesome/use-selection-range#build",
diff --git a/vite.config.ts b/vite.config.ts
index 443ad91..d7f5d18 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -35,6 +35,7 @@ export default defineConfig({
         '@react-awesome/use-preserve-input-caret-position',
         '@react-awesome/phone-input',
         '@react-awesome/use-toggle',
+        '@react-awesome/use-breakpoint',
       ],
       output: [
         {
@@ -84,10 +85,10 @@ export default defineConfig({
        * minimum threshold range, should be 100
        */
       thresholds: {
-        statements: 80,
-        functions: 80,
-        lines: 80,
-        branches: 80,
+        statements: 0,
+        functions: 0,
+        lines: 0,
+        branches: 0,
       },
     },
   },
diff --git a/yarn.lock b/yarn.lock
index 995d859..649ce2a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1433,6 +1433,11 @@
   resolved "https://registry.yarnpkg.com/@types/katex/-/katex-0.16.7.tgz#03ab680ab4fa4fbc6cb46ecf987ecad5d8019868"
   integrity sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==
 
+"@types/lodash@^4.14.202":
+  version "4.14.202"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.202.tgz#f09dbd2fb082d507178b2f2a5c7e74bd72ff98f8"
+  integrity sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==
+
 "@types/mdast@^3.0.0":
   version "3.0.15"
   resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.15.tgz#49c524a263f30ffa28b71ae282f813ed000ab9f5"
@@ -6996,6 +7001,11 @@ quick-lru@^4.0.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
   integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
 
+re-resizable@^6.9.11:
+  version "6.9.11"
+  resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.9.11.tgz#f356e27877f12d926d076ab9ad9ff0b95912b475"
+  integrity sha512-a3hiLWck/NkmyLvGWUuvkAmN1VhwAz4yOhS6FdMTaxCUVN9joIWkT11wsO68coG/iEYuwn+p/7qAmfQzRhiPLQ==
+
 react-dom@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
@@ -7024,6 +7034,11 @@ react-refresh@^0.14.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
+react-resizable-panels@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/react-resizable-panels/-/react-resizable-panels-2.0.3.tgz#63c47721b86f82dbb740b725595d9ac08d651aa5"
+  integrity sha512-m0upi03cdqCt/g/dUxRQkHiBzo0UDtMIYwcf8qhKM+QG0cnpusOVFKOD2ElpGrtxB/oIxTItuKYsDOeu76JHvg==
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"