diff --git a/apps/web-sandbox/src/App.tsx b/apps/web-sandbox/src/App.tsx
index 71a53f81..f710cac9 100644
--- a/apps/web-sandbox/src/App.tsx
+++ b/apps/web-sandbox/src/App.tsx
@@ -409,17 +409,17 @@ const Comps = () => {
                 </Box>
               </Grid>
               <Grid variant="item">
-                  <Label>Email</Label>
-                  <Input
-                    style={{ width: '100' }}
-                    autoComplete="false"
-                    placeholder="john@mail.com"
-                    type="email"
-                    variant="error"
-                  />
-                  <InputFeedback variant="error">
-                    The email is not valid!
-                  </InputFeedback>
+                <Label>Email</Label>
+                <Input
+                  style={{ width: '100' }}
+                  autoComplete="false"
+                  placeholder="john@mail.com"
+                  type="email"
+                  variant="error"
+                />
+                <InputFeedback variant="error">
+                  The email is not valid!
+                </InputFeedback>
               </Grid>
               <Grid variant="item">
                 <Box style={{ width: '100' }} variant="column">
diff --git a/apps/web-sandbox/src/components/Box.tsx b/apps/web-sandbox/src/components/Box.tsx
index 1a08bcbf..e12bfce3 100644
--- a/apps/web-sandbox/src/components/Box.tsx
+++ b/apps/web-sandbox/src/components/Box.tsx
@@ -1,11 +1,7 @@
-import { Variant } from "@morfeo/react"
-import { ComponentProps } from "react"
-import { MorfeoComponent } from "./MorfeoComponent"
+import { MorfeoComponent, MorfeoComponentProps } from './MorfeoComponent';
 
-type Props = {
-  variant?: Variant<'Box'>;
-} & Omit<ComponentProps<typeof MorfeoComponent>, 'componentName'>
+type Props = Omit<MorfeoComponentProps<'Box'>, 'componentName'>;
 
-export const Box: React.FC<Props> = ({ variant, children, ...props }) => {
-  return <MorfeoComponent componentName="Box" variant={variant} {...props}>{children}</MorfeoComponent>
-}
\ No newline at end of file
+export const Box: React.FC<Props> = props => (
+  <MorfeoComponent componentName="Box" {...props} />
+);
diff --git a/apps/web-sandbox/src/components/Card.tsx b/apps/web-sandbox/src/components/Card.tsx
index 9b3150db..0de6904c 100644
--- a/apps/web-sandbox/src/components/Card.tsx
+++ b/apps/web-sandbox/src/components/Card.tsx
@@ -1,11 +1,7 @@
-import { Variant } from "@morfeo/react"
-import { ComponentProps } from "react"
-import { MorfeoComponent } from "./MorfeoComponent"
+import { MorfeoComponent, MorfeoComponentProps } from './MorfeoComponent';
 
-type Props = {
-  variant?: Variant<'Card'>;
-} & Omit<ComponentProps<typeof MorfeoComponent>, 'componentName'>
+type Props = Omit<MorfeoComponentProps<'Card'>, 'componentName'>;
 
-export const Card: React.FC<Props> = ({ variant, children, ...props }) => {
-  return <MorfeoComponent componentName="Card" variant={variant} {...props}>{children}</MorfeoComponent>
-}
\ No newline at end of file
+export const Card: React.FC<Props> = props => (
+  <MorfeoComponent componentName="Card" {...props} />
+);
diff --git a/apps/web-sandbox/src/components/Forms/Button.tsx b/apps/web-sandbox/src/components/Forms/Button.tsx
index 7d53def8..400cfe25 100644
--- a/apps/web-sandbox/src/components/Forms/Button.tsx
+++ b/apps/web-sandbox/src/components/Forms/Button.tsx
@@ -1,8 +1,7 @@
-import { ComponentProps } from "react"
-import { MorfeoComponent } from "../MorfeoComponent"
+import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
 
-type Props = Omit<ComponentProps<typeof MorfeoComponent>, 'componentName'>
+type Props = Omit<MorfeoComponentProps<'Button'>, 'componentName'>;
 
-export const Button: React.FC<Props> = ({ variant, children, ...props }) => {
-  return <MorfeoComponent componentName="Button" variant={variant} {...props}>{children}</MorfeoComponent>
-}
\ No newline at end of file
+export const Button: React.FC<Props> = props => (
+  <MorfeoComponent componentName="Button" {...props} />
+);
diff --git a/apps/web-sandbox/src/components/Forms/Input.tsx b/apps/web-sandbox/src/components/Forms/Input.tsx
index 5318ef68..f7ac9e28 100644
--- a/apps/web-sandbox/src/components/Forms/Input.tsx
+++ b/apps/web-sandbox/src/components/Forms/Input.tsx
@@ -1,8 +1,7 @@
-import { ComponentProps } from "react"
-import { MorfeoComponent } from "../MorfeoComponent"
+import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
 
-type Props = Omit<ComponentProps<typeof MorfeoComponent>, 'componentName'>
+type Props = Omit<MorfeoComponentProps<'Input'>, 'componentName'>;
 
-export const Input: React.FC<Props> = ({ variant, children, ...props }) => {
-  return <MorfeoComponent componentName="Input" variant={variant} {...props}>{children}</MorfeoComponent>
-}
\ No newline at end of file
+export const Input: React.FC<Props> = props => {
+  return <MorfeoComponent componentName="Input" {...props} />;
+};
diff --git a/apps/web-sandbox/src/components/Forms/InputFeedback.tsx b/apps/web-sandbox/src/components/Forms/InputFeedback.tsx
index 1ee3a09a..82e0e61c 100644
--- a/apps/web-sandbox/src/components/Forms/InputFeedback.tsx
+++ b/apps/web-sandbox/src/components/Forms/InputFeedback.tsx
@@ -1,8 +1,7 @@
-import { ComponentProps } from "react"
-import { MorfeoComponent } from "../MorfeoComponent"
+import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
 
-type Props = Omit<ComponentProps<typeof MorfeoComponent>, 'componentName'>
+type Props = Omit<MorfeoComponentProps<'InputFeedback'>, 'componentName'>;
 
-export const InputFeedback: React.FC<Props> = ({ variant, children, ...props }) => {
-  return <MorfeoComponent componentName="InputFeedback" variant={variant} {...props}>{children}</MorfeoComponent>
-}
\ No newline at end of file
+export const InputFeedback: React.FC<Props> = props => (
+  <MorfeoComponent componentName="InputFeedback" {...props} />
+);
diff --git a/apps/web-sandbox/src/components/Forms/Label.tsx b/apps/web-sandbox/src/components/Forms/Label.tsx
index a77cf93d..b08b7d7b 100644
--- a/apps/web-sandbox/src/components/Forms/Label.tsx
+++ b/apps/web-sandbox/src/components/Forms/Label.tsx
@@ -1,8 +1,7 @@
-import { ComponentProps } from "react"
-import { MorfeoComponent } from "../MorfeoComponent"
+import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
 
-type Props = Omit<ComponentProps<typeof MorfeoComponent>, 'componentName'>
+type Props = Omit<MorfeoComponentProps<'Label'>, 'componentName'>;
 
-export const Label: React.FC<Props> = ({ variant, children, ...props }) => {
-  return <MorfeoComponent componentName="Label" variant={variant} {...props}>{children}</MorfeoComponent>
-}
\ No newline at end of file
+export const Label: React.FC<Props> = props => (
+  <MorfeoComponent componentName="Label" {...props} />
+);
diff --git a/apps/web-sandbox/src/components/Grid/Container.tsx b/apps/web-sandbox/src/components/Grid/Container.tsx
index 49c94591..9cf9ed43 100644
--- a/apps/web-sandbox/src/components/Grid/Container.tsx
+++ b/apps/web-sandbox/src/components/Grid/Container.tsx
@@ -1,11 +1,7 @@
-import { Variant } from "@morfeo/react"
-import { ComponentProps } from "react"
-import { MorfeoComponent } from "../MorfeoComponent"
+import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
 
-type Props = {
-  variant?: Variant<'Container'>;
-} & Omit<ComponentProps<typeof MorfeoComponent>, 'componentName'>
+type Props = Omit<MorfeoComponentProps<'Container'>, 'componentName'>;
 
-export const Container: React.FC<Props> = ({ variant, children, ...props }) => {
-  return <MorfeoComponent componentName="Container" variant={variant} {...props}>{children}</MorfeoComponent>
-}
\ No newline at end of file
+export const Container: React.FC<Props> = props => (
+  <MorfeoComponent componentName="Container" {...props} />
+);
diff --git a/apps/web-sandbox/src/components/Grid/Grid.tsx b/apps/web-sandbox/src/components/Grid/Grid.tsx
index 9fcf4e38..320bac85 100644
--- a/apps/web-sandbox/src/components/Grid/Grid.tsx
+++ b/apps/web-sandbox/src/components/Grid/Grid.tsx
@@ -1,11 +1,7 @@
-import { Variant } from "@morfeo/react"
-import { ComponentProps } from "react"
-import { MorfeoComponent } from "../MorfeoComponent"
+import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
 
-type Props = {
-  variant?: Variant<'Grid'>;
-} & Omit<ComponentProps<typeof MorfeoComponent>, 'componentName'>
+type Props = Omit<MorfeoComponentProps<'Grid'>, 'componentName'>;
 
-export const Grid: React.FC<Props> = ({ variant, children, ...props }) => {
-  return <MorfeoComponent componentName="Grid" variant={variant} {...props}>{children}</MorfeoComponent>
-}
\ No newline at end of file
+export const Grid: React.FC<Props> = props => (
+  <MorfeoComponent componentName="Grid" {...props} />
+);
diff --git a/apps/web-sandbox/src/components/Hr.tsx b/apps/web-sandbox/src/components/Hr.tsx
index 1a491688..0b0891fe 100644
--- a/apps/web-sandbox/src/components/Hr.tsx
+++ b/apps/web-sandbox/src/components/Hr.tsx
@@ -1,11 +1,7 @@
-import { Variant } from "@morfeo/react"
-import { ComponentProps } from "react"
-import { MorfeoComponent } from "./MorfeoComponent"
+import { MorfeoComponent, MorfeoComponentProps } from './MorfeoComponent';
 
-type Props = {
-  variant?: Variant<'Hr'>;
-} & Omit<ComponentProps<typeof MorfeoComponent>, 'componentName'>
+type Props = Omit<MorfeoComponentProps<'Hr'>, 'componentName'>;
 
-export const Hr: React.FC<Props> = ({ variant, children, ...props }) => {
-  return <MorfeoComponent componentName="Hr" variant={variant} {...props}>{children}</MorfeoComponent>
-}
\ No newline at end of file
+export const Hr: React.FC<Props> = props => (
+  <MorfeoComponent componentName="Hr" {...props} />
+);
diff --git a/apps/web-sandbox/src/components/List.tsx b/apps/web-sandbox/src/components/List.tsx
index d851cd28..b0cfbec8 100644
--- a/apps/web-sandbox/src/components/List.tsx
+++ b/apps/web-sandbox/src/components/List.tsx
@@ -1,11 +1,7 @@
-import { Variant } from "@morfeo/react"
-import { ComponentProps } from "react"
-import { MorfeoComponent } from "./MorfeoComponent"
+import { MorfeoComponent, MorfeoComponentProps } from './MorfeoComponent';
 
-type Props = {
-  variant?: Variant<'List'>;
-} & Omit<ComponentProps<typeof MorfeoComponent>, 'componentName'>
+type Props = Omit<MorfeoComponentProps<'List'>, 'componentName'>;
 
-export const List: React.FC<Props> = ({ variant, children, ...props }) => {
-  return <MorfeoComponent componentName="List" variant={variant} {...props}>{children}</MorfeoComponent>
-}
\ No newline at end of file
+export const List: React.FC<Props> = props => (
+  <MorfeoComponent componentName="List" {...props} />
+);
diff --git a/apps/web-sandbox/src/components/MorfeoComponent.tsx b/apps/web-sandbox/src/components/MorfeoComponent.tsx
index 00511a35..20d392af 100644
--- a/apps/web-sandbox/src/components/MorfeoComponent.tsx
+++ b/apps/web-sandbox/src/components/MorfeoComponent.tsx
@@ -1,34 +1,54 @@
-import { Variant, useClassName, Component, component, useTheme, Style } from '@morfeo/react';
+import {
+  Style,
+  Variant,
+  useTheme,
+  Component,
+  component,
+  useClassName,
+} from '@morfeo/react';
 import React, { ReactNode, HTMLProps, useMemo } from 'react';
 
-
-type Props<T extends Component> = {
+export type MorfeoComponentProps<T extends Component> = {
+  style?: Style;
   variant?: Variant<T>;
-  componentName: T;
   children?: ReactNode;
-  style?: Style;
-} & Omit<HTMLProps<HTMLElement>, 'style'>
+  componentName: T;
+} & Omit<HTMLProps<HTMLElement>, 'style'>;
+
+export function MorfeoComponent<T extends Component>({
+  style,
+  variant,
+  children,
+  componentName,
+  ...props
+}: MorfeoComponentProps<T>) {
+  const {
+    tag = 'div',
+    props: componentProps,
+    style: componentStyle,
+  } = component(componentName, variant).get();
 
-export function MorfeoComponent<T extends Component>({ componentName , variant, children, style, ...props }: Props<T>) {
-  const componentObj = component(componentName, variant).get();
-  const componentStyle = component(componentName, variant).getStyle();
   const theme = useTheme();
-  
+
   const className = useClassName({ ...componentStyle, ...style });
-  
+
   const render = useMemo(() => {
-    if (componentObj.tag && theme) {
-      return React.createElement(componentObj.tag, {
-        ...componentObj.props,
-        className,
+    if (tag && theme) {
+      return React.createElement(
+        tag,
+        {
+          ...componentProps,
+          ...props,
+          className: props.className
+            ? [className, props.className].join(' ')
+            : className,
+        },
         children,
-        ...props
-      })
+      );
     }
-    
-    return <></> 
-    
-  }, [children, className, componentObj.props, componentObj.tag, props, theme])
 
-  return render
-}
\ No newline at end of file
+    return <></>;
+  }, [children, className, componentProps, props, tag, theme]);
+
+  return render;
+}
diff --git a/apps/web-sandbox/src/components/Templates/Footer.tsx b/apps/web-sandbox/src/components/Templates/Footer.tsx
index 4394643c..134f2d41 100644
--- a/apps/web-sandbox/src/components/Templates/Footer.tsx
+++ b/apps/web-sandbox/src/components/Templates/Footer.tsx
@@ -1,11 +1,7 @@
-import { Variant } from "@morfeo/react"
-import { ComponentProps } from "react"
-import { MorfeoComponent } from "../MorfeoComponent"
+import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
 
