offline docs

offline-docs/daisyui/divider.md

@@ -0,0 +1,92 @@
+# daisyUI Documentation - Divider Component
+
+Divider will be used to separate content vertically or horizontally.
+
+## Examples
+
+### Basic Divider
+
+```html
+<div class="flex w-full flex-col">
+  <div class="card bg-base-300 rounded-box grid h-20 place-items-center">content</div>
+  <div class="divider">OR</div>
+  <div class="card bg-base-300 rounded-box grid h-20 place-items-center">content</div>
+</div>
+```
+
+### Horizontal Divider
+
+```html
+<div class="flex w-full">
+  <div class="card bg-base-300 rounded-box grid h-20 grow place-items-center">content</div>
+  <div class="divider divider-horizontal">OR</div>
+  <div class="card bg-base-300 rounded-box grid h-20 grow place-items-center">content</div>
+</div>
+```
+
+### Divider with No Text
+
+```html
+<div class="flex w-full flex-col">
+  <div class="card bg-base-300 rounded-box grid h-20 place-items-center">content</div>
+  <div class="divider"></div>
+  <div class="card bg-base-300 rounded-box grid h-20 place-items-center">content</div>
+</div>
+```
+
+### Responsive Divider
+
+```html
+<div class="flex w-full flex-col lg:flex-row">
+  <div class="card bg-base-300 rounded-box grid h-32 grow place-items-center">content</div>
+  <div class="divider lg:divider-horizontal">OR</div>
+  <div class="card bg-base-300 rounded-box grid h-32 grow place-items-center">content</div>
+</div>
+```
+
+### Divider with Colors
+
+```html
+<div class="flex w-full flex-col">
+  <div class="divider">Default</div>
+  <div class="divider divider-neutral">Neutral</div>
+  <div class="divider divider-primary">Primary</div>
+  <div class="divider divider-secondary">Secondary</div>
+  <div class="divider divider-accent">Accent</div>
+  <div class="divider divider-success">Success</div>
+  <div class="divider divider-warning">Warning</div>
+  <div class="divider divider-info">Info</div>
+  <div class="divider divider-error">Error</div>
+</div>
+```
+
+### Divider in Different Positions
+
+```html
+<div class="flex w-full flex-col">
+  <div class="divider divider-start">Start</div>
+  <div class="divider">Default</div>
+  <div class="divider divider-end">End</div>
+</div>
+```
+
+### Horizontal Divider in Different Positions
+
+```html
+<div class="flex w-full">
+  <div class="divider divider-horizontal divider-start">Start</div>
+  <div class="divider divider-horizontal">Default</div>
+  <div class="divider divider-horizontal divider-end">End</div>
+</div>
+```
+
+## Features
+
+- Separates content vertically or horizontally
+- Can be used with text or without text
+- Responsive design that adapts to different screen sizes
+- Multiple color options for visual distinction
+- Positioning options (start, default, end)
+- Horizontal and vertical variants
+
+This component is useful for creating clear visual separation between sections of content, especially in forms, layouts, or content organization.