casing and other nits

Author: devalog

fern/products/docs/docs.yml

@@ -35,69 +35,81 @@ navigation:
           - page: Overview
             path: ./pages/component-library/default-components/overview.mdx
             icon: fa-duotone fa-book
-          - page: Accordions
+          - page: Accordion
             path: ./pages/component-library/default-components/accordions.mdx
             icon: fa-duotone fa-chevron-down
+            slug: accordions
           - 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
-          - page: Badges
+          - page: Badge
             path: ./pages/component-library/default-components/badges.mdx
             icon: fa-regular fa-ribbon
+            slug: badges
           - page: Button
             path: ./pages/component-library/default-components/button.mdx
             icon: fa-duotone fa-arrow-pointer
-          - page: Callouts
+          - page: Callout
             path: ./pages/component-library/default-components/callouts.mdx
             icon: fa-duotone fa-exclamation-triangle
-          - page: Cards
+            slug: callouts
+          - page: Card
             path: ./pages/component-library/default-components/cards.mdx
             icon: fa-duotone fa-id-card
-          - page: Code Blocks
+            slug: cards
+          - page: Code block
             path: ./pages/component-library/default-components/code-blocks.mdx
             icon: fa-duotone fa-code
+            slug: code-blocks
           - page: Embed
             path: ./pages/component-library/default-components/embed.mdx
             icon: fa-duotone fa-window-restore
-          - page: Endpoint Request Snippet
+          - page: Endpoint request snippet
             path: ./pages/component-library/default-components/endpoint-request-snippet.mdx
             icon: fa-duotone fa-arrow-up
             slug: request-snippet
-          - page: Endpoint Response Snippet
+          - page: Endpoint response snippet
             path: ./pages/component-library/default-components/endpoint-response-snippet.mdx
             icon: fa-duotone fa-arrow-down
             slug: response-snippet
-          - page: Endpoint Schema Snippet
+          - page: Endpoint schema snippet
             path: ./pages/component-library/default-components/endpoint-schema-snippet.mdx
             icon: fa-duotone fa-sitemap
             slug: schema-snippet
-          - page: Frames
+          - page: Frame
             path: ./pages/component-library/default-components/frames.mdx
             icon: fa-duotone fa-window-maximize
-          - page: Icons
+            slug: frames
+          - page: Icon
             path: ./pages/component-library/default-components/icons.mdx
             icon: fa-duotone fa-icons
-          - page: Parameter Fields
+            slug: icons
+          - page: Parameter field
             path: ./pages/component-library/default-components/parameter-fields.mdx
             icon: fa-duotone fa-list
-          - page: Runnable Endpoint
+            slug: parameter-fields
+          - page: Runnable endpoint
             path: ./pages/component-library/default-components/runnable-endpoint.mdx
             icon: fa-duotone fa-play-circle
-          - page: Steps
+          - page: Step
             path: ./pages/component-library/default-components/steps.mdx
             icon: fa-duotone fa-list-ol
-          - page: Sticky tables
+            slug: steps
+          - page: Sticky table
             path: ./pages/component-library/default-components/sticky-tables.mdx
             icon: fa-duotone fa-table
-          - page: Tabs
+            slug: sticky-tables
+          - page: Tab
             path: ./pages/component-library/default-components/tabs.mdx
             icon: fa-duotone fa-folder-open
-          - page: Tooltips
+            slug: tabs
+          - page: Tooltip
             path: ./pages/component-library/default-components/tooltips.mdx
             icon: fa-duotone fa-comment
+            slug: tooltips
       - page: Fern Editor
         path: ./pages/component-library/writing-content/visual-editor.mdx
         slug: fern-editor

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

@@ -3,9 +3,9 @@ title: Accordions
 description: Display expandable/collapsible options with browser search functionality
 ---
 
