diff --git a/package-lock.json b/package-lock.json
index 4c483b23..12ecf2db 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,7 +5,6 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "twin.macro",
       "version": "3.4.0",
       "license": "MIT",
       "dependencies": {
diff --git a/types/index.d.ts b/types/index.d.ts
index e1a80595..d66f0cef 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -1,4 +1,4 @@
-import { ComponentType } from 'react'
+import { ComponentType, ElementType } from 'react'
 import { Config as TailwindConfig } from 'tailwindcss'
 
 export interface TwStyle {
@@ -26,7 +26,7 @@ export type ScreenFn = <T = string>(
 ) => (styles?: string | TemplateStringsArray | TwStyle | TwStyle[]) => T
 
 export type TwComponent<K extends keyof JSX.IntrinsicElements> = (
-  props: JSX.IntrinsicElements[K]
+  props: JSX.IntrinsicElements[K] & { as?: ElementType }
 ) => JSX.Element
 
 export type TwComponentMap = {
diff --git a/types/tests/basic/index.tsx b/types/tests/basic/index.tsx
index 3324e030..5ea98bd6 100644
--- a/types/tests/basic/index.tsx
+++ b/types/tests/basic/index.tsx
@@ -52,3 +52,7 @@ const twProperty = (
 )
 
 const csProperty = <div cs="maxWidth[100%] height[calc(100vh - 1em)]" />
+const asProperty = <Button as="div" />
+
+// @ts-expect-error basic element doesn't provide as prop
+const asPropertyError = <p as="div" />
diff --git a/types/tests/emotion/index.tsx b/types/tests/emotion/index.tsx
index 6dc8420e..16bc8e4d 100644
--- a/types/tests/emotion/index.tsx
+++ b/types/tests/emotion/index.tsx
@@ -26,3 +26,6 @@ export const ComposedLink2 = styled(Link)``
 
 export const cssProperty = <div css={tw`bg-red-100`} />
 export const csProperty = <div cs="maxWidth[100%] height[calc(100vh - 1em)]" />
+
+export const asProperty = <Link as="button" />
+export const asProperty2 = <Container as="button" />
diff --git a/types/tests/styled-components/index.tsx b/types/tests/styled-components/index.tsx
index 0d25332b..dca33715 100644
--- a/types/tests/styled-components/index.tsx
+++ b/types/tests/styled-components/index.tsx
@@ -22,3 +22,6 @@ export const ComposedLink2 = styled(Link)``
 
 export const cssProperty = <div css={tw`bg-red-100`} />
 export const csProperty = <div cs="maxWidth[100%] height[calc(100vh - 1em)]" />
+
+export const asProperty = <Link as="button" />
+export const asProperty2 = <Container as="button" />