diff --git a/.changeset/stale-pianos-crash.md b/.changeset/stale-pianos-crash.md
new file mode 100644
index 000000000..27ed52e2e
--- /dev/null
+++ b/.changeset/stale-pianos-crash.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": "minor"
+---
+
+Add documentation for segmented control component
diff --git a/docs/ui/components/segmented-control.mdx b/docs/ui/components/segmented-control.mdx
new file mode 100644
index 000000000..382a1265e
--- /dev/null
+++ b/docs/ui/components/segmented-control.mdx
@@ -0,0 +1,201 @@
+---
+title: Segmented Control
+summary: A segmented control is a set of two or more segments, each of which functions as a mutually exclusive button. A segmented control is used to display a set of mutually exclusive options.
+---
+
+To create a segmented control, use the `nav` element with the `nav-segmented` class. Inside the `nav` element, add `button` or `a` elements with the `nav-link` class. The `nav-link` class is used to style the buttons as links.
+
+```html
+
+```
+
+See the example below to see how the segmented control looks.
+
+```html example centered background="white"
+
+```
+
+## Full width
+
+To make the segmented control full width, add the `w-100` class to the `nav` element. It will take up the full width of its parent container.
+
+```html
+
+```
+
+The results can be seen in the example below.
+
+```html example vcentered background="white"
+
+```
+
+## With emojis
+
+You can also use emojis in the segmented control. To do this, add the emoji inside the `button` element.
+
+```html example centered background="white"
+
+```
+
+## With icons
+
+You can also use icons in the segmented control. To do this, add the icon inside the `button` element.
+
+
+```html example centered background="white"
+
+```
+
+## Vertical direction
+
+To create a vertical segmented control, add the `nav-segmented-vertical` class to the `nav` element.
+
+```html
+
+```
+
+The results can be seen in the example below.
+
+```html example centered background="white"
+
+```
+
+## Sizes
+
+You can also change the size of the segmented control. To do this, add the `nav-sm` or `nv-lg` class to the `nav` element. The `nav-sm` class will make the segmented control smaller, while the `nav-lg` class will make it larger.
+
+```html
+
+```
+
+The results can be seen in the examples below.
+
+```html example vertical centered background="white" separated
+
+
+
+```
\ No newline at end of file