From c5fcba6dd0809b9a201f4e7bd7b01d157a9e3516 Mon Sep 17 00:00:00 2001
From: Travis Arnold <ftntravis@gmail.com>
Date: Sat, 12 Oct 2024 23:32:05 -0700
Subject: [PATCH] add real world component example

---
 apps/site/docs/02.getting-started.mdx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/apps/site/docs/02.getting-started.mdx b/apps/site/docs/02.getting-started.mdx
index c9fdeea2..090586a4 100644
--- a/apps/site/docs/02.getting-started.mdx
+++ b/apps/site/docs/02.getting-started.mdx
@@ -1,3 +1,5 @@
+import { APIReference } from 'renoun/components'
+
 export const metadata = {
   title: 'Getting Started',
 }
@@ -167,13 +169,19 @@ Here we define a schema for the front matter of our MDX files and use it to vali
 
 ## Enhancing with Components
 
-renoun provides several built-in components to enhance your documentation. For example, you can use the `PackageInstall` component to display installation instructions for a package:
+The renoun toolkit provides several built-in components to enhance your documentation. For example, you can use the `APIReference` component to easily document your APIs:
 
-```tsx allowErrors
-<PackageInstall packages={['renoun']} />
+```mdx
+import { APIReference } from 'renoun/components'
+
+<APIReference source="components/Card.tsx" />
 ```
 
-This will render an interactive component showing installation commands for different package managers. Explore more [components](/components) to enhance your documentation.
+<Preview>
+  <APIReference source="components/Card.tsx" />
+</Preview>
+
+Explore more [components](/components) to enhance your documentation.
 
 ## Conclusion