diff --git a/docs/src/layouts/docs.tsx b/docs/src/layouts/docs.tsx
index c5b31109..0559d2d6 100644
--- a/docs/src/layouts/docs.tsx
+++ b/docs/src/layouts/docs.tsx
@@ -62,7 +62,7 @@ const Layout: NextLayout<Props> = ({ children, meta }) => {
         <meta
           content={
             meta?.description
-            ?? 'Design system for ENS built with React and styled-components.'
+            ?? 'Design system for ENS built with React and vanilla-extract.'
           }
           key="description"
           name="description"
diff --git a/docs/src/pages/index.mdx b/docs/src/pages/index.mdx
index d0b85cc3..5fd281ec 100644
--- a/docs/src/pages/index.mdx
+++ b/docs/src/pages/index.mdx
@@ -13,12 +13,12 @@ import { Header, Link } from '~/components'
 ## Install
 
 ```bash
-pnpm i @ensdomains/thorin react-transition-state@1.1.5
+pnpm i @ensdomains/thorin
 ```
 
 ## Set Up
 
-Wrap the root of your app in a [`ThemeProvider`](https://styled-components.com/docs/advanced) module. Import **ThorinGlobalStyles** and declare it as a child of **ThemeProvider**. Import **lightTheme** or **darkTheme** and pass it to the **ThemeProvider**. Add [Satoshi](https://www.fontshare.com/fonts/satoshi) to your font stack.
+Wrap the root of your app in a ThemeProvider. Import **ThorinGlobalStyles** and declare it as a child of **ThemeProvider**. Import **lightTheme** or **darkTheme** and pass it to the **ThemeProvider**. Add [Satoshi](https://www.fontshare.com/fonts/satoshi) to your font stack.
 
 In this example we are adding the **lightTheme**.
 
@@ -42,13 +42,12 @@ To use the dark theme, import `darkTheme` and pass it to the `ThemeProvider`.
 
 ```tsx
 import React, { useState } from 'react'
-import { ThemeProvider } from 'styled-components'
-import { ThorinGlobalStyles, darkTheme } from '@ensdomains/thorin'
+import { ThemeProvider, darkTheme } from '@ensdomains/thorin'
+import 'thorin/dist/thorin.css'
 
 const App = () => {
   return (
     <ThemeProvider theme={darkTheme}>
-      <ThorinGlobalStyles />
       {children}
     </ThemeProvider>
   )
diff --git a/docs/src/types/styled-components.d.ts b/docs/src/types/styled-components.d.ts
deleted file mode 100644
index 449558ec..00000000
--- a/docs/src/types/styled-components.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { lightTheme } from '@ensdomains/thorin'
-import 'styled-components'
-
-type Theme = typeof lightTheme
-
-declare module 'styled-components' {
-  type DefaultTheme = Theme
-}
diff --git a/scripts/generateComponent.mjs b/scripts/generateComponent.mjs
index 4c2b1b02..3ab113f9 100644
--- a/scripts/generateComponent.mjs
+++ b/scripts/generateComponent.mjs
@@ -67,11 +67,8 @@ const COMPONENT_GROUPS = {
     console.log('Creating component...')
     const componentImports = dedent`
       import * as React from 'react'
-      import styled from 'styled-components'
 
       export type Props = {}
-
-      const Container = styled.div(() => css\`\`)
     `
     const componentBasic = dedent`
       ${componentImports}