-The Accordion component creates expandable sections with searchable, SEO-friendly content that remains accessible even when collapsed. Use accordions for FAQs, documentation sections, settings panels, or any content where progressive disclosure improves readability.
+The `<Accordion>` component creates expandable sections with searchable, SEO-friendly content that remains accessible even when collapsed. Use accordions for FAQs, documentation sections, settings panels, or any content where progressive disclosure improves readability.
 
-You can use single Accordions or group multiple Accordions together with AccordionGroup.
+You can use single accordions or group multiple accordions together with `<AccordionGroup>`.
 
 ## Usage
 
@@ -20,7 +20,7 @@ You can use single Accordions or group multiple Accordions together with Accordi
 </AccordionGroup>
 </div>
 
-```jsx Markdown syntax
+```jsx Markdown
 <AccordionGroup>
   <Accordion title="Section 1" defaultOpen={true}>
     Content for section 1, expanded by default
@@ -33,7 +33,7 @@ You can use single Accordions or group multiple Accordions together with Accordi
 
 ## Variants
 
-Within each Accordion, you can embed images, videos, and other components (Callouts, Code Blocks, etc) within accordions for rich interactive content.
+Within each accordion, you can embed images, videos, and other components (callouts, code blocks, etc) within accordions for rich interactive content.
 
 ### Multimedia
 
