diff --git a/README.md b/README.md
index 4e10e99..64a3fab 100644
--- a/README.md
+++ b/README.md
@@ -1,14 +1,16 @@
-# ink-divider
-
+
+# ${\color{gray}\tiny──────}$ ink-divider ${\color{gray}\tiny──────}$
👩🏼🎨 Divider component for [Ink](https://github.com/vadimdemedes/ink).
-## Install
+## 📥 Install
```bash
npm i ink-divider
```
-## Usage
+## 🚀 Usage
+
+Here is the basic usage:
```jsx
import { render } from 'ink'
@@ -19,10 +21,15 @@ render()
// ─────────── Title ───────────
```
+The `` component can also automatically adjust to the width of the container!
+We advise you to view this example - [`examples/auto-grow.tsx`](https://raw.githubusercontent.com/JureSotosek/ink-divider/refs/heads/master/examples/auto-grow.tsx), more examples in the [`examples`](https://github.com/JureSotosek/ink-divider/tree/master/exampes) folder
+
-
+
+
+---
-## Props
+## ⚙️ Props
### title
diff --git a/examples/advanced.tsx b/examples/advanced.tsx
index 2b9c9d7..de55412 100644
--- a/examples/advanced.tsx
+++ b/examples/advanced.tsx
@@ -1,8 +1,17 @@
import { render } from 'ink'
import Divider from '../src'
+/**
+ * Component that renders a divider with custom settings.
+ * Demonstrates the usage of `title`, `dividerChar`, `dividerColor`, and `width` props.
+ */
const Advanced = () => (
-
+
)
render()
diff --git a/examples/auto-grow.tsx b/examples/auto-grow.tsx
new file mode 100644
index 0000000..882cbf1
--- /dev/null
+++ b/examples/auto-grow.tsx
@@ -0,0 +1,25 @@
+import { render, Box, Text } from 'ink'
+import Divider from '../src'
+
+const lorem = (
+ Lorem ipsum dolor sit amet consectetur adipisicing elit.
+)
+
+/**
+ * Renders a Box with a divider and lorem ipsum text.
+ * Demonstrates Divider's ability to automatically adjust its width to the parent container.
+ */
+render(
+
+ {lorem}
+ {/* Divider automatically stretches to fill the Box width */}
+
+ {lorem}
+
+)
diff --git a/examples/basic.tsx b/examples/basic.tsx
index 48a7d8d..25c7376 100644
--- a/examples/basic.tsx
+++ b/examples/basic.tsx
@@ -1,6 +1,10 @@
import { render } from 'ink'
import Divider from '../src'
-const Basic = () =>
+/**
+ * Basic Divider component example.
+ * Demonstrates rendering a divider with a title and specified width.
+ */
+const Basic = () => // Divider with title and width
render()
diff --git a/media/example.png b/media/example.png
index 0a7c17a..0a720fd 100644
Binary files a/media/example.png and b/media/example.png differ
diff --git a/package.json b/package.json
index 64118e2..96ae11c 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,11 @@
"preversion": "bun run test && bun run format && git add .",
"build": "bun build ./src/index.tsx --minify --outdir ./dist --target node --external=yoga-wasm-web",
"prepublishOnly": "bun run build",
- "prepare": "husky"
+ "prepare": "husky",
+ "examples:basic": "bun ./examples/basic.tsx",
+ "examples:advanced": "bun ./examples/advanced.tsx",
+ "examples:auto-grow": "bun ./examples/auto-grow.tsx",
+ "examples": "bun run examples:basic && echo && bun run examples:advanced && echo && bun run examples:auto-grow"
},
"dependencies": {
"ink": "^5.1.0",