diff --git a/.changeset/friendly-walls-vanish.md b/.changeset/friendly-walls-vanish.md
new file mode 100644
index 000000000..ffde572ad
--- /dev/null
+++ b/.changeset/friendly-walls-vanish.md
@@ -0,0 +1,42 @@
+---
+'palette-docs': minor
+'website': minor
+'@saas-ui/auth': minor
+'@saas-ui/banner': minor
+'@saas-ui/button': minor
+'@saas-ui/card': minor
+'@saas-ui/clerk': minor
+'@saas-ui/collapse': minor
+'@saas-ui/data-table': minor
+'@saas-ui/forms': minor
+'@saas-ui/hooks': minor
+'@saas-ui/hotkeys': minor
+'@saas-ui/input-right-button': minor
+'@saas-ui/layout': minor
+'@saas-ui/list': minor
+'@saas-ui/menu': minor
+'@saas-ui/modals': minor
+'@saas-ui/nprogress': minor
+'@saas-ui/number-input': minor
+'@saas-ui/palette': minor
+'@saas-ui/password-input': minor
+'@saas-ui/persona': minor
+'@saas-ui/pin-input': minor
+'@saas-ui/property': minor
+'@saas-ui/provider': minor
+'@saas-ui/radio': minor
+'@saas-ui/react': minor
+'@saas-ui/react-utils': minor
+'@saas-ui/search-input': minor
+'@saas-ui/select': minor
+'@saas-ui/snackbar': minor
+'@saas-ui/stepper': minor
+'@saas-ui/system': minor
+'@saas-ui/theme': minor
+'@saas-ui/web3': minor
+'@saas-ui/next-workspaces': minor
+'@saas-ui/props-docs': minor
+'@saas-ui/test-utils': minor
+---
+
+Updated to Chakra UI 2.2.1
diff --git a/.changeset/soft-queens-collect.md b/.changeset/soft-queens-collect.md
new file mode 100644
index 000000000..dac830e22
--- /dev/null
+++ b/.changeset/soft-queens-collect.md
@@ -0,0 +1,40 @@
+---
+'@saas-ui/auth': patch
+'@saas-ui/banner': patch
+'@saas-ui/button': patch
+'@saas-ui/card': patch
+'@saas-ui/clerk': patch
+'@saas-ui/collapse': patch
+'@saas-ui/data-table': patch
+'@saas-ui/forms': patch
+'@saas-ui/hooks': patch
+'@saas-ui/hotkeys': patch
+'@saas-ui/input-right-button': patch
+'@saas-ui/layout': patch
+'@saas-ui/list': patch
+'@saas-ui/menu': patch
+'@saas-ui/modals': patch
+'@saas-ui/nprogress': patch
+'@saas-ui/number-input': patch
+'@saas-ui/palette': patch
+'@saas-ui/password-input': patch
+'@saas-ui/persona': patch
+'@saas-ui/pin-input': patch
+'@saas-ui/property': patch
+'@saas-ui/provider': patch
+'@saas-ui/radio': patch
+'@saas-ui/react': patch
+'@saas-ui/react-utils': patch
+'@saas-ui/search-input': patch
+'@saas-ui/select': patch
+'@saas-ui/snackbar': patch
+'@saas-ui/stepper': patch
+'@saas-ui/system': patch
+'@saas-ui/theme': patch
+'@saas-ui/web3': patch
+'@saas-ui/next-workspaces': patch
+'@saas-ui/props-docs': patch
+'@saas-ui/test-utils': patch
+---
+
+Fixed all theme onconsistencies.
diff --git a/packages/saas-ui-auth/src/components/auth-form.tsx b/packages/saas-ui-auth/src/components/auth-form.tsx
index 0089f57e4..de5b00141 100644
--- a/packages/saas-ui-auth/src/components/auth-form.tsx
+++ b/packages/saas-ui-auth/src/components/auth-form.tsx
@@ -2,13 +2,12 @@ import * as React from 'react'
 
 import {
   chakra,
-  useStyles,
-  StylesProvider,
   HTMLChakraProps,
   ThemingProps,
   omitThemingProps,
   useMultiStyleConfig,
   SystemStyleObject,
+  createStylesContext,
 } from '@chakra-ui/react'
 import { cx, __DEV__ } from '@chakra-ui/utils'
 
@@ -23,6 +22,8 @@ import { AuthTypeEnum, AuthActionEnum } from '../provider'
 import { ForgotPasswordForm } from './forgot-password-form'
 import { UpdatePasswordForm } from './update-password-form'
 
+const [StylesProvider, useStyles] = createStylesContext('AutoForm')
+
 export interface AuthFormProps
   extends Omit<
       FormProps<any>,
diff --git a/packages/saas-ui-banner/src/banner.tsx b/packages/saas-ui-banner/src/banner.tsx
index 1c13fcc48..86fd575c0 100644
--- a/packages/saas-ui-banner/src/banner.tsx
+++ b/packages/saas-ui-banner/src/banner.tsx
@@ -3,13 +3,12 @@ import {
   chakra,
   forwardRef,
   omitThemingProps,
-  StylesProvider,
   SystemStyleObject,
   ThemingProps,
   useMultiStyleConfig,
-  useStyles,
   HTMLChakraProps,
   As,
+  createStylesContext,
 } from '@chakra-ui/system'
 import { callAllHandlers, cx, __DEV__ } from '@chakra-ui/utils'
 import { useId } from '@chakra-ui/hooks'
@@ -28,6 +27,8 @@ import {
   BannerMotion,
 } from './banner-transition'
 
+const [StylesProvider, useStyles] = createStylesContext('Banner')
+
 const STATUSES = {
   info: { icon: InfoIcon, colorScheme: 'blue' },
   warning: { icon: WarningIcon, colorScheme: 'orange' },
diff --git a/packages/saas-ui-card/src/card.tsx b/packages/saas-ui-card/src/card.tsx
index 0585b4e65..cfce3e4e7 100644
--- a/packages/saas-ui-card/src/card.tsx
+++ b/packages/saas-ui-card/src/card.tsx
@@ -4,19 +4,20 @@ import {
   forwardRef,
   HTMLChakraProps,
   ThemingProps,
-  StylesProvider,
-  useStyles,
   omitThemingProps,
   SystemProps,
   SystemStyleObject,
   ThemeTypings,
   useMultiStyleConfig,
+  createStylesContext,
 } from '@chakra-ui/system'
 
 import { cx, __DEV__ } from '@chakra-ui/utils'
 
 import { ButtonGroup, ButtonGroupProps } from '@saas-ui/button'
 
+const [StylesProvider, useStyles] = createStylesContext('Card')
+
 type Variants = 'plain' | 'outline' | 'solid'
 
 interface CardOptions {
diff --git a/packages/saas-ui-data-table/src/data-table.tsx b/packages/saas-ui-data-table/src/data-table.tsx
index a3d663ad8..49fdf6f63 100644
--- a/packages/saas-ui-data-table/src/data-table.tsx
+++ b/packages/saas-ui-data-table/src/data-table.tsx
@@ -21,7 +21,6 @@ import {
   Th,
   Td,
   Checkbox,
-  useStyles,
 } from '@chakra-ui/react'
 
 import { cx, __DEV__ } from '@chakra-ui/utils'
@@ -198,11 +197,8 @@ export const DataTableSort = <Data extends object>(
 ) => {
   const { column, ...rest } = props
 
-  const styles = useStyles()
-
   const sorterStyles = {
     ms: 2,
-    ...styles.sorter,
   }
 
   if (column.id === 'selection') {
diff --git a/packages/saas-ui-forms/src/object-field.tsx b/packages/saas-ui-forms/src/object-field.tsx
index 052867f68..f6149e2fe 100644
--- a/packages/saas-ui-forms/src/object-field.tsx
+++ b/packages/saas-ui-forms/src/object-field.tsx
@@ -4,7 +4,7 @@ import {
   FormLabel,
   FormLabelProps,
   ResponsiveValue,
-  useStyles,
+  useStyleConfig,
 } from '@chakra-ui/react'
 import { __DEV__ } from '@chakra-ui/utils'
 
@@ -21,8 +21,8 @@ export interface ObjectFieldProps extends FieldProps {
 }
 
 export const FormLegend = (props: FormLabelProps) => {
-  const styles = useStyles()
-  return <FormLabel as="legend" sx={styles.legend} {...props} />
+  const styles = useStyleConfig('FormLegend')
+  return <FormLabel as="legend" sx={styles} {...props} />
 }
 
 export const ObjectField: React.FC<ObjectFieldProps> = (props) => {
diff --git a/packages/saas-ui-hotkeys/src/hotkeys.tsx b/packages/saas-ui-hotkeys/src/hotkeys.tsx
index 5a15f36ce..4979cc8b3 100644
--- a/packages/saas-ui-hotkeys/src/hotkeys.tsx
+++ b/packages/saas-ui-hotkeys/src/hotkeys.tsx
@@ -2,13 +2,11 @@ import * as React from 'react'
 import {
   chakra,
   forwardRef,
-  StylesProvider,
-  useStyles,
   HTMLChakraProps,
   ThemingProps,
   omitThemingProps,
   useMultiStyleConfig,
-  SystemStyleObject,
+  createStylesContext,
 } from '@chakra-ui/system'
 import { cx, __DEV__ } from '@chakra-ui/utils'
 import { createContext } from '@chakra-ui/react-utils'
@@ -17,6 +15,8 @@ import { Kbd } from '@chakra-ui/layout'
 
 import { SearchInput } from '@saas-ui/search-input'
 
+const [StylesProvider, useStyles] = createStylesContext('Hotkeys')
+
 const regExpSyntaxCharacter = /[.*+?^${}()|[\]\\]/g
 
 function escapeRegExp(value: string) {
diff --git a/packages/saas-ui-layout/src/empty-state.tsx b/packages/saas-ui-layout/src/empty-state.tsx
index 0179704c9..ec28fc64a 100644
--- a/packages/saas-ui-layout/src/empty-state.tsx
+++ b/packages/saas-ui-layout/src/empty-state.tsx
@@ -7,10 +7,8 @@ import {
   chakra,
   As,
   ThemingProps,
-  StylesProvider,
   omitThemingProps,
   useMultiStyleConfig,
-  useStyles,
   ButtonGroup,
   IconProps,
   SystemProps,
@@ -19,10 +17,13 @@ import {
   HeadingProps,
   TextProps,
   ButtonGroupProps,
+  createStylesContext,
 } from '@chakra-ui/react'
 
 import { cx, __DEV__ } from '@chakra-ui/utils'
 
+const [StylesProvider, useStyles] = createStylesContext('EmptyState')
+
 export interface EmptyStateProps
   extends Omit<EmptyStateContainerProps, 'title'> {
   title?: React.ReactNode
diff --git a/packages/saas-ui-list/src/list.tsx b/packages/saas-ui-list/src/list.tsx
index b145db0c2..004c6ef5d 100644
--- a/packages/saas-ui-list/src/list.tsx
+++ b/packages/saas-ui-list/src/list.tsx
@@ -3,8 +3,6 @@ import * as React from 'react'
 import {
   chakra,
   forwardRef,
-  useStyles,
-  StylesProvider,
   HTMLChakraProps,
   ThemingProps,
   omitThemingProps,
@@ -13,6 +11,7 @@ import {
   As,
   useColorModeValue,
   useMultiStyleConfig,
+  createStylesContext,
 } from '@chakra-ui/system'
 
 import { cx, __DEV__ } from '@chakra-ui/utils'
@@ -21,6 +20,8 @@ import { ButtonGroup, ButtonGroupProps } from '@saas-ui/button'
 
 import { Icon } from '@chakra-ui/icon'
 
+const [StylesProvider, useStyles] = createStylesContext('List')
+
 interface ListOptions {
   /**
    * An array of list items
diff --git a/packages/saas-ui-modals/src/menu.tsx b/packages/saas-ui-modals/src/menu.tsx
index 48a6afc40..70a001612 100644
--- a/packages/saas-ui-modals/src/menu.tsx
+++ b/packages/saas-ui-modals/src/menu.tsx
@@ -3,17 +3,19 @@ import * as React from 'react'
 import {
   ModalFooter,
   chakra,
-  StylesProvider,
-  useStyles,
   forwardRef,
   useMenuContext,
   useMenuList,
+  createStylesContext,
+  useMultiStyleConfig,
 } from '@chakra-ui/react'
 
 import { BaseModal, BaseModalProps } from './modal'
 
 import { Menu, MenuListProps } from '@saas-ui/menu'
 
+const [StylesProvider, useStyles] = createStylesContext('MenuDialog')
+
 export interface MenuDialogProps extends BaseModalProps {
   /**
    * The modal footer, wrapped with `ModalFooter`
@@ -48,7 +50,7 @@ export const MenuDialogList = forwardRef<MenuDialogListProps, 'div'>(
 
     const ownProps = useMenuList(rest, ref)
 
-    const styles = useStyles()
+    const styles = useMultiStyleConfig('Menu', props)
 
     return (
       <BaseModal
diff --git a/packages/saas-ui-persona/src/persona.tsx b/packages/saas-ui-persona/src/persona.tsx
index e26a4958c..c5224560a 100644
--- a/packages/saas-ui-persona/src/persona.tsx
+++ b/packages/saas-ui-persona/src/persona.tsx
@@ -8,8 +8,6 @@ import {
   Tooltip,
   chakra,
   forwardRef,
-  useStyles,
-  StylesProvider,
   HTMLChakraProps,
   ThemingProps,
   SystemStyleObject,
@@ -18,10 +16,13 @@ import {
   useTheme,
   useMultiStyleConfig,
   omitThemingProps,
+  createStylesContext,
 } from '@chakra-ui/react'
 
 import { cx, __DEV__ } from '@chakra-ui/utils'
 
+const [StylesProvider, useStyles] = createStylesContext('Persona')
+
 export interface PresenceOptions {
   [presence: string]: {
     label: string
diff --git a/packages/saas-ui-property/src/property.tsx b/packages/saas-ui-property/src/property.tsx
index 90772c930..39cd44da1 100644
--- a/packages/saas-ui-property/src/property.tsx
+++ b/packages/saas-ui-property/src/property.tsx
@@ -4,20 +4,21 @@ import {
   chakra,
   forwardRef,
   useMultiStyleConfig,
-  useStyles,
   useColorModeValue,
-  StylesProvider,
   HTMLChakraProps,
   ThemingProps,
   SystemProps,
   SystemStyleObject,
   omitThemingProps,
+  createStylesContext,
 } from '@chakra-ui/system'
 
 import { cx, __DEV__ } from '@chakra-ui/utils'
 
 import { List, ListProps } from '@saas-ui/list'
 
+const [StylesProvider, useStyles] = createStylesContext('Property')
+
 interface PropertyOptions {
   label?: React.ReactNode
   value?: React.ReactNode
diff --git a/packages/saas-ui-snackbar/src/use-snackbar.tsx b/packages/saas-ui-snackbar/src/use-snackbar.tsx
index dbccec9f8..b86254b68 100644
--- a/packages/saas-ui-snackbar/src/use-snackbar.tsx
+++ b/packages/saas-ui-snackbar/src/use-snackbar.tsx
@@ -2,7 +2,6 @@ import * as React from 'react'
 
 import {
   chakra,
-  useStyles,
   useTheme,
   useToast,
   UseToastOptions,
@@ -15,16 +14,16 @@ import {
   CloseButton,
   ButtonGroup,
   Spinner,
-  useColorModeValue,
+  useMultiStyleConfig,
 } from '@chakra-ui/react'
 
 const AlertSpinner: React.FC<AlertIconProps> = (props) => {
-  const styles = useStyles()
+  const styles = useMultiStyleConfig('Alert', props)
   return (
     <chakra.span
       display="inherit"
-      {...props}
       alignItems="center"
+      {...props}
       __css={styles.icon}
     >
       <Spinner size="sm" />
diff --git a/packages/saas-ui-stepper/src/stepper.tsx b/packages/saas-ui-stepper/src/stepper.tsx
index 336a62080..72296b59d 100644
--- a/packages/saas-ui-stepper/src/stepper.tsx
+++ b/packages/saas-ui-stepper/src/stepper.tsx
@@ -7,9 +7,8 @@ import {
   HTMLChakraProps,
   ThemingProps,
   omitThemingProps,
-  useStyles,
-  StylesProvider,
   SystemStyleObject,
+  createStylesContext,
 } from '@chakra-ui/system'
 
 import { CheckIcon, Icon } from '@chakra-ui/icons'
@@ -26,6 +25,8 @@ import {
   UseStepperProps,
 } from './use-stepper'
 
+const [StylesProvider, useStyles] = createStylesContext('Stepper')
+
 export interface StepperProps
   extends UseStepperProps,
     HTMLChakraProps<'div'>,
diff --git a/packages/saas-ui-theme/src/base/components/form-legend.ts b/packages/saas-ui-theme/src/base/components/form-legend.ts
new file mode 100644
index 000000000..93802329e
--- /dev/null
+++ b/packages/saas-ui-theme/src/base/components/form-legend.ts
@@ -0,0 +1,6 @@
+export default {
+  baseStyle: {
+    fontWeight: 'semibold',
+    mb: 4,
+  },
+}
diff --git a/packages/saas-ui-theme/src/base/components/form.ts b/packages/saas-ui-theme/src/base/components/form.ts
index 9b48107ab..5775aea39 100644
--- a/packages/saas-ui-theme/src/base/components/form.ts
+++ b/packages/saas-ui-theme/src/base/components/form.ts
@@ -1,10 +1,4 @@
 export default {
-  baseStyle: {
-    legend: {
-      fontWeight: 'semibold',
-      mb: 4,
-    },
-  },
   variants: {
     horizontal: {
       container: {
diff --git a/packages/saas-ui-theme/src/base/components/index.ts b/packages/saas-ui-theme/src/base/components/index.ts
index afa1e5e75..23a9fb5e0 100644
--- a/packages/saas-ui-theme/src/base/components/index.ts
+++ b/packages/saas-ui-theme/src/base/components/index.ts
@@ -3,6 +3,7 @@ import Card from './card'
 import EmptyState from './empty-state'
 import FormLayout from './form-layout'
 import Form from './form'
+import FormLegend from './form'
 import Hotkeys from './hotkeys'
 import List from './list'
 import Loader from './loader'
@@ -17,6 +18,7 @@ export default {
   EmptyState,
   FormLayout,
   Form,
+  FormLegend,
   Hotkeys,
   List,
   Loader,
diff --git a/packages/saas-ui-theme/src/saas-ui/components/checkbox.ts b/packages/saas-ui-theme/src/saas-ui/components/checkbox.ts
new file mode 100644
index 000000000..25e6c8a50
--- /dev/null
+++ b/packages/saas-ui-theme/src/saas-ui/components/checkbox.ts
@@ -0,0 +1,16 @@
+import { StyleFunctionProps } from '@chakra-ui/theme-tools'
+
+export default {
+  baseStyle: (props: StyleFunctionProps) => {
+    const { colorScheme } = props
+    return {
+      control: {
+        _checked: {
+          borderColor: `${colorScheme}.500`,
+          bg: `${colorScheme}.500`,
+          color: 'white',
+        },
+      },
+    }
+  },
+}
diff --git a/packages/saas-ui-theme/src/saas-ui/components/index.ts b/packages/saas-ui-theme/src/saas-ui/components/index.ts
index 35dd2c74f..d32e5a039 100644
--- a/packages/saas-ui-theme/src/saas-ui/components/index.ts
+++ b/packages/saas-ui-theme/src/saas-ui/components/index.ts
@@ -1,6 +1,7 @@
 import Alert from './alert'
 import Button from './button'
 import Card from './card'
+import Checkbox from './checkbox'
 import CloseButton from './close-button'
 import EmptyState from './empty-state'
 import Form from './form'
@@ -14,12 +15,16 @@ import Progress from './progress'
 import Property from './property'
 import Toaster from './toaster'
 import Text from './text'
+import Radio from './radio'
 import Stepper from './stepper'
+import Slider from './slider'
+import Switch from './switch'
 
 export default {
   Alert,
   Button,
   Card,
+  Checkbox,
   CloseButton,
   EmptyState,
   Heading,
@@ -32,6 +37,9 @@ export default {
   Property,
   Toaster,
   Text,
+  Radio,
+  Slider,
   Stepper,
+  Switch,
   ...Form,
 }
diff --git a/packages/saas-ui-theme/src/saas-ui/components/progress.ts b/packages/saas-ui-theme/src/saas-ui/components/progress.ts
index 6e2b5e9aa..76c1e36d8 100644
--- a/packages/saas-ui-theme/src/saas-ui/components/progress.ts
+++ b/packages/saas-ui-theme/src/saas-ui/components/progress.ts
@@ -1,7 +1,18 @@
+import { StyleFunctionProps } from '@chakra-ui/theme-tools'
+
 export default {
-  baseStyle: {
-    track: {
-      borderRadius: 'md',
-    },
+  defaultProps: {
+    colorScheme: 'primary',
+  },
+  baseStyle: (props: StyleFunctionProps) => {
+    const { colorScheme } = props
+    return {
+      track: {
+        borderRadius: 'md',
+      },
+      filledTrack: {
+        bg: `${colorScheme}.500`,
+      },
+    }
   },
 }
diff --git a/packages/saas-ui-theme/src/saas-ui/components/radio.ts b/packages/saas-ui-theme/src/saas-ui/components/radio.ts
new file mode 100644
index 000000000..25e6c8a50
--- /dev/null
+++ b/packages/saas-ui-theme/src/saas-ui/components/radio.ts
@@ -0,0 +1,16 @@
+import { StyleFunctionProps } from '@chakra-ui/theme-tools'
+
+export default {
+  baseStyle: (props: StyleFunctionProps) => {
+    const { colorScheme } = props
+    return {
+      control: {
+        _checked: {
+          borderColor: `${colorScheme}.500`,
+          bg: `${colorScheme}.500`,
+          color: 'white',
+        },
+      },
+    }
+  },
+}
diff --git a/packages/saas-ui-theme/src/saas-ui/components/slider.ts b/packages/saas-ui-theme/src/saas-ui/components/slider.ts
new file mode 100644
index 000000000..1b1483734
--- /dev/null
+++ b/packages/saas-ui-theme/src/saas-ui/components/slider.ts
@@ -0,0 +1,15 @@
+import { mode, StyleFunctionProps } from '@chakra-ui/theme-tools'
+
+export default {
+  defaultProps: {
+    colorScheme: 'primary',
+  },
+  baseStyle: (props: StyleFunctionProps) => {
+    const { colorScheme } = props
+    return {
+      filledTrack: {
+        bg: `${colorScheme}.500`,
+      },
+    }
+  },
+}
diff --git a/packages/saas-ui-theme/src/saas-ui/components/switch.ts b/packages/saas-ui-theme/src/saas-ui/components/switch.ts
new file mode 100644
index 000000000..6adea2f81
--- /dev/null
+++ b/packages/saas-ui-theme/src/saas-ui/components/switch.ts
@@ -0,0 +1,14 @@
+import { mode, StyleFunctionProps } from '@chakra-ui/theme-tools'
+
+export default {
+  baseStyle: (props: StyleFunctionProps) => {
+    const { colorScheme } = props
+    return {
+      track: {
+        _checked: {
+          bg: `${colorScheme}.500`,
+        },
+      },
+    }
+  },
+}
diff --git a/packages/saas-ui-theme/stories/theme.stories.tsx b/packages/saas-ui-theme/stories/theme.stories.tsx
new file mode 100644
index 000000000..93cbf8a06
--- /dev/null
+++ b/packages/saas-ui-theme/stories/theme.stories.tsx
@@ -0,0 +1,95 @@
+import {
+  Container,
+  HStack,
+  Stack,
+  Checkbox,
+  Progress,
+  Radio,
+  Slider,
+  SliderFilledTrack,
+  SliderThumb,
+  SliderTrack,
+  Switch,
+  Button,
+  Badge,
+  Tag,
+  Spinner,
+} from '@chakra-ui/react'
+import * as React from 'react'
+
+export default {
+  title: 'Theme/Showcase',
+  decorators: [
+    (Story: any) => (
+      <Container mt="40px">
+        <Story />
+      </Container>
+    ),
+  ],
+}
+
+export const Showcase = () => (
+  <Stack align="start" spacing="8">
+    <Progress width="full" value={40} />
+    <Progress width="full" colorScheme="secondary" value={100} />
+
+    <Slider aria-label="slider-ex-1" defaultValue={30}>
+      <SliderTrack>
+        <SliderFilledTrack />
+      </SliderTrack>
+      <SliderThumb />
+    </Slider>
+
+    <HStack spacing="8">
+      <Radio isChecked />
+      <Checkbox isChecked />
+      <Switch isChecked />
+    </HStack>
+
+    <HStack>
+      <Button colorScheme="primary" variant="solid">
+        Button
+      </Button>
+      <Button colorScheme="primary" variant="outline">
+        Button
+      </Button>
+      <Button colorScheme="primary" variant="subtle">
+        Button
+      </Button>
+      <Button colorScheme="primary" variant="ghost">
+        Button
+      </Button>
+      <Button colorScheme="primary" variant="link">
+        Button
+      </Button>
+    </HStack>
+
+    <HStack>
+      <Badge variant="outline" colorScheme="primary">
+        Default
+      </Badge>
+      <Badge variant="solid" colorScheme="primary">
+        Success
+      </Badge>
+      <Badge variant="subtle" colorScheme="primary">
+        Removed
+      </Badge>
+    </HStack>
+
+    <HStack>
+      <Tag variant="outline" colorScheme="primary">
+        Default
+      </Tag>
+      <Tag variant="solid" colorScheme="primary">
+        Success
+      </Tag>
+      <Tag variant="subtle" colorScheme="primary">
+        Removed
+      </Tag>
+    </HStack>
+
+    <HStack>
+      <Spinner color="primary.500" />
+    </HStack>
+  </Stack>
+)