diff --git a/docs/_sidebar.md b/docs/_sidebar.md
index e6eaaea66..14e1dfaaa 100644
--- a/docs/_sidebar.md
+++ b/docs/_sidebar.md
@@ -1,74 +1,74 @@
- Getting Started
- [Overview](/)
- - [Installation](/getting-started/installation.md)
- - [Usage](/getting-started/usage.md)
- - [Customizing](/getting-started/customizing.md)
- - [Themes](/getting-started/themes.md)
+ - [Installation](/getting-started/installation)
+ - [Usage](/getting-started/usage)
+ - [Customizing](/getting-started/customizing)
+ - [Themes](/getting-started/themes)
- Resources
- - [Community](/resources/community.md)
- - [Contributing](/resources/contributing.md)
- - [Changelog](/resources/changelog.md)
+ - [Community](/resources/community)
+ - [Contributing](/resources/contributing)
+ - [Changelog](/resources/changelog)
- Components
- - [Alert](/components/alert.md)
- - [Avatar](/components/avatar.md)
- - [Badge](/components/badge.md)
- - [Button](/components/button.md)
- - [Button Group](/components/button-group.md)
- - [Card](/components/card.md)
- - [Checkbox](/components/checkbox.md)
- - [Color Picker](/components/color-picker.md)
- - [Details](/components/details.md)
- - [Dialog](/components/dialog.md)
- - [Drawer](/components/drawer.md)
- - [Dropdown](/components/dropdown.md)
- - [Form](/components/form.md)
- - [Icon](/components/icon.md)
- - [Icon Button](/components/icon-button.md)
- - [Image Comparer](/components/image-comparer.md)
- - [Input](/components/input.md)
- - [Menu](/components/menu.md)
- - [Menu Divider](/components/menu-divider.md)
- - [Menu Item](/components/menu-item.md)
- - [Menu Label](/components/menu-label.md)
- - [Progress Bar](/components/progress-bar.md)
- - [Progress Ring](/components/progress-ring.md)
- - [Radio](/components/radio.md)
- - [Radio Group](/components/radio-group.md)
- - [Range](/components/range.md)
- - [Rating](/components/rating.md)
- - [Select](/components/select.md)
- - [Skeleton](/components/skeleton.md)
- - [Spinner](/components/spinner.md)
- - [Switch](/components/switch.md)
- - [Tab Group](/components/tab-group.md)
- - [Tab](/components/tab.md)
- - [Tab Panel](/components/tab-panel.md)
- - [Tag](/components/tag.md)
- - [Textarea](/components/textarea.md)
- - [Tooltip](/components/tooltip.md)
+ - [Alert](/components/alert)
+ - [Avatar](/components/avatar)
+ - [Badge](/components/badge)
+ - [Button](/components/button)
+ - [Button Group](/components/button-group)
+ - [Card](/components/card)
+ - [Checkbox](/components/checkbox)
+ - [Color Picker](/components/color-picker)
+ - [Details](/components/details)
+ - [Dialog](/components/dialog)
+ - [Drawer](/components/drawer)
+ - [Dropdown](/components/dropdown)
+ - [Form](/components/form)
+ - [Icon](/components/icon)
+ - [Icon Button](/components/icon-button)
+ - [Image Comparer](/components/image-comparer)
+ - [Input](/components/input)
+ - [Menu](/components/menu)
+ - [Menu Divider](/components/menu-divider)
+ - [Menu Item](/components/menu-item)
+ - [Menu Label](/components/menu-label)
+ - [Progress Bar](/components/progress-bar)
+ - [Progress Ring](/components/progress-ring)
+ - [Radio](/components/radio)
+ - [Radio Group](/components/radio-group)
+ - [Range](/components/range)
+ - [Rating](/components/rating)
+ - [Select](/components/select)
+ - [Skeleton](/components/skeleton)
+ - [Spinner](/components/spinner)
+ - [Switch](/components/switch)
+ - [Tab Group](/components/tab-group)
+ - [Tab](/components/tab)
+ - [Tab Panel](/components/tab-panel)
+ - [Tag](/components/tag)
+ - [Textarea](/components/textarea)
+ - [Tooltip](/components/tooltip)
- Utilities
- - [Animation](/components/animation.md)
- - [Format Bytes](/components/format-bytes.md)
- - [Format Date](/components/format-date.md)
- - [Format Number](/components/format-number.md)
- - [Include](/components/include.md)
- - [QR Code](/components/qr-code.md)
- - [Relative Time](/components/relative-time.md)
- - [Resize Observer](/components/resize-observer.md)
- - [Responsive Media](/components/responsive-media.md)
+ - [Animation](/components/animation)
+ - [Format Bytes](/components/format-bytes)
+ - [Format Date](/components/format-date)
+ - [Format Number](/components/format-number)
+ - [Include](/components/include)
+ - [QR Code](/components/qr-code)
+ - [Relative Time](/components/relative-time)
+ - [Resize Observer](/components/resize-observer)
+ - [Responsive Media](/components/responsive-media)
- Design Tokens
- - [Typography](/tokens/typography.md)
- - [Color](/tokens/color.md)
- - [Spacing](/tokens/spacing.md)
- - [Elevation](/tokens/elevation.md)
- - [Border Radius](/tokens/border-radius.md)
- - [Transition](/tokens/transition.md)
- - [Z-index](/tokens/z-index.md)
+ - [Typography](/tokens/typography)
+ - [Color](/tokens/color)
+ - [Spacing](/tokens/spacing)
+ - [Elevation](/tokens/elevation)
+ - [Border Radius](/tokens/border-radius)
+ - [Transition](/tokens/transition)
+ - [Z-index](/tokens/z-index)
- Tutorials
- - [Integrating with NextJS](/tutorials/integrating-with-nextjs.md)
- - [Integrating with Rails](/tutorials/integrating-with-rails.md)
\ No newline at end of file
+ - [Integrating with NextJS](/tutorials/integrating-with-nextjs)
+ - [Integrating with Rails](/tutorials/integrating-with-rails)
\ No newline at end of file
diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md
index 58322c5f2..10a6f8adf 100644
--- a/docs/components/checkbox.md
+++ b/docs/components/checkbox.md
@@ -8,7 +8,7 @@ Checkboxes allow the user to toggle an option on or off.
Checkbox
```
-?> This component doesn't work with standard forms. Use [``](/components/form.md) instead.
+?> This component doesn't work with standard forms. Use [``](/components/form) instead.
## Examples
diff --git a/docs/components/dropdown.md b/docs/components/dropdown.md
index 5deb9379e..ce972c1f4 100644
--- a/docs/components/dropdown.md
+++ b/docs/components/dropdown.md
@@ -6,7 +6,7 @@ Dropdowns expose additional content that "drops down" in a panel.
Dropdowns consist of a trigger and a panel. By default, activating the trigger will expose the panel and interacting outside of the panel will close it.
-Dropdowns are designed to work well with [menus](/components/menu.md) to provide a list of options the user can select from. However, dropdowns can also be used in lower-level applications (e.g. [color picker](/components/color-picker.md) and [select](/components/select.md)). The API gives you complete control over showing, hiding, and positioning the panel.
+Dropdowns are designed to work well with [menus](/components/menu) to provide a list of options the user can select from. However, dropdowns can also be used in lower-level applications (e.g. [color picker](/components/color-picker) and [select](/components/select)). The API gives you complete control over showing, hiding, and positioning the panel.
```html preview
@@ -123,7 +123,7 @@ Dropdown panels will be clipped if they're inside a container that has `overflow
### Getting the Selected Item
-When dropdowns are used with [menus](/components/menu.md), you can listen for the `sl-select` event to determine which menu item was selected. The menu item element will be exposed in `event.detail.item`. You can set `value` props to make it easier to identify commands.
+When dropdowns are used with [menus](/components/menu), you can listen for the `sl-select` event to determine which menu item was selected. The menu item element will be exposed in `event.detail.item`. You can set `value` props to make it easier to identify commands.
```html preview
diff --git a/docs/components/input.md b/docs/components/input.md
index 926d56c96..c182ee52e 100644
--- a/docs/components/input.md
+++ b/docs/components/input.md
@@ -8,7 +8,7 @@ Inputs collect data from the user.
```
-?> This component doesn't work with standard forms. Use [``](/components/form.md) instead.
+?> This component doesn't work with standard forms. Use [``](/components/form) instead.
?> Please refer to the section on [form control validation](/components/form?id=form-control-validation) to learn how to do client-side validation.
diff --git a/docs/components/menu.md b/docs/components/menu.md
index 1ca68f07f..af7f8fbd6 100644
--- a/docs/components/menu.md
+++ b/docs/components/menu.md
@@ -4,7 +4,7 @@
Menus provide a list of options for the user to choose from.
-You can use [menu items](/components/menu-item.md), [menu dividers](/components/menu-divider.md), and [menu labels](/components/menu-label.md) to compose a menu.
+You can use [menu items](/components/menu-item), [menu dividers](/components/menu-divider), and [menu labels](/components/menu-label) to compose a menu.
```html preview
diff --git a/docs/components/radio.md b/docs/components/radio.md
index 86e6bbe10..5e59540dd 100644
--- a/docs/components/radio.md
+++ b/docs/components/radio.md
@@ -14,7 +14,7 @@ Radios are designed to be used with [radio groups](/components/radio-group). As
```
-?> This component doesn't work with standard forms. Use [``](/components/form.md) instead.
+?> This component doesn't work with standard forms. Use [``](/components/form) instead.
## Examples
diff --git a/docs/components/range.md b/docs/components/range.md
index 37d9e9d49..9b5f66d7c 100644
--- a/docs/components/range.md
+++ b/docs/components/range.md
@@ -8,7 +8,7 @@ Ranges allow the user to select a single value within a given range using a slid
```
-?> This component doesn't work with standard forms. Use [``](/components/form.md) instead.
+?> This component doesn't work with standard forms. Use [``](/components/form) instead.
## Examples
diff --git a/docs/components/select.md b/docs/components/select.md
index 82a2056e2..5101dd269 100644
--- a/docs/components/select.md
+++ b/docs/components/select.md
@@ -16,7 +16,7 @@ Selects allow you to choose one or more items from a dropdown menu.
```
-?> This component doesn't work with standard forms. Use [``](/components/form.md) instead.
+?> This component doesn't work with standard forms. Use [``](/components/form) instead.
## Examples
diff --git a/docs/components/switch.md b/docs/components/switch.md
index e7761403a..06a628b7a 100644
--- a/docs/components/switch.md
+++ b/docs/components/switch.md
@@ -8,7 +8,7 @@ Switches allow the user to toggle an option on or off.
Switch
```
-?> This component doesn't work with standard forms. Use [``](/components/form.md) instead.
+?> This component doesn't work with standard forms. Use [``](/components/form) instead.
## Examples
diff --git a/docs/components/tab-group.md b/docs/components/tab-group.md
index 90e8b9c97..4a6ba4db9 100644
--- a/docs/components/tab-group.md
+++ b/docs/components/tab-group.md
@@ -4,7 +4,7 @@
Tab groups organize content into a container that shows one section at a time.
-Tab groups make use of [tabs](/components/tab.md) and [tab panels](/components/tab-panel.md). Each tab must be slotted into the `nav` slot and its `panel` must refer to a tab panel of the same name.
+Tab groups make use of [tabs](/components/tab) and [tab panels](/components/tab-panel). Each tab must be slotted into the `nav` slot and its `panel` must refer to a tab panel of the same name.
```html preview
diff --git a/docs/components/tab-panel.md b/docs/components/tab-panel.md
index bc69b23e3..9f9657747 100644
--- a/docs/components/tab-panel.md
+++ b/docs/components/tab-panel.md
@@ -18,6 +18,6 @@ Tab panels are used inside tab groups to display content.
```
-?> Additional demonstrations can be found in the [tab group examples](/components/tab-group.md).
+?> Additional demonstrations can be found in the [tab group examples](/components/tab-group).
[component-metadata:sl-tab-panel]
diff --git a/docs/components/tab.md b/docs/components/tab.md
index 796004f4c..18cf771ca 100644
--- a/docs/components/tab.md
+++ b/docs/components/tab.md
@@ -11,6 +11,6 @@ Tabs are used inside tab groups to represent tab panels.
Disabled
```
-?> Additional demonstrations can be found in the [tab group examples](/components/tab-group.md).
+?> Additional demonstrations can be found in the [tab group examples](/components/tab-group).
[component-metadata:sl-tab]
diff --git a/docs/components/textarea.md b/docs/components/textarea.md
index d486e2b8c..f3b30e953 100644
--- a/docs/components/textarea.md
+++ b/docs/components/textarea.md
@@ -8,7 +8,7 @@ Textareas collect data from the user and allow multiple lines of text.
```
-?> This component doesn't work with standard forms. Use [``](/components/form.md) instead.
+?> This component doesn't work with standard forms. Use [``](/components/form) instead.
?> Please refer to the section on [form control validation](/components/form?id=form-control-validation) to learn how to do client-side validation.
diff --git a/docs/getting-started/installation.md b/docs/getting-started/installation.md
index cf53087a2..d5cf74ac3 100644
--- a/docs/getting-started/installation.md
+++ b/docs/getting-started/installation.md
@@ -11,7 +11,7 @@ The easiest way to install Shoelace is with the CDN. Just add the following tags
```
-Now you can [start using Shoelace!](/getting-started/usage.md)
+Now you can [start using Shoelace!](/getting-started/usage)
## Local Installation
diff --git a/docs/getting-started/overview.md b/docs/getting-started/overview.md
index ff6d058bf..94bc240ed 100644
--- a/docs/getting-started/overview.md
+++ b/docs/getting-started/overview.md
@@ -39,7 +39,7 @@ Now you have access to all of Shoelace's components! Try adding a button:
Click me
```
-See the [installation instructions](getting-started/installation.md) for more details and other ways to install Shoelace.
+See the [installation instructions](getting-started/installation) for more details and other ways to install Shoelace.
## New to Web Components?
diff --git a/docs/getting-started/usage.md b/docs/getting-started/usage.md
index d5ef2bfd1..d683456e2 100644
--- a/docs/getting-started/usage.md
+++ b/docs/getting-started/usage.md
@@ -112,7 +112,7 @@ For example, `