diff --git a/packages/smarthr-ui/src/smarthr-ui-preset.ts b/packages/smarthr-ui/src/smarthr-ui-preset.ts
index 88c4cbba4c..ac4ee0a65e 100644
--- a/packages/smarthr-ui/src/smarthr-ui-preset.ts
+++ b/packages/smarthr-ui/src/smarthr-ui-preset.ts
@@ -2,6 +2,7 @@ import { darken } from 'polished'
 import { defaultConfig } from 'tailwind-variants'
 import plugin from 'tailwindcss/plugin'
 
+import { defaultBreakpoint } from './themes/createBreakpoint'
 import { defaultColor } from './themes/createColor'
 import { defaultFontSize, defaultHtmlFontSize } from './themes/createFontSize'
 import { defaultShadow } from './themes/createShadow'
@@ -153,6 +154,9 @@ export default {
     outlineColor: {
       DEFAULT: defaultColor.OUTLINE,
     },
+    screens: Object.fromEntries(
+      Object.entries(defaultBreakpoint).map(([key, value]) => [key, { max: `${value}px` }]),
+    ),
     spacing: {
       px: '1px',
       em: '1em',