-type Props = {
-  variant?: Variant<'Footer'>;
-} & Omit<ComponentProps<typeof MorfeoComponent>, 'componentName'>
+type Props = Omit<MorfeoComponentProps<'Footer'>, 'componentName'>;
 
-export const Footer: React.FC<Props> = ({ variant, children, ...props }) => {
-  return <MorfeoComponent componentName="Footer" variant={variant} {...props}>{children}</MorfeoComponent>
-}
\ No newline at end of file
+export const Footer: React.FC<Props> = props => (
+  <MorfeoComponent componentName="Footer" {...props} />
+);
diff --git a/apps/web-sandbox/src/components/Templates/Header.tsx b/apps/web-sandbox/src/components/Templates/Header.tsx
index e8cb38a5..58a506e9 100644
--- a/apps/web-sandbox/src/components/Templates/Header.tsx
+++ b/apps/web-sandbox/src/components/Templates/Header.tsx
@@ -1,11 +1,7 @@
-import { Variant } from "@morfeo/react"
-import { ComponentProps } from "react"
-import { MorfeoComponent } from "../MorfeoComponent"
+import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
 
-type Props = {
-  variant?: Variant<'Header'>;
-} & Omit<ComponentProps<typeof MorfeoComponent>, 'componentName'>
+type Props = Omit<MorfeoComponentProps<'Header'>, 'componentName'>;
 