@@ -43,7 +43,7 @@ Within each Accordion, you can embed images, videos, and other components (Callo
 </Frame>
 </Accordion>
 
-```jsx
+```jsx Markdown
 <Accordion title="Text content with multimedia">
 <Frame caption="Sample image">
   <img src="https://images.pexels.com/photos/1867601/pexels-photo-1867601.jpeg" alt="A sample image" />
@@ -55,14 +55,14 @@ Within each Accordion, you can embed images, videos, and other components (Callo
 
 <Accordion title="Nested components">
 <Note>
-  Here's a Callout nested in an Accordion
+  Here's a callout nested in an accordion
 </Note>
 </Accordion>
 
-```jsx
+```jsx Markdown
 <Accordion title="Nested components">
 <Note>
-  Here's a Callout nested in an Accordion
+  Here's a callout nested in an accordion
 </Note>
 </Accordion>
 ```
@@ -73,7 +73,7 @@ Within each Accordion, you can embed images, videos, and other components (Callo
   Use the `defaultOpen` property to have specific accordions expanded by default when the page loads. This is useful for highlighting important information or frequently accessed content.
 </Accordion>
 
-```jsx
+```jsx Markdown
 <Accordion title='Accordion open by default' defaultOpen={true}>
   Use the `defaultOpen` property to have specific accordions expanded by default when the page loads. This is useful for highlighting important information or frequently accessed content.
 </Accordion>

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

@@ -1,12 +1,12 @@
 ---
-title: Anchor
+title: Anchors
 description: Create linkable anchors for paragraphs, tables, and other content without headings
 ---
 
-The Anchor component creates direct links to specific content like paragraphs, tables, and code blocks. Use anchors when you need to reference non-heading content that doesn't automatically generate its own link.
+The `<Anchor>` component creates direct links to specific content like paragraphs, tables, and code blocks. Use anchors when you need to reference non-heading content that doesn't automatically generate its own link.
 
 <Note>
-  Headings automatically generate anchor links based on their text content, so you don't need to use the `<Anchor>` component for headings.
+  Headings automatically generate anchor links based on their text content, so you don't need to use the anchor component for headings.
 </Note>
 
 ## Usage
@@ -17,7 +17,7 @@ Wrap your content with the `<Anchor>` tag and assign it a custom anchor ID, whic
 <Anchor id="data">This sentence has a custom anchor named `#data`</Anchor>. You can access it via this URL: https://buildwithfern.com/learn/docs/writing-content/components/anchor#data.
 </div>
 
-```jsx Markdown syntax
+```jsx Markdown
 <Anchor id="data">This sentence has a custom anchor named `#data`</Anchor>. You can access it via this URL: https://buildwithfern.com/learn/docs/writing-content/components/anchor#data.
 ```
 
@@ -37,7 +37,7 @@ Wrap your content with the `<Anchor>` tag and assign it a custom anchor ID, whic
 
 You can link directly to the [API endpoints table](#api-endpoints).
 
-```jsx
+```jsx Markdown
 <Anchor id="api-endpoints">
 
 | Endpoint | Method | Description |
@@ -68,7 +68,7 @@ def water_plant(plant_id, amount):
 
 Reference the [watering code example](#example-code) in your implementation.
 
-````jsx
+````jsx Markdown
 <Anchor id="example-code">
 
 ```python

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

@@ -1,17 +1,17 @@
 ---
-title: 'Aside'
+title: 'Asides'
 description: 'Push any content inside the Aside component to the right of the page in a sticky container'
 ---
 
-The Aside component creates a sticky container that floats content to the right of your page. Use it to showcase code examples, API snippets, or any supplementary content that should stay visible as users scroll.
+The `<Aside>` component creates a sticky container that floats content to the right of your page. Use it to showcase code examples, API snippets, or any supplementary content that should stay visible as users scroll.
 
 <Aside>
     <EndpointRequestSnippet endpoint='POST /chat/{domain}' />
 </Aside>
 
 ## Usage
 
-```jsx Markdown syntax
+```jsx Markdown
 <Aside>
     <EndpointRequestSnippet endpoint='POST /chat/{domain}' />
 </Aside>

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

@@ -3,7 +3,7 @@ title: Badges
 description: Display small labels for status, versions, and metadata inline with your content.
 ---
 
-Use the `Badge` component to display small pieces of information, such as status indicators, categories, versions, or release dates. To display longer notes, use the [Callouts component](/docs/writing-content/components/callouts). 
+Use the `<Badge>` component to display small pieces of information, such as status indicators, categories, versions, or release dates. To display longer notes, use [callouts](/docs/writing-content/components/callouts). 
 
 ## Usage
 

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

@@ -1,9 +1,9 @@
 ---
-title: 'Button'
+title: 'Buttons'
 description: 'Interactive button component with multiple variants and intents'
 ---
 
-The Button component renders interactive buttons with various styles, sizes, and intents.
+The `<Button>` component renders interactive buttons with various styles, sizes, and intents.
 
 ## Usage
 
@@ -29,20 +29,20 @@ The Button component renders interactive buttons with various styles, sizes, and
 
 <div className="space-y-4">
   <div className="space-x-2">
-    <Button intent="primary">Primary Button</Button>
-    <Button intent="success">Success Button</Button>
-    <Button intent="warning">Warning Button</Button>
-    <Button intent="danger">Danger Button</Button>
-    <Button intent="none">Plain Button</Button>
+    <Button intent="primary">Primary button</Button>
+    <Button intent="success">Success button</Button>
+    <Button intent="warning">Warning button</Button>
+    <Button intent="danger">Danger button</Button>
+    <Button intent="none">Plain button</Button>
   </div>
 </div>
 
-```jsx
-<Button intent="primary">Primary Button</Button>
-  <Button intent="success">Success Button</Button>
-  <Button intent="warning">Warning Button</Button>
-  <Button intent="danger">Danger Button</Button>
-  <Button intent="none">Plain Button</Button>
+```jsx Markdown
+<Button intent="primary">Primary button</Button>
+<Button intent="success">Success button</Button>
+<Button intent="warning">Warning button</Button>
+<Button intent="danger">Danger button</Button>
+<Button intent="none">Plain button</Button>
 ```
 ### Styles
 
@@ -52,7 +52,7 @@ The Button component renders interactive buttons with various styles, sizes, and
   <Button intent="warning" mono>Monospaced</Button>
 </div>
 
-```jsx
+```jsx Markdown
 <Button intent="success" outlined large rounded>Large, outlined, rounded</Button>
 <Button intent="success" minimal>Minimal</Button>
 <Button intent="warning" mono>Monospaced</Button>
@@ -66,7 +66,7 @@ The Button component renders interactive buttons with various styles, sizes, and
   <Button large>Large Button</Button>
 </div>
 
-```jsx
+```jsx Markdown
 <Button small>Small Button</Button>
 <Button>Normal Button</Button>
 <Button large>Large Button</Button>
@@ -80,7 +80,7 @@ The Button component renders interactive buttons with various styles, sizes, and
   <Button icon="star" rightIcon="arrow-right">Favorite</Button>
 </div>
 
-```jsx
+```jsx Markdown
 <Button icon="download">Download</Button>
 <Button rightIcon="arrow-right">Continue</Button>
 <Button icon="star" rightIcon="arrow-right">Favorite</Button>
@@ -93,7 +93,7 @@ The Button component renders interactive buttons with various styles, sizes, and
   <Button disabled>Disabled Button</Button>
 </div>
 
-```jsx
+```jsx Markdown
 <Button href="/learn/docs/getting-started/overview">Link Button</Button>
 <Button disabled>Disabled Button</Button>
 ```

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

@@ -3,18 +3,18 @@ title: 'Callouts'
 description: 'Highlight important information, warnings, or tips in your documentation.'
 ---
 
-Callouts highlight important information, warnings, or tips in your documentation. Use Callouts to emphasize critical details that readers shouldn't miss, such as breaking changes, prerequisites, or helpful best practices.
+The `<Callout>` component highlights important information, warnings, or tips in your documentation. Use callouts to emphasize critical details that readers shouldn't miss, such as breaking changes, prerequisites, or helpful best practices.
 
-To display very short pieces of information like status indicators and version numbers, use the [Badges component](/docs/writing-content/components/badges).
+To display very short pieces of information like status indicators and version numbers, use [badges](/docs/writing-content/components/badges).
 
 ## Usage
 
 <div className="highlight-frame">
-<Note>This adds a note in the content</Note>
+<Note>This adds a note in your documentation.</Note>
 </div>
 
 ```jsx Markdown
-<Note>This adds a note in the content</Note>
+<Note>This adds a note in your documentation.</Note>
 ```
 
 ## Variants
@@ -39,30 +39,15 @@ To display very short pieces of information like status indicators and version n
 <Check>This shows a checked status</Check>
 ```
 
-### Tip callouts
-
-<Tip>This suggests a helpful tip</Tip>
-<Check>This shows a checked status</Check>
-
-```jsx Markdown
-<Warning>This raises a warning to watch out for</Warning>
-<Success>This indicates a successful operation or positive outcome</Success>
-<Error>This indicates a potential error</Error>
-<Info>This draws attention to important information</Info>
-<Launch>This celebrates a product launch or other announcement</Launch>
-<Tip>This suggests a helpful tip</Tip>
-<Check>This shows a checked status</Check>
-```
-
 ### Custom icon
 
 <Warning title="Example callout" icon="skull-crossbones">
-This Callout uses a title and a custom Font Awesome icon. 
+This callout uses a title and a custom Font Awesome icon. 
 </Warning>
 
 ```jsx Markdown
 <Warning title="Example callout" icon="skull-crossbones">
-This Callout uses a title and a custom Font Awesome icon. 
+This callout uses a title and a custom Font Awesome icon. 
 </Warning>
 ```
 
@@ -73,11 +58,11 @@ This Callout uses a title and a custom Font Awesome icon.
 </ParamField>
 
 <ParamField path="title" type="string" required={false}>
-  The title of your Callout
+  The title of your callout
 </ParamField>
 
 <ParamField path="icon" type="string | ReactElement" required={false}>
-  The icon of your Callout. Can be:
+  The icon of your callout. Can be:
   - A [Font Awesome](https://fontawesome.com/icons) icon name
   - A React element
   - If not specified, uses a default icon based on the intent: