Document Anchor component

fern/products/docs/docs.yml

@@ -41,6 +41,9 @@ navigation:
           - page: Accordion Groups
             path: ./pages/component-library/default-components/accordion-groups.mdx
             icon: fa-duotone fa-chevrons-down
+          - page: Anchor
+            path: ./pages/component-library/default-components/anchor.mdx
+            icon: fa-duotone fa-link
           - page: Aside
             path: ./pages/component-library/default-components/aside.mdx
             icon: fa-regular fa-comment-dots

fern/products/docs/pages/component-library/default-components/anchor.mdx

@@ -0,0 +1,101 @@
+---
+title: Anchor
+description: Create linkable anchors for paragraphs, tables, and other content without headings
+---
+
+Use the `<Anchor>` component to create links to specific paragraphs, tables, and other sections of content that don't have headings. Wrap your content with the `<Anchor>` tag and assign it a custom anchor ID, which you can link to in URLs using the hash symbol (example: `https://website.com/page#data`).
+
+<Note>
+  Headings automatically generate anchor links based on their text content, so you don't need to use the `<Anchor>` component for headings.
+</Note>
+
+<Tabs>
+<Tab title="Basic anchor">
+
+<Anchor id="data">This sentence has a custom anchor</Anchor>
+
+You can link to it using `#data` in the URL.
+</Tab>
+<Tab title="Markdown">
+
+```jsx
+<Anchor id="data">This sentence has a custom anchor</Anchor>
+
+You can link to it using `#data` in the URL.
+```
+</Tab>
+</Tabs>
+
+<Tabs>
+<Tab title="Anchor a table">
+<Anchor id="api-endpoints">
+
+| Endpoint | Method | Description |
+|----------|--------|-------------|
+| `/users` | GET | Retrieve all users |
+| `/users/:id` | GET | Retrieve a specific user |
+| `/users` | POST | Create a new user |
+
+</Anchor>
+
+You can link directly to the [API endpoints table](#api-endpoints).
+</Tab>
+<Tab title="Markdown">
+
+```jsx
+<Anchor id="api-endpoints">
+
+| Endpoint | Method | Description |
+|----------|--------|-------------|
+| `/users` | GET | Retrieve all users |
+| `/users/:id` | GET | Retrieve a specific user |
+| `/users` | POST | Create a new user |
+
+</Anchor>
+
+You can link directly to the [API endpoints table](#api-endpoints).
+```
+</Tab>
+</Tabs>
+
+<Tabs>
+<Tab title="Anchor a Code Block">
+<Anchor id="example-code">
+
+```python
+def authenticate(api_key):
+    """Authenticate using your API key"""
+    headers = {"Authorization": f"Bearer {api_key}"}
+    return requests.get("https://api.example.com/auth", headers=headers)
+```
+
+</Anchor>
+
+Reference the [authentication code example](#example-code) in your implementation.
+</Tab>
+<Tab title="Markdown">
+
+````jsx
+<Anchor id="example-code">
+
+```python
+def authenticate(api_key):
+    """Authenticate using your API key"""
+    headers = {"Authorization": f"Bearer {api_key}"}
+    return requests.get("https://api.example.com/auth", headers=headers)
+```
+
+</Anchor>
+
+Reference the [authentication code example](#example-code) in your implementation.
+````
+</Tab>
+</Tabs>
+
+## Properties
+
+<ParamField path="id" type="string" required={true}>
+  The anchor ID for this content. Reference it in URLs using the hash (example: `#data`)
+</ParamField>
+
+