-export const Header: React.FC<Props> = ({ variant, children, ...props }) => {
-  return <MorfeoComponent componentName="Header" variant={variant} {...props}>{children}</MorfeoComponent>
-}
\ No newline at end of file
+export const Header: React.FC<Props> = props => (
+  <MorfeoComponent componentName="Header" {...props} />
+);
diff --git a/apps/web-sandbox/src/components/Templates/Main.tsx b/apps/web-sandbox/src/components/Templates/Main.tsx
index ea18c63e..c9a0a47c 100644
--- a/apps/web-sandbox/src/components/Templates/Main.tsx
+++ b/apps/web-sandbox/src/components/Templates/Main.tsx
@@ -1,11 +1,7 @@
-import { Variant } from "@morfeo/react"
-import { ComponentProps } from "react"
-import { MorfeoComponent } from "../MorfeoComponent"
+import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
 
-type Props = {
-  variant?: Variant<'Main'>;
-} & Omit<ComponentProps<typeof MorfeoComponent>, 'componentName'>
+type Props = Omit<MorfeoComponentProps<'Main'>, 'componentName'>;
 
-export const Main: React.FC<Props> = ({ variant, children, ...props }) => {
-  return <MorfeoComponent componentName="Main" variant={variant} {...props}>{children}</MorfeoComponent>
-}
\ No newline at end of file
+export const Main: React.FC<Props> = props => (
+  <MorfeoComponent componentName="Main" {...props} />
+);
diff --git a/apps/web-sandbox/src/components/Templates/Page.tsx b/apps/web-sandbox/src/components/Templates/Page.tsx
index 00056368..6e852aa1 100644
--- a/apps/web-sandbox/src/components/Templates/Page.tsx
+++ b/apps/web-sandbox/src/components/Templates/Page.tsx
@@ -1,11 +1,7 @@
-import { Variant } from "@morfeo/react"
-import { ComponentProps } from "react"
-import { MorfeoComponent } from "../MorfeoComponent"
+import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
 
