diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index d20911d..d78693b 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @openui-org/react
 
+## 0.13.0
+
+### Minor Changes
+
+- Add new component Sheet
+
 ## 0.12.1
 
 ### Patch Changes
diff --git a/packages/react/package.json b/packages/react/package.json
index cb10b59..beffddc 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@openui-org/react",
   "type": "module",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "description": "Open UI. A modern design system built with Shadcn UI and Tailwindcss",
   "author": "",
   "license": "MIT",
diff --git a/packages/theme/README.md b/packages/theme/README.md
new file mode 100644
index 0000000..44c22c6
--- /dev/null
+++ b/packages/theme/README.md
@@ -0,0 +1,3 @@
+# @openui-org/theme
+
+The theme official of Open UI
diff --git a/packages/theme/src/colors/dark.ts b/packages/theme/src/colors/dark.ts
deleted file mode 100644
index ac50d39..0000000
--- a/packages/theme/src/colors/dark.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export const dark = {
-  50: 'hsl(var(--dark-50))',
-  100: 'hsl(var(--dark-100))',
-  200: 'hsl(var(--dark-200))',
-  300: 'hsl(var(--dark-300))',
-  400: 'hsl(var(--dark-400))',
-  500: 'hsl(var(--dark-500))',
-  600: 'hsl(var(--dark-600))',
-  700: 'hsl(var(--dark-700))',
-  800: 'hsl(var(--dark-800))',
-  900: 'hsl(var(--dark-900))',
-}
diff --git a/packages/theme/src/colors/error.ts b/packages/theme/src/colors/error.ts
deleted file mode 100644
index 0759b04..0000000
--- a/packages/theme/src/colors/error.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export const error = {
-  50: 'hsl(var(--error-50))',
-  100: 'hsl(var(--error-100))',
-  200: 'hsl(var(--error-200))',
-  300: 'hsl(var(--error-300))',
-  400: 'hsl(var(--error-400))',
-  500: 'hsl(var(--error-500))',
-  600: 'hsl(var(--error-600))',
-  700: 'hsl(var(--error-700))',
-  800: 'hsl(var(--error-800))',
-  900: 'hsl(var(--error-900))',
-}
diff --git a/packages/theme/src/colors/index.ts b/packages/theme/src/colors/index.ts
deleted file mode 100644
index 91fda1c..0000000
--- a/packages/theme/src/colors/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export * from './success'
-export * from './primary'
-export * from './secondary'
-export * from './error'
-export * from './warn'
-export * from './dark'
diff --git a/packages/theme/src/colors/primary.ts b/packages/theme/src/colors/primary.ts
deleted file mode 100644
index 3144a13..0000000
--- a/packages/theme/src/colors/primary.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export const primary = {
-  50: 'hsl(var(--primary-50))',
-  100: 'hsl(var(--primary-100))',
-  200: 'hsl(var(--primary-200))',
-  300: 'hsl(var(--primary-300))',
-  400: 'hsl(var(--primary-400))',
-  500: 'hsl(var(--primary-500))',
-  600: 'hsl(var(--primary-600))',
-  700: 'hsl(var(--primary-700))',
-  800: 'hsl(var(--primary-800))',
-  900: 'hsl(var(--primary-900))',
-}
diff --git a/packages/theme/src/colors/secondary.ts b/packages/theme/src/colors/secondary.ts
deleted file mode 100644
index 84addcd..0000000
--- a/packages/theme/src/colors/secondary.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export const secondary = {
-  50: 'hsl(var(--secondary-50))',
-  100: 'hsl(var(--secondary-100))',
-  200: 'hsl(var(--secondary-200))',
-  300: 'hsl(var(--secondary-300))',
-  400: 'hsl(var(--secondary-400))',
-  500: 'hsl(var(--secondary-500))',
-  600: 'hsl(var(--secondary-600))',
-  700: 'hsl(var(--secondary-700))',
-  800: 'hsl(var(--secondary-800))',
-  900: 'hsl(var(--secondary-900))',
-}
diff --git a/packages/theme/src/colors/success.ts b/packages/theme/src/colors/success.ts
deleted file mode 100644
index e1ec104..0000000
--- a/packages/theme/src/colors/success.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export const success = {
-  50: 'hsl(var(--success-50))',
-  100: 'hsl(var(--success-100))',
-  200: 'hsl(var(--success-200))',
-  300: 'hsl(var(--success-300))',
-  400: 'hsl(var(--success-400))',
-  500: 'hsl(var(--success-500))',
-  600: 'hsl(var(--success-600))',
-  700: 'hsl(var(--success-700))',
-  800: 'hsl(var(--success-800))',
-  900: 'hsl(var(--success-900))',
-}
diff --git a/packages/theme/src/colors/warn.ts b/packages/theme/src/colors/warn.ts
deleted file mode 100644
index d12899b..0000000
--- a/packages/theme/src/colors/warn.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export const warn = {
-  50: 'hsl(var(--warn-50))',
-  100: 'hsl(var(--warn-100))',
-  200: 'hsl(var(--warn-200))',
-  300: 'hsl(var(--warn-300))',
-  400: 'hsl(var(--warn-400))',
-  500: 'hsl(var(--warn-500))',
-  600: 'hsl(var(--warn-600))',
-  700: 'hsl(var(--warn-700))',
-  800: 'hsl(var(--warn-800))',
-  900: 'hsl(var(--warn-900))',
-}
diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts
index f24e08d..0a192dc 100644
--- a/packages/theme/src/index.ts
+++ b/packages/theme/src/index.ts
@@ -1,3 +1,2 @@
-export * from './colors'
 export * from './shadcn-ui'
 export * from './tailwindcss'