-type Props = {
-  variant?: Variant<'Page'>;
-} & Omit<ComponentProps<typeof MorfeoComponent>, 'componentName'>
+type Props = Omit<MorfeoComponentProps<'Page'>, 'componentName'>;
 
-export const Page: React.FC<Props> = ({ children, variant, ...props }) => {
-  return <MorfeoComponent componentName="Page" variant={variant} {...props}>{children}</MorfeoComponent>
-}
\ No newline at end of file
+export const Page: React.FC<Props> = props => (
+  <MorfeoComponent componentName="Page" {...props} />
+);
diff --git a/apps/web-sandbox/src/components/Templates/Section.tsx b/apps/web-sandbox/src/components/Templates/Section.tsx
index 8255c825..41fa0e32 100644
--- a/apps/web-sandbox/src/components/Templates/Section.tsx
+++ b/apps/web-sandbox/src/components/Templates/Section.tsx
@@ -1,11 +1,7 @@
-import { Variant } from "@morfeo/react"
-import { ComponentProps } from "react"
-import { MorfeoComponent } from "../MorfeoComponent"
+import { MorfeoComponent, MorfeoComponentProps } from '../MorfeoComponent';
 
-type Props = {
-  variant?: Variant<'Section'>;
-} & Omit<ComponentProps<typeof MorfeoComponent>, 'componentName'>
+type Props = Omit<MorfeoComponentProps<'Section'>, 'componentName'>;
 
-export const Section: React.FC<Props> = ({ children, variant, ...props }) => {
-  return <MorfeoComponent componentName="Section" variant={variant} {...props}>{children}</MorfeoComponent>
-}
\ No newline at end of file
+export const Section: React.FC<Props> = props => (
+  <MorfeoComponent componentName="Section" {...props} />
+);
diff --git a/apps/web-sandbox/src/components/Typography.tsx b/apps/web-sandbox/src/components/Typography.tsx
index 16ef5c08..8148a525 100644
--- a/apps/web-sandbox/src/components/Typography.tsx
+++ b/apps/web-sandbox/src/components/Typography.tsx
@@ -1,11 +1,7 @@
-import { Variant } from "@morfeo/react"
-import { ComponentProps } from "react"
-import { MorfeoComponent } from "./MorfeoComponent"
+import { MorfeoComponent, MorfeoComponentProps } from './MorfeoComponent';
 
-type Props = {
-  variant?: Variant<'Typography'>;
-} & Omit<ComponentProps<typeof MorfeoComponent>, 'componentName'>
+type Props = Omit<MorfeoComponentProps<'Typography'>, 'componentName'>;
 
-export const Typography: React.FC<Props> = ({ variant, children, ...props }) => {
-  return <MorfeoComponent componentName="Typography" variant={variant} {...props}>{children}</MorfeoComponent>
-}
\ No newline at end of file
+export const Typography: React.FC<Props> = props => (
+  <MorfeoComponent componentName="Typography" {...props} />
+);
diff --git a/apps/web-sandbox/src/morfeo-components/Box.ts b/apps/web-sandbox/src/morfeo-components/Box.ts
index 4a335f96..4764733c 100644
--- a/apps/web-sandbox/src/morfeo-components/Box.ts
+++ b/apps/web-sandbox/src/morfeo-components/Box.ts
@@ -1,6 +1,8 @@
 import { ComponentConfig, Size } from '@morfeo/react';
 