diff --git a/packages/theme/src/shadcn-ui.ts b/packages/theme/src/shadcn-ui.ts
index b33cdce..4e93d3a 100644
--- a/packages/theme/src/shadcn-ui.ts
+++ b/packages/theme/src/shadcn-ui.ts
@@ -1,80 +1,21 @@
 export const cssBase = {
-  '*': {
-    'font-family': 'var(--font-archivo)',
-  },
   ':root': {
     /* Colors */
-    /* -- Color success -- */
-    '--success-50': '140 92 95',
-    '--success-100': '141 88 84',
-    '--success-200': '141 89 76',
-    '--success-300': '141 89 65',
-    '--success-400': '141 89 58',
-    '--success-500': '141 100 47',
-    '--success-600': '141 100 43',
-    '--success-700': '141 100 33',
-    '--success-800': '141 100 26',
-    '--success-900': '141 100 20',
-
-    /* -- Color primary */
-    '--primary-50': '64 92 95',
-    '--primary-100': '64 88 84',
-    '--primary-200': '64 89 76',
-    '--primary-300': '64 89 65',
-    '--primary-400': '64 89 58',
-    '--primary-500': '64 100 47',
-    '--primary-600': '64 100 43',
-    '--primary-700': '64 100 33',
-    '--primary-800': '64 100 26',
-    '--primary-900': '64 100 20',
-
-    /* -- Color secondary */
-    '--secondary-50': '204 100 97',
-    '--secondary-100': '204 94 94',
-    '--secondary-200': '201 94 86',
-    '--secondary-300': '199 95 74',
-    '--secondary-400': '198 93 60',
-    '--secondary-500': '199 89 48',
-    '--secondary-600': '201 96 32',
-    '--secondary-700': '201 90 27',
-    '--secondary-800': '202 80 24',
-    '--secondary-900': '204 80 16',
-
-    /* -- Color danger */
-    '--error-50': '0 92 95',
-    '--error-100': '0 88 84',
-    '--error-200': '0 89 76',
-    '--error-300': '0 89 65',
-    '--error-400': '0 89 58',
-    '--error-500': '0 100 47',
-    '--error-600': '0 100 43',
-    '--error-700': '0 100 33',
-    '--error-800': '0 100 26',
-    '--error-900': '0 100 20',
-
-    /* -- Color warn */
-    '--warn-50': '35 92 95',
-    '--warn-100': '35 88 84',
-    '--warn-200': '35 89 76',
-    '--warn-300': '35 89 65',
-    '--warn-400': '35 89 58',
-    '--warn-500': '35 100 47',
-    '--warn-600': '35 100 43',
-    '--warn-700': '35 100 33',
-    '--warn-800': '35 100 26',
-    '--warn-900': '35 100 20',
-
-    /* -- Color dark */
-    '--dark-50': '180 19 89',
-    '--dark-100': '180 10 80',
-    '--dark-200': '180 7 70',
-    '--dark-300': '180 7 70',
-    '--dark-400': '180 4 45',
-    '--dark-500': '180 6 37',
-    '--dark-600': '180 8 25',
-    '--dark-700': '180 10 20',
-    '--dark-800': '180 13 6',
-    '--dark-900': '200 100 1',
+    '--background': '0 0% 100%',
+    '--foreground': '222.2 47.4% 11.2%',
+    '--muted': '210 40% 96.1%',
+    '--muted-foreground': '215.4 16.3% 46.9%',
+    '--card': '0 0% 100%',
+    '--card-foreground': '222.2 47.4% 11.2%',
+    '--popover': '0 0% 100%',
+    '--popover-foreground': '222.2 47.4% 11.2%',
+    '--border': '214.3 31.8% 91.4%',
+    '--input': '214.3 31.8% 91.4%',
+    '--primary': '222.2 47.4% 11.2%',
+    '--primary-foreground': '210 40% 98%',
+    '--ring': '215 20.2% 65.1%',
+    '--error': '0 100% 50%',
+    '--error-foreground': '210 40% 98%',
 
     /* Box Sahdow */
     '--shadow-sm': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
@@ -92,8 +33,5 @@ export const cssBase = {
     '--radius-md': '0.75rem',
     '--radius-lg': '0.875rem',
     '--radius-full': '50%',
-
-    /** Font family */
-    '--font-archivo': '"Archivo", sans-serif',
   },
 }
diff --git a/packages/theme/src/tailwindcss.ts b/packages/theme/src/tailwindcss.ts
index e4dfb13..9bd0655 100644
--- a/packages/theme/src/tailwindcss.ts
+++ b/packages/theme/src/tailwindcss.ts
@@ -1,6 +1,4 @@
 import type { Config } from 'tailwindcss'
-import { fontFamily } from 'tailwindcss/defaultTheme'
-import { dark, error, primary, secondary, success, warn } from './colors'
 import { boxShadow } from './box-shadows'
 import { borderRadius } from './radius'
 import { container } from './screens'
@@ -12,18 +10,42 @@ export const config: Config = {
     container,
     extend: {
       colors: {
-        success,
-        primary,
-        secondary,
-        warn,
-        dark,
-        error,
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        error: {
+          DEFAULT: 'hsl(var(--error))',
+          foreground: 'hsl(var(--error-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
       },
       boxShadow,
       borderRadius,
-      fontFamily: {
-        archivo: ['var(--font-archivo)', ...fontFamily.sans],
-      },
       keyframes: {
         'accordion-down': {
           from: { height: '0' },