-export const Box: ComponentConfig = {
+type BoxVariant = 'block' | 'column' | 'row';
+
+export const Box: ComponentConfig<BoxVariant> = {
   tag: 'div',
   style: {
     position: 'relative',
diff --git a/apps/web-sandbox/src/morfeo-components/Card.ts b/apps/web-sandbox/src/morfeo-components/Card.ts
index d9d7ca7d..3dd1be4c 100644
--- a/apps/web-sandbox/src/morfeo-components/Card.ts
+++ b/apps/web-sandbox/src/morfeo-components/Card.ts
@@ -1,6 +1,19 @@
 import { ComponentConfig, Size } from '@morfeo/react';
 
-export const Card: ComponentConfig = {
+type CardVariant =
+  | 'hoverable'
+  | 'primary'
+  | 'warning'
+  | 'error'
+  | 'success'
+  | 'basic'
+  | 'outlined'
+  | 'outlined.primary'
+  | 'outlined.warning'
+  | 'outlined.error'
+  | 'outlined.success';
+
+export const Card: ComponentConfig<CardVariant> = {
   tag: 'div',
   style: {
     componentName: 'Box',
@@ -116,7 +129,9 @@ export const Card: ComponentConfig = {
   },
 };
 
-export const CardDark: ComponentConfig = {
+const variantKeys = Object.keys(Card.variants) as CardVariant[];
+
+export const CardDark: ComponentConfig<CardVariant> = {
   ...Card,
   style: {
     ...Card.style,
@@ -125,19 +140,19 @@ export const CardDark: ComponentConfig = {
     borderColor: 'text',
   },
   variants: {
-    ...Object.keys(Card.variants).reduce(
+    ...(variantKeys.reduce(
       (acc, key) => ({
         ...acc,
-        [key as any]: {
-          ...Card.variants[key as any],
+        [key]: {
+          ...Card.variants[key],
           style: {
-            ...Card.variants[key as any].style,
+            ...Card.variants[key].style,
             ...(key.indexOf('outlined') === -1 && { border: 'none' }),
           },
         },
       }),
       {},
-    ),
+    ) as any),
     hoverable: {
       ...Card.variants.hoverable,
       style: {
diff --git a/apps/web-sandbox/src/morfeo-components/Forms/Button.ts b/apps/web-sandbox/src/morfeo-components/Forms/Button.ts
index 029ad4b6..999fe77a 100644
--- a/apps/web-sandbox/src/morfeo-components/Forms/Button.ts
+++ b/apps/web-sandbox/src/morfeo-components/Forms/Button.ts
@@ -1,6 +1,42 @@
 import { ComponentConfig } from '@morfeo/react';
 
-export const Button: ComponentConfig = {
+type ButtonVariant =
+  | 'inverted'
+  | 'small'
+  | 'small.inverted'
+  | 'small.primary'
+  | 'small.secondary'
+  | 'small.warning'
+  | 'small.error'
+  | 'small.success'
+  | 'primary'
+  | 'secondary'
+  | 'warning'
+  | 'error'
+  | 'success'
+  | 'round'
+  | 'round.inverted'
+  | 'round.primary'
+  | 'round.secondary'
+  | 'round.success'
+  | 'round.warning'
+  | 'round.error'
+  | 'round.small'
+  | 'round.small.inverted'
+  | 'round.small.primary'
+  | 'round.small.secondary'
+  | 'round.small.success'
+  | 'round.small.warning'
+  | 'round.small.error'
+  | 'round.large'
+  | 'round.large.inverted'
+  | 'round.large.primary'
+  | 'round.large.secondary'
+  | 'round.large.success'
+  | 'round.large.warning'
+  | 'round.large.error';
+
+export const Button: ComponentConfig<ButtonVariant> = {
   tag: 'button',
   style: {
     px: 's',
diff --git a/apps/web-sandbox/src/morfeo-components/Forms/Input.ts b/apps/web-sandbox/src/morfeo-components/Forms/Input.ts
index 257bf8ea..cc1aec76 100644
--- a/apps/web-sandbox/src/morfeo-components/Forms/Input.ts
+++ b/apps/web-sandbox/src/morfeo-components/Forms/Input.ts
@@ -1,6 +1,15 @@
 import { ComponentConfig } from '@morfeo/react';
 
-export const Input: ComponentConfig = {
+type InputVariant =
+  | 'error'
+  | 'success'
+  | 'warning'
+  | 'small'
+  | 'small.error'
+  | 'small.warning'
+  | 'small.success';
+
+export const Input: ComponentConfig<InputVariant> = {
   tag: 'input',
   style: {
     width: '100',
@@ -54,7 +63,7 @@ export const Input: ComponentConfig = {
     'small.error': {
       style: {
         componentName: 'Input',
-        variant: 'Small',
+        variant: 'small',
         outlineColor: 'error',
         outline: 'strong',
       },
@@ -62,7 +71,7 @@ export const Input: ComponentConfig = {
     'small.warning': {
       style: {
         componentName: 'Input',
-        variant: 'Small',
+        variant: 'small',
         outlineColor: 'warning',
         outline: 'strong',
       },
@@ -70,7 +79,7 @@ export const Input: ComponentConfig = {
     'small.success': {
       style: {
         componentName: 'Input',
-        variant: 'Small',
+        variant: 'small',
         outlineColor: 'success',
         outline: 'strong',
       },
diff --git a/apps/web-sandbox/src/morfeo-components/Forms/InputFeedback.ts b/apps/web-sandbox/src/morfeo-components/Forms/InputFeedback.ts
index 17ea5504..37af680d 100644
--- a/apps/web-sandbox/src/morfeo-components/Forms/InputFeedback.ts
+++ b/apps/web-sandbox/src/morfeo-components/Forms/InputFeedback.ts
@@ -1,6 +1,8 @@
 import { ComponentConfig } from '@morfeo/react';
 
-export const InputFeedback: ComponentConfig = {
+type InputFeedbackVariant = 'error' | 'warning' | 'success';
+
+export const InputFeedback: ComponentConfig<InputFeedbackVariant> = {
   tag: 'p',
   style: {
     fontSize: 'xs',
diff --git a/apps/web-sandbox/src/morfeo-components/Forms/Label.ts b/apps/web-sandbox/src/morfeo-components/Forms/Label.ts
index 6f40f47c..3d5a701a 100644
--- a/apps/web-sandbox/src/morfeo-components/Forms/Label.ts
+++ b/apps/web-sandbox/src/morfeo-components/Forms/Label.ts
@@ -1,6 +1,8 @@
 import { ComponentConfig } from '@morfeo/react';
 
-export const Label: ComponentConfig = {
+type LabelVariant = 'small';
+
+export const Label: ComponentConfig<LabelVariant> = {
   tag: 'label',
   style: {
     fontSize: 's',
diff --git a/apps/web-sandbox/src/morfeo-components/Grid/Container.ts b/apps/web-sandbox/src/morfeo-components/Grid/Container.ts
index 0dc600fe..0432d95c 100644
--- a/apps/web-sandbox/src/morfeo-components/Grid/Container.ts
+++ b/apps/web-sandbox/src/morfeo-components/Grid/Container.ts
@@ -1,6 +1,8 @@
 import { ComponentConfig, Size } from '@morfeo/react';
 
-export const Container: ComponentConfig = {
+type ContainerVariant = 'fluid' | 'noGutter' | 'gridGutter';
+
+export const Container: ComponentConfig<ContainerVariant> = {
   tag: 'div',
   style: {
     componentName: 'Box',
diff --git a/apps/web-sandbox/src/morfeo-components/Grid/Grid.ts b/apps/web-sandbox/src/morfeo-components/Grid/Grid.ts
index 9cdb873b..547789df 100644
--- a/apps/web-sandbox/src/morfeo-components/Grid/Grid.ts
+++ b/apps/web-sandbox/src/morfeo-components/Grid/Grid.ts
@@ -1,6 +1,21 @@
 import { ComponentConfig, Size } from '@morfeo/react';
 
-export const Grid: ComponentConfig = {
+type GridVariant =
+  | 'item'
+  | 'item.1'
+  | 'item.2'
+  | 'item.3'
+  | 'item.4'
+  | 'item.5'
+  | 'item.6'
+  | 'item.7'
+  | 'item.8'
+  | 'item.9'
+  | 'item.10'
+  | 'item.11'
+  | 'item.12';
+
+export const Grid: ComponentConfig<GridVariant> = {
   tag: 'div',
   style: {
     componentName: 'Box',
diff --git a/apps/web-sandbox/src/morfeo-components/Hr.ts b/apps/web-sandbox/src/morfeo-components/Hr.ts
index 50bd3366..706604d3 100644
--- a/apps/web-sandbox/src/morfeo-components/Hr.ts
+++ b/apps/web-sandbox/src/morfeo-components/Hr.ts
@@ -1,6 +1,8 @@
 import { ComponentConfig } from '@morfeo/react';
 
-export const Hr: ComponentConfig = {
+type HrVariant = 'primary' | 'reduced' | 'reduced.primary';
+
+export const Hr: ComponentConfig<HrVariant> = {
   tag: 'hr',
   style: {
     width: '100',
diff --git a/apps/web-sandbox/src/morfeo-components/List.ts b/apps/web-sandbox/src/morfeo-components/List.ts
index c8c8e4b2..ba15efa0 100644
--- a/apps/web-sandbox/src/morfeo-components/List.ts
+++ b/apps/web-sandbox/src/morfeo-components/List.ts
@@ -1,6 +1,8 @@
 import { ComponentConfig } from '@morfeo/react';
 
-export const List: ComponentConfig = {
+type ListVariant = 'item' | 'item.arrow' | 'item.outlinedBullet';
+
+export const List: ComponentConfig<ListVariant> = {
   tag: 'ul',
   style: {
     my: 'l',
diff --git a/apps/web-sandbox/src/morfeo-components/Templates/Footer.ts b/apps/web-sandbox/src/morfeo-components/Templates/Footer.ts
index 288c93ad..0bc17009 100644
--- a/apps/web-sandbox/src/morfeo-components/Templates/Footer.ts
+++ b/apps/web-sandbox/src/morfeo-components/Templates/Footer.ts
@@ -1,6 +1,8 @@
 import { ComponentConfig, Size } from '@morfeo/react';
 
-export const Footer: ComponentConfig = {
+type FooterVariant = 'primary';
+
+export const Footer: ComponentConfig<FooterVariant> = {
   tag: 'footer',
   style: {
     componentName: 'Box',
diff --git a/apps/web-sandbox/src/morfeo-components/Templates/Header.ts b/apps/web-sandbox/src/morfeo-components/Templates/Header.ts
index 92e3aa69..6978df66 100644
--- a/apps/web-sandbox/src/morfeo-components/Templates/Header.ts
+++ b/apps/web-sandbox/src/morfeo-components/Templates/Header.ts
@@ -1,6 +1,8 @@
 import { ComponentConfig, Size } from '@morfeo/react';
 
-export const Header: ComponentConfig = {
+type HeaderVariant = 'primary' | 'primary.fixed' | 'fixed';
+
+export const Header: ComponentConfig<HeaderVariant> = {
   tag: 'header',
   style: {
     componentName: 'Box',
diff --git a/apps/web-sandbox/src/morfeo-components/Templates/Section.ts b/apps/web-sandbox/src/morfeo-components/Templates/Section.ts
index f975f14b..4f80be6e 100644
--- a/apps/web-sandbox/src/morfeo-components/Templates/Section.ts
+++ b/apps/web-sandbox/src/morfeo-components/Templates/Section.ts
@@ -1,6 +1,14 @@
 import { ComponentConfig } from '@morfeo/react';
 
-export const Section: ComponentConfig = {
+type SectionVariant =
+  | 'quarter'
+  | 'half'
+  | 'full'
+  | 'quarter.primary'
+  | 'half.primary'
+  | 'full.primary';
+
+export const Section: ComponentConfig<SectionVariant> = {
   tag: 'section',
   style: {
     componentName: 'Box',
diff --git a/apps/web-sandbox/src/morfeo-components/Typography.ts b/apps/web-sandbox/src/morfeo-components/Typography.ts
index 0c54216c..3cb816bf 100644
--- a/apps/web-sandbox/src/morfeo-components/Typography.ts
+++ b/apps/web-sandbox/src/morfeo-components/Typography.ts
@@ -1,6 +1,34 @@
 import { ComponentConfig } from '@morfeo/react';
 
-export const Typography: ComponentConfig = {
+type TypographyVariant =
+  | 'p'
+  | 'p2'
+  | 'p3'
+  | 'p4'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'p.inverted'
+  | 'p2.inverted'
+  | 'p3.inverted'
+  | 'p4.inverted'
+  | 'h1.inverted'
+  | 'h2.inverted'
+  | 'h3.inverted'
+  | 'h4.inverted'
+  | 'h5.inverted'
+  | 'h6.inverted'
+  | 'display'
+  | 'link'
+  | 'cta'
+  | 'code'
+  | 'quote'
+  | 'blockQuote';
+
+export const Typography: ComponentConfig<TypographyVariant> = {
   tag: 'p',
   style: {
     fontFamily: 'default',
diff --git a/packages/core/src/theme/components.ts b/packages/core/src/theme/components.ts
index e577c04a..9a5a932d 100644
--- a/packages/core/src/theme/components.ts
+++ b/packages/core/src/theme/components.ts
@@ -106,8 +106,15 @@ export function component<C extends Component>(name: C, variant?: Variant<C>) {
     return getConfig({ name, property: 'variants' });
   }
 
+  function _get() {
+    return {
+      ...get(name, variant, true),
+      style: getStyle(),
+    };
+  }
+
   return {
-    get: () => get(name, variant, true),
+    get: _get,
     getTag,
     getStyle,
     getProps,
diff --git a/packages/core/tests/theme/component.test.ts b/packages/core/tests/theme/component.test.ts
index 09a15953..87065627 100644
--- a/packages/core/tests/theme/component.test.ts
+++ b/packages/core/tests/theme/component.test.ts
@@ -112,11 +112,23 @@ describe('component', () => {
     expect(variants).toEqual(mergedVariants);
   });
 
-  test('should be possible to use componentName and variant as component style', () => {
-    const twoStyle = component('VariantCycle' as any, 'three').getStyle();
-    expect(twoStyle).toEqual({
+  test('should be possible to use componentName and variant inside the style of another component', () => {
+    const style = component('VariantCycle' as any, 'three').getStyle();
+
+    expect(style).toEqual({
       color: 'primary',
       bg: 'secondary',
     });
   });
+
+  test('getStyle and get().style should return the same values', () => {
+    const styleFromGetStyle = component(
+      'VariantCycle' as any,
+      'three',
+    ).getStyle();
+
+    const { style } = component('VariantCycle' as any, 'three').get();
+
+    expect(styleFromGetStyle).toEqual(style);
+  });
 });
diff --git a/packages/spec/src/types/components.ts b/packages/spec/src/types/components.ts
index cbb6c419..177757a4 100644
--- a/packages/spec/src/types/components.ts
+++ b/packages/spec/src/types/components.ts
@@ -31,7 +31,12 @@ export interface Components {
 
 export type Component = keyof Components;
 
-export type Variant<C extends Component> = keyof Components[C]['variants'];
+type VariantMap = {
+  [K in Component]: keyof Components[K]['variants'];
+};
+
+export type Variant<C extends Component = Component> =
+  VariantMap[C] extends string ? VariantMap[C] : string;
 
 export type ComponentProps<C extends Component = Component> = {
   componentName?: C;
diff --git a/packages/styled-components-web/src/styled.ts b/packages/styled-components-web/src/styled.ts
index 93fde404..c311b548 100644
--- a/packages/styled-components-web/src/styled.ts
+++ b/packages/styled-components-web/src/styled.ts
@@ -26,7 +26,7 @@ export function attributesParser<P extends Style>(
   componentName: Component,
 ) {
   const { tag: componentTag, props: componentProps = {} } =
-    component(componentName).get() || {};
+    component(componentName).get();
   const variants = component(componentName).getVariants();
   const variant = props.variant || componentProps.variant;
   if (!variant || !variants || !variants[variant]) {
@@ -55,7 +55,7 @@ function getDisplayName(componentName: string, variant?: string) {
 }
 
 const morfeoStyledHandler: MorfeoStyled = ((tag: ComponentTag) => {
-  const { tag: themeTag } = component(tag as any).get() || {};
+  const { tag: themeTag } = component(tag as any).get();
   const componentTag = themeTag || tag;
   const styledFunction =
     (styled[componentTag] as ThemedStyledFunction<