notid/email-organizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

offline docs

Browse Source
This commit is contained in:
Bryce
2025-08-13 09:33:19 -07:00
parent 2a451ce840
commit b7801a0caa
43 changed files with 4617 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
offline-docs/daisyui/accordion.md Normal file
View File

@@ -0,0 +1,68 @@
# daisyUI Accordion Component Documentation
## Overview
The Accordion component is used for showing and hiding content, but only one item can stay open at a time. It works with radio inputs where all radio inputs with the same name work together, allowing only one item to be open simultaneously.
## Key Features
- Only one accordion item can be open at a time
- Uses radio inputs for controlling which item is open
- Supports different icon styles: arrow, plus/minus
- Can be joined together using the `join` component
## Classes and Modifiers
| Class name | Type | Description |
|------------|------|-------------|
| collapse | Component | Base collapse class |
| collapse-title | Part | Title part of accordion item |
| collapse-content | Part | Content part of accordion item |
| collapse-arrow | Modifier | Adds arrow icon |
| collapse-plus | Modifier | Adds plus/minus icon |
| collapse-open | Modifier | Force open accordion item |
| collapse-close | Modifier | Force close accordion item |
## Usage Examples
### Basic Accordion
```html
<div class="collapse bg-base-100 border border-base-300">
<input type="radio" name="my-accordion-1" checked="checked" />
<div class="collapse-title font-semibold">How do I create an account?</div>
<div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
</div>
```
### Accordion with Arrow Icon
```html
<div class="collapse collapse-arrow bg-base-100 border border-base-300">
<input type="radio" name="my-accordion-2" checked="checked" />
<div class="collapse-title font-semibold">How do I create an account?</div>
<div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
</div>
```
### Accordion with Plus/Minus Icon
```html
<div class="collapse collapse-plus bg-base-100 border border-base-300">
<input type="radio" name="my-accordion-3" checked="checked" />
<div class="collapse-title font-semibold">How do I create an account?</div>
<div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
</div>
```
### Joined Accordion Items
```html
<div class="join join-vertical bg-base-100">
<div class="collapse collapse-arrow join-item border-base-300 border">
<input type="radio" name="my-accordion-4" checked="checked" />
<div class="collapse-title font-semibold">How do I create an account?</div>
<div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
</div>
</div>
```
## Important Notes
- All radio inputs with the same name work together to control the accordion behavior
- Only one item can be open at a time within the same group
- Use different names for radio inputs if you have multiple sets of accordions on the same page
- The accordion uses the same styling as the collapse component but with radio input controls

160
offline-docs/daisyui/alert.md Normal file
View File

@@ -0,0 +1,160 @@
# Alert Component
Alert informs users about important events.
| Class name | Type | |
| --- | --- | --- |
| alert | Component | Container element |
| alert-outline | Style | outline style |
| alert-dash | Style | dash outline style |
| alert-soft | Style | soft style |
| alert-info | Color | info color |
| alert-success | Color | success color |
| alert-warning | Color | warning color |
| alert-error | Color | error color |
| alert-vertical | direction | Vertical layout, good for mobile |
| alert-horizontal | direction | Horizontal layout, good for desktop |
#### Alert
```
<div role="alert" class="$$alert">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info h-6 w-6 shrink-0">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span>12 unread messages. Tap to see.</span>
</div>
```
#### Info color
```
<div role="alert" class="$$alert $$alert-info">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="h-6 w-6 shrink-0 stroke-current">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span>New software update available.</span>
</div>
```
#### Success color
```
<div role="alert" class="$$alert $$alert-success">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>Your purchase has been confirmed!</span>
</div>
```
#### Warning color
```
<div role="alert" class="$$alert $$alert-warning">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<span>Warning: Invalid email address!</span>
</div>
```
#### Error color
```
<div role="alert" class="$$alert $$alert-error">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>Error! Task failed successfully.</span>
</div>
```
#### Alert soft style
```
<div role="alert" class="$$alert $$alert-info $$alert-soft">
<span>12 unread messages. Tap to see.</span>
</div>
<div role="alert" class="$$alert $$alert-success $$alert-soft">
<span>Your purchase has been confirmed!</span>
</div>
<div role="alert" class="$$alert $$alert-warning $$alert-soft">
<span>Warning: Invalid email address!</span>
</div>
<div role="alert" class="$$alert $$alert-error $$alert-soft">
<span>Error! Task failed successfully.</span>
</div>
```
#### Alert outline style
```
<div role="alert" class="$$alert $$alert-info $$alert-outline">
<span>12 unread messages. Tap to see.</span>
</div>
<div role="alert" class="$$alert $$alert-success $$alert-outline">
<span>Your purchase has been confirmed!</span>
</div>
<div role="alert" class="$$alert $$alert-warning $$alert-outline">
<span>Warning: Invalid email address!</span>
</div>
<div role="alert" class="$$alert $$alert-error $$alert-outline">
<span>Error! Task failed successfully.</span>
</div>
```
#### Alert dash style
```
<div role="alert" class="$$alert $$alert-info $$alert-dash">
<span>12 unread messages. Tap to see.</span>
</div>
<div role="alert" class="$$alert $$alert-success $$alert-dash">
<span>Your purchase has been confirmed!</span>
</div>
<div role="alert" class="$$alert $$alert-warning $$alert-dash">
<span>Warning: Invalid email address!</span>
</div>
<div role="alert" class="$$alert $$alert-error $$alert-dash">
<span>Error! Task failed successfully.</span>
</div>
```
#### Alert with buttons + responsive
```
<div role="alert" class="$$alert $$alert-vertical sm:$$alert-horizontal">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info h-6 w-6 shrink-0">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span>we use cookies for no reason.</span>
<div>
<button class="$$btn $$btn-sm">Deny</button>
<button class="$$btn $$btn-sm $$btn-primary">Accept</button>
</div>
</div>
```
#### Alert with title and description
```
<div role="alert" class="$$alert $$alert-vertical sm:$$alert-horizontal">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info h-6 w-6 shrink-0">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<div>
<h3 class="font-bold">New message!</h3>
<div class="text-xs">You have 1 unread message</div>
</div>
<button class="$$btn $$btn-sm">See</button>
</div>
```
![daisyUI store](https://img.daisyui.com/images/store/nexus.webp)
## NEXUS Official daisyUI Dashboard Template
## Available on daisyUI store
[More details](/store)

155
offline-docs/daisyui/avatar.md Normal file
View File

@@ -0,0 +1,155 @@
# Avatar Component
Avatars are used to show a thumbnail representation of an individual or business in the interface.
| Class name | Type | |
| --- | --- | --- |
| avatar | Component | Avatar |
| avatar-group | Component | Container for multiple avatars |
| avatar-online | Modifier | shows a green dot as online indicator |
| avatar-offline | Modifier | shows a gray dot as offline indicator |
| avatar-placeholder | Modifier | To show letters as avatar placeholder |
#### Avatar
```
<div class="$$avatar">
<div class="w-24 rounded">
<img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
</div>
</div>
```
#### Avatar in custom sizes
```
<div class="$$avatar">
<div class="w-32 rounded">
<img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
</div>
</div>
<div class="$$avatar">
<div class="w-20 rounded">
<img
src="https://img.daisyui.com/images/profile/demo/[email protected]"
alt="Tailwind-CSS-Avatar-component"
/>
</div>
</div>
<div class="$$avatar">
<div class="w-16 rounded">
<img
src="https://img.daisyui.com/images/profile/demo/[email protected]"
alt="Tailwind-CSS-Avatar-component"
/>
</div>
</div>
<div class="$$avatar">
<div class="w-8 rounded">
<img
src="https://img.daisyui.com/images/profile/demo/[email protected]"
alt="Tailwind-CSS-Avatar-component"
/>
</div>
</div>
```
#### Avatar rounded
```
<div class="$$avatar">
<div class="w-24 rounded-xl">
<img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
</div>
</div>
<div class="$$avatar">
<div class="w-24 rounded-full">
<img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
</div>
</div>
```
#### Avatar with mask
```
<div class="$$avatar">
<div class="$$mask $$mask-heart w-24">
<img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
</div>
</div>
<div class="$$avatar">
<div class="$$mask $$mask-squircle w-24">
<img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
</div>
</div>
<div class="$$avatar">
<div class="$$mask $$mask-hexagon-2 w-24">
<img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
</div>
</div>
```
#### Avatar group
```
<div class="$$avatar-group -space-x-6">
<div class="$$avatar">
<div class="w-12">
<img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
</div>
</div>
<div class="$$avatar">
<div class="w-12">
<img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
</div>
</div>
<div class="$$avatar">
<div class="w-12">
<img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
</div>
</div>
<div class="$$avatar">
<div class="w-12">
<img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
</div>
</div>
</div>
```
#### Avatar with online/offline indicator
```
<div class="$$avatar $$avatar-online">
<div class="w-24 rounded-full">
<img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
</div>
</div>
<div class="$$avatar $$avatar-offline">
<div class="w-24 rounded-full">
<img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
</div>
</div>
```
#### Avatar with placeholder
```
<div class="$$avatar $$avatar-placeholder">
<div class="w-24 rounded-full bg-neutral text-neutral-content">
<span class="text-xl">A</span>
</div>
</div>
<div class="$$avatar $$avatar-placeholder">
<div class="w-24 rounded-full bg-primary text-primary-content">
<span class="text-xl">B</span>
</div>
</div>
```
![daisyUI store](https://img.daisyui.com/images/store/nexus.webp)
## NEXUS Official daisyUI Dashboard Template
## Available on daisyUI store
[More details](/store)

174
offline-docs/daisyui/badge.md Normal file
View File

@@ -0,0 +1,174 @@
# Badge Component
Badges are used to inform the user of the status of specific data.
| Class name | Type | |
| --- | --- | --- |
| badge | Component | Container element |
| badge-outline | Style | outline style |
| badge-dash | Style | dash outline style |
| badge-soft | Style | soft style |
| badge-ghost | Style | ghost style |
| badge-neutral | Color | neutral color |
| badge-primary | Color | primary color |
| badge-secondary | Color | secondary color |
| badge-accent | Color | accent color |
| badge-info | Color | info color |
| badge-success | Color | success color |
| badge-warning | Color | warning color |
| badge-error | Color | error color |
| badge-xs | Size | extra small size |
| badge-sm | Size | small size |
| badge-md | Size | medium size (default) |
| badge-lg | Size | large size |
| badge-xl | Size | extra large size |
#### Badge
Badge
```
<span class="$$badge">Badge</span>
```
```
<span class="$$badge">Badge</span>
```
#### Badge sizes
```
<div class="$$badge $$badge-xs">Xsmall</div>
<div class="$$badge $$badge-sm">Small</div>
<div class="$$badge $$badge-md">Medium</div>
<div class="$$badge $$badge-lg">Large</div>
<div class="$$badge $$badge-xl">Xlarge</div>
```
```
<div class="$$badge $$badge-xs">Xsmall</div>
<div class="$$badge $$badge-sm">Small</div>
<div class="$$badge $$badge-md">Medium</div>
<div class="$$badge $$badge-lg">Large</div>
<div class="$$badge $$badge-xl">Xlarge</div>
```
#### Badge with colors
```
<div class="$$badge $$badge-primary">Primary</div>
<div class="$$badge $$badge-secondary">Secondary</div>
<div class="$$badge $$badge-accent">Accent</div>
<div class="$$badge $$badge-neutral">Neutral</div>
<div class="$$badge $$badge-info">Info</div>
<div class="$$badge $$badge-success">Success</div>
<div class="$$badge $$badge-warning">Warning</div>
<div class="$$badge $$badge-error">Error</div>
```
```
<div class="$$badge $$badge-primary">Primary</div>
<div class="$$badge $$badge-secondary">Secondary</div>
<div class="$$badge $$badge-accent">Accent</div>
<div class="$$badge $$badge-neutral">Neutral</div>
<div class="$$badge $$badge-info">Info</div>
<div class="$$badge $$badge-success">Success</div>
<div class="$$badge $$badge-warning">Warning</div>
<div class="$$badge $$badge-error">Error</div>
```
#### Badge with soft style
```
<div class="$$badge $$badge-soft $$badge-primary">Primary</div>
<div class="$$badge $$badge-soft $$badge-secondary">Secondary</div>
<div class="$$badge $$badge-soft $$badge-accent">Accent</div>
<div class="$$badge $$badge-soft $$badge-info">Info</div>
<div class="$$badge $$badge-soft $$badge-success">Success</div>
<div class="$$badge $$badge-soft $$badge-warning">Warning</div>
<div class="$$badge $$badge-soft $$badge-error">Error</div>
```
```
<div class="$$badge $$badge-soft $$badge-primary">Primary</div>
<div class="$$badge $$badge-soft $$badge-secondary">Secondary</div>
<div class="$$badge $$badge-soft $$badge-accent">Accent</div>
<div class="$$badge $$badge-soft $$badge-info">Info</div>
<div class="$$badge $$badge-soft $$badge-success">Success</div>
<div class="$$badge $$badge-soft $$badge-warning">Warning</div>
<div class="$$badge $$badge-soft $$badge-error">Error</div>
```
#### Badge with outline style
```
<div class="$$badge $$badge-outline $$badge-primary">Primary</div>
<div class="$$badge $$badge-outline $$badge-secondary">Secondary</div>
<div class="$$badge $$badge-outline $$badge-accent">Accent</div>
<div class="$$badge $$badge-outline $$badge-info">Info</div>
<div class="$$badge $$badge-outline $$badge-success">Success</div>
<div class="$$badge $$badge-outline $$badge-warning">Warning</div>
<div class="$$badge $$badge-outline $$badge-error">Error</div>
```
```
<div class="$$badge $$badge-outline $$badge-primary">Primary</div>
<div class="$$badge $$badge-outline $$badge-secondary">Secondary</div>
<div class="$$badge $$badge-outline $$badge-accent">Accent</div>
<div class="$$badge $$badge-outline $$badge-info">Info</div>
<div class="$$badge $$badge-outline $$badge-success">Success</div>
<div class="$$badge $$badge-outline $$badge-warning">Warning</div>
<div class="$$badge $$badge-outline $$badge-error">Error</div>
```
#### Badge with dash style
```
<div class="$$badge $$badge-dash $$badge-primary">Primary</div>
<div class="$$badge $$badge-dash $$badge-secondary">Secondary</div>
<div class="$$badge $$badge-dash $$badge-accent">Accent</div>
<div class="$$badge $$badge-dash $$badge-info">Info</div>
<div class="$$badge $$badge-dash $$badge-success">Success</div>
<div class="$$badge $$badge-dash $$badge-warning">Warning</div>
<div class="$$badge $$badge-dash $$badge-error">Error</div>
```
```
<div class="$$badge $$badge-dash $$badge-primary">Primary</div>
<div class="$$badge $$badge-dash $$badge-secondary">Secondary</div>
<div class="$$badge $$badge-dash $$badge-accent">Accent</div>
<div class="$$badge $$badge-dash $$badge-info">Info</div>
<div class="$$badge $$badge-dash $$badge-success">Success</div>
<div class="$$badge $$badge-dash $$badge-warning">Warning</div>
<div class="$$badge $$badge-dash $$badge-error">Error</div>
```
#### Badge with ghost style
```
<div class="$$badge $$badge-ghost $$badge-primary">Primary</div>
<div class="$$badge $$badge-ghost $$badge-secondary">Secondary</div>
<div class="$$badge $$badge-ghost $$badge-accent">Accent</div>
<div class="$$badge $$badge-ghost $$badge-info">Info</div>
<div class="$$badge $$badge-ghost $$badge-success">Success</div>
<div class="$$badge $$badge-ghost $$badge-warning">Warning</div>
<div class="$$badge $$badge-ghost $$badge-error">Error</div>
```
```
<div class="$$badge $$badge-ghost $$badge-primary">Primary</div>
<div class="$$badge $$badge-ghost $$badge-secondary">Secondary</div>
<div class="$$badge $$badge-ghost $$badge-accent">Accent</div>
<div class="$$badge $$badge-ghost $$badge-info">Info</div>
<div class="$$badge $$badge-ghost $$badge-success">Success</div>
<div class="$$badge $$badge-ghost $$badge-warning">Warning</div>
<div class="$$badge $$badge-ghost $$badge-error">Error</div>
```
![daisyUI store](https://img.daisyui.com/images/store/nexus.webp)
## NEXUS Official daisyUI Dashboard Template
## Available on daisyUI store
[More details](/store)

100
offline-docs/daisyui/breadcrumbs.md Normal file
View File

@@ -0,0 +1,100 @@
# Breadcrumbs Component
Breadcrumbs helps users to navigate through the website.
| Class name | Type | |
| --- | --- | --- |
| breadcrumbs | Component | Wrapper around a <ul> |
#### Breadcrumbs
```
<div class="$$breadcrumbs text-sm">
<ul>
<li><a>Home</a></li>
<li><a>Documents</a></li>
<li>Add Document</li>
</ul>
</div>
```
#### Breadcrumbs with icons
```
<div class="$$breadcrumbs text-sm">
<ul>
<li>
<a>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
class="h-4 w-4 stroke-current">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
</svg>
Home
</a>
</li>
<li>
<a>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
class="h-4 w-4 stroke-current">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
</svg>
Documents
</a>
</li>
<li>
<span class="inline-flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
class="h-4 w-4 stroke-current">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
Add Document
</span>
</li>
</ul>
</div>
```
#### Breadcrumbs with max-width
If you set max-width or the list gets larger than the container it will scroll
```
<div class="$$breadcrumbs max-w-xs text-sm">
<ul>
<li>Long text 1</li>
<li>Long text 2</li>
<li>Long text 3</li>
<li>Long text 4</li>
<li>Long text 5</li>
</ul>
</div>
```
![daisyUI store](https://img.daisyui.com/images/store/nexus.webp)
## NEXUS Official daisyUI Dashboard Template
## Available on daisyUI store
[More details](/store)

42
offline-docs/daisyui/diff.md Normal file
View File

@@ -0,0 +1,42 @@
# daisyUI Documentation - Diff Component
Diff component shows a side-by-side comparison of two items.
## Examples
### Basic Diff
```html
<figure class="diff aspect-16/9" tabindex="0">
<div class="diff-item-1" role="img" tabindex="0">
<img alt="daisy" src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a.webp" />
</div>
<div class="diff-item-2" role="img">
<img alt="daisy" src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a-blur.webp" />
</div>
<div class="diff-resizer"></div>
</figure>
```
### Diff with Text
```html
<figure class="diff aspect-16/9" tabindex="0">
<div class="diff-item-1" role="img" tabindex="0">
<div class="bg-primary text-primary-content grid place-content-center text-9xl font-black">DAISY</div>
</div>
<div class="diff-item-2" role="img">
<div class="bg-base-200 grid place-content-center text-9xl font-black">DAISY</div>
</div>
<div class="diff-resizer"></div>
</figure>
```
## Features
- Shows side-by-side comparison of two items
- Can be used with images or text content
- Includes a resizer for adjusting the split point
- Responsive design
This component is useful for showing before/after comparisons, side-by-side content analysis, or visual differences between elements.

92
offline-docs/daisyui/divider.md Normal file
View File

@@ -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.

78
offline-docs/daisyui/dock.md Normal file
View File

@@ -0,0 +1,78 @@
# daisyUI Documentation - Dock Component
dock (also know as Bottom navigation or Bottom bar) is a UI element that provides navigation options to the user. Dock sticks to the bottom of the screen.
## Classes and Usage
### Core Classes:
- **dock** - The main dock component
- **dock-label** - Text label for Dock Item
- **dock-active** - Makes the Dock Item look active
- **dock-xs** - Extra Small Dock
- **dock-sm** - Small Dock
- **dock-md** - Medium Dock [Default]
- **dock-lg** - Large Dock
- **dock-xl** - Extra Large Dock
## Examples
### Basic Dock
```html
<div class="dock">
<button>
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><polyline points="1 11 12 2 23 11" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"></polyline><path d="m5,13v7c0,1.105.895,2,2,2h10c1.105,0,2-.895,2-2v-7" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path><line x1="12" y1="22" x2="12" y2="18" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></line></g></svg>
<span class="dock-label">Home</span>
</button>
<button class="dock-active">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><polyline points="3 14 9 14 9 17 15 17 15 14 21 14" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"></polyline><rect x="3" y="3" width="18" height="18" rx="2" ry="2" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></rect></g></svg>
<span class="dock-label">Inbox</span>
</button>
<button>
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></circle><path d="m22,13.25v-2.5l-2.318-.966c-.167-.581-.395-1.135-.682-1.654l.954-2.318-1.768-1.768-2.318.954c-.518-.287-1.073-.515-1.654-.682l-.966-2.318h-2.5l-.966,2.318c-.581.167-1.135.395-1.654.682l-2.318-.954-1.768,1.768.954,2.318c-.287.518-.515,1.073-.682,1.654l-2.318.966v2.5l2.318.966c.167.581.395,1.135.682,1.654l-.954,2.318,1.768,1.768,2.318-.954c.518.287,1.073.515,1.654.682l.966,2.318h2.5l.966-2.318c.581-.167,1.135-.395,1.654-.682l2.318.954,1.768-1.768-.954-2.318c.287-.518.515-1.073.682-1.654l2.318-.966Z" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path></g></svg>
<span class="dock-label">Settings</span>
</button>
</div>
```
### Dock with Different Sizes
```html
<!-- Extra Small -->
<div class="dock dock-xs">
<!-- dock items -->
</div>
<!-- Small -->
<div class="dock dock-sm">
<!-- dock items -->
</div>
<!-- Medium (default) -->
<div class="dock dock-md">
<!-- dock items -->
</div>
<!-- Large -->
<div class="dock dock-lg">
<!-- dock items -->
</div>
<!-- Extra Large -->
<div class="dock dock-xl">
<!-- dock items -->
</div>
```
## Features
- Bottom navigation or bottom bar UI element
- Sticks to the bottom of the screen
- Responsive design with different size options
- Active state indicator for current selection
- SVG icons support
- Requires viewport meta tag for iOS responsiveness
This component is particularly useful for mobile applications where you need persistent navigation at the bottom of the screen.

117
offline-docs/daisyui/drawer.md Normal file
View File

@@ -0,0 +1,117 @@
# daisyUI Documentation - Drawer Component
Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page.
## Structure
```
drawer // The root container
├── .drawer-toggle // A hidden checkbox to toggle the visibility of the sidebar
├── .drawer-content // All your page content goes here
│ ╰── // navbar, content, footer
│
╰── .drawer-side // Sidebar wrapper
├── .drawer-overlay // A dark overlay that covers the whole page when the drawer is open
╰── // Sidebar content (menu or anything)
```
## Classes and Usage
### Core Classes:
- **drawer** - The root container
- **drawer-toggle** - A hidden checkbox to toggle the visibility of the sidebar
- **drawer-content** - All your page content goes here
- **drawer-side** - Sidebar wrapper
- **drawer-overlay** - A dark overlay that covers the whole page when the drawer is open
- **drawer-open** - Opens the drawer on larger screens (use with responsive prefixes: sm, md, lg, xl)
## Examples
### Basic Drawer
```html
<div class="drawer">
<input id="my-drawer" type="checkbox" class="drawer-toggle" />
<div class="drawer-content">
<!-- Page content here -->
<label for="my-drawer" class="btn btn-primary drawer-button">Open drawer</label>
</div>
<div class="drawer-side">
<label for="my-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
<ul class="menu bg-base-200 text-base-content min-h-full w-80 p-4">
<!-- Sidebar content here -->
<li><a>Sidebar Item 1</a></li>
<li><a>Sidebar Item 2</a></li>
</ul>
</div>
</div>
```
### Navbar Menu for Desktop + Sidebar Drawer for Mobile
```html
<div class="drawer">
<input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
<div class="drawer-content flex flex-col">
<!-- Navbar -->
<div class="navbar bg-base-300 w-full">
<div class="flex-none lg:hidden">
<label for="my-drawer-3" aria-label="open sidebar" class="btn btn-square btn-ghost">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-6 w-6 stroke-current">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</label>
</div>
<div class="mx-2 flex-1 px-2">Navbar Title</div>
<div class="hidden flex-none lg:block">
<ul class="menu menu-horizontal">
<!-- Navbar menu content here -->
<li><a>Navbar Item 1</a></li>
<li><a>Navbar Item 2</a></li>
</ul>
</div>
</div>
<!-- Page content here -->
Content
</div>
<div class="drawer-side">
<label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"></label>
<ul class="menu bg-base-200 min-h-full w-80 p-4">
<!-- Sidebar content here -->
<li><a>Sidebar Item 1</a></li>
<li><a>Sidebar Item 2</a></li>
</ul>
</div>
</div>
```
### Drawer with Right Side
```html
<div class="drawer drawer-end">
<input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
<div class="drawer-content">
<!-- Page content here -->
<label for="my-drawer-2" class="btn btn-primary drawer-button">Open right drawer</label>
</div>
<div class="drawer-side">
<label for="my-drawer-2" aria-label="close sidebar" class="drawer-overlay"></label>
<ul class="menu bg-base-200 text-base-content min-h-full w-80 p-4">
<!-- Sidebar content here -->
<li><a>Sidebar Item 1</a></li>
<li><a>Sidebar Item 2</a></li>
</ul>
</div>
</div>
```
## Features
- Can show/hide a sidebar on the left or right side of the page
- Responsive design that works on different screen sizes
- Uses a hidden checkbox to control visibility
- Dark overlay when drawer is open
- Can be opened on larger screens using responsive classes
- Works with existing navigation components
This component is useful for creating mobile-friendly navigation with collapsible sidebars, dashboards, or any layout that benefits from a sliding panel interface.

97
offline-docs/daisyui/dropdown.md Normal file
View File

@@ -0,0 +1,97 @@
# daisyUI Documentation - Dropdown Component
Dropdown can open a menu or any other element when the button is clicked.
## Classes and Usage
### Core Classes:
- **dropdown** - The main dropdown container
- **dropdown-toggle** - A hidden checkbox that controls the dropdown
- **dropdown-content** - The content of the dropdown (menu, etc.)
- **dropdown-open** - Opens the dropdown by default
- **dropdown-end** - Aligns the dropdown to the end
- **dropdown-start** - Aligns the dropdown to the start
- **dropdown-top** - Positions the dropdown above the trigger
- **dropdown-bottom** - Positions the dropdown below the trigger (default)
- **dropdown-left** - Positions the dropdown to the left of the trigger
- **dropdown-right** - Positions the dropdown to the right of the trigger
## Examples
### Basic Dropdown
```html
<div class="dropdown">
<label tabindex="0" class="btn">Dropdown</label>
<ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-4 w-52 p-2 shadow">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
```
### Dropdown with Button Toggle
```html
<div class="dropdown">
<button tabindex="0" class="btn">Dropdown</button>
<ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-4 w-52 p-2 shadow">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
```
### Dropdown with Arrow
```html
<div class="dropdown dropdown-end">
<label tabindex="0" class="btn">Dropdown</label>
<ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-4 w-52 p-2 shadow">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
```
### Dropdown with Positioning
```html
<!-- Top aligned -->
<div class="dropdown dropdown-top">
<label tabindex="0" class="btn">Top Dropdown</label>
<ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-4 w-52 p-2 shadow">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
<!-- Left aligned -->
<div class="dropdown dropdown-left">
<label tabindex="0" class="btn">Left Dropdown</label>
<ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-4 w-52 p-2 shadow">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
<!-- Right aligned -->
<div class="dropdown dropdown-right">
<label tabindex="0" class="btn">Right Dropdown</label>
<ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-4 w-52 p-2 shadow">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
```
## Features
- Opens a menu or any other element when the button is clicked
- Multiple positioning options (top, bottom, left, right)
- Alignment options (start, end)
- Can be opened by default with `dropdown-open` class
- Works with buttons or labels as triggers
- Responsive design
This component is useful for creating context menus, navigation dropdowns, user profile menus, and any interface element that requires a popup menu.

88
offline-docs/daisyui/fieldset.md Normal file
View File

@@ -0,0 +1,88 @@
# daisyUI Documentation - Fieldset Component
Fieldset is a container for grouping related form elements. It includes fieldset-legend as a title and label as a description.
## Classes and Usage
### Core Classes:
- **fieldset** - The main fieldset container
- **fieldset-legend** - The title of the fieldset
- **label** - Label for inputs (used for descriptions)
## Examples
### Basic Fieldset with Legend and Label
```html
<fieldset class="fieldset">
<legend class="fieldset-legend">Page title</legend>
<input type="text" class="input" placeholder="My awesome page" />
<p class="label">You can edit page title later on from settings</p>
</fieldset>
```
### Fieldset with Background and Border
```html
<fieldset class="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4">
<legend class="fieldset-legend">Page title</legend>
<input type="text" class="input" placeholder="My awesome page" />
<p class="label">You can edit page title later on from settings</p>
</fieldset>
```
### Fieldset with Multiple Inputs
```html
<fieldset class="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4">
<legend class="fieldset-legend">Page details</legend>
<label class="label">Title</label>
<input type="text" class="input" placeholder="My awesome page" />
<label class="label">Slug</label>
<input type="text" class="input" placeholder="my-awesome-page" />
<label class="label">Author</label>
<input type="text" class="input" placeholder="Name" />
</fieldset>
```
### Fieldset with Join Items
```html
<fieldset class="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4">
<legend class="fieldset-legend">Settings</legend>
<div class="join">
<input type="text" class="input join-item" placeholder="Product name" />
<button class="btn join-item">save</button>
</div>
</fieldset>
```
### Login Form with Fieldset
```html
<fieldset class="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4">
<legend class="fieldset-legend">Login</legend>
<label class="label">Email</label>
<input type="email" class="input" placeholder="Email" />
<label class="label">Password</label>
<input type="password" class="input" placeholder="Password" />
<button class="btn btn-neutral mt-4">Login</button>
</fieldset>
```
## Features
- Groups related form elements together
- Provides semantic structure for forms
- Uses fieldset-legend as the title
- Can include descriptive labels
- Works well with other daisyUI components like inputs and buttons
- Customizable with Tailwind classes
This component is useful for organizing form elements into logical groups, improving accessibility and user experience in complex forms.

90
offline-docs/daisyui/file-input.md Normal file
View File

@@ -0,0 +1,90 @@
# daisyUI Documentation - File Input Component
File Input is a an input field for uploading files.
## Classes and Usage
### Core Classes:
- **file-input** - For <input type="file"> element
- **file-input-ghost** - ghost style
- **file-input-neutral** - neutral color
- **file-input-primary** - primary color
- **file-input-secondary** - secondary color
- **file-input-accent** - accent color
- **file-input-info** - info color
- **file-input-success** - success color
- **file-input-warning** - warning color
- **file-input-error** - error color
- **file-input-xs** - Extra small size
- **file-input-sm** - Small size
- **file-input-md** - Medium size [Default]
- **file-input-lg** - Large size
- **file-input-xl** - Extra large size
## Examples
### Basic File Input
```html
<input type="file" class="file-input" />
```
### File Input Ghost Style
```html
<input type="file" class="file-input file-input-ghost" />
```
### File Input with Fieldset and Label
```html
<fieldset class="fieldset">
<legend class="fieldset-legend">Pick a file</legend>
<input type="file" class="file-input" />
<label class="label">Max size 2MB</label>
</fieldset>
```
### File Input Sizes
```html
<input type="file" class="file-input file-input-xs" />
<input type="file" class="file-input file-input-sm" />
<input type="file" class="file-input file-input-md" />
<input type="file" class="file-input file-input-lg" />
<input type="file" class="file-input file-input-xl" />
```
### File Input Colors
```html
<input type="file" class="file-input file-input-primary" />
<input type="file" class="file-input file-input-secondary" />
<input type="file" class="file-input file-input-accent" />
<input type="file" class="file-input file-input-neutral" />
<input type="file" class="file-input file-input-info" />
<input type="file" class="file-input file-input-success" />
<input type="file" class="file-input file-input-warning" />
<input type="file" class="file-input file-input-error" />
```
### Disabled File Input
```html
<input type="file" placeholder="You can't touch this" class="file-input" disabled />
```
## Features
- Special styling for file input elements
- Multiple size options (xs, sm, md, lg, xl)
- Multiple color variants
- Ghost style option
- Works with fieldset and label components
- Disabled state support
This component is useful for creating styled file upload inputs that blend seamlessly with the rest of your daisyUI interface.

47
offline-docs/daisyui/filter.md Normal file
View File

@@ -0,0 +1,47 @@
# daisyUI Documentation - Filter Component
Filter is a group of radio buttons. Choosing one of the options will hide the others and shows a reset button next to the chosen option.
## Classes and Usage
### Core Classes:
- **filter** - For a HTML <form> or a <div> element that includes radio buttons for filtering items
- **filter-reset** - An alternative to the reset button if you can't use a HTML form
## Examples
### Filter using HTML form, radio buttons and reset button
A HTML from for filtering items
```html
<form class="filter">
<input class="btn btn-square" type="reset" value="×"/>
<input class="btn" type="radio" name="frameworks" aria-label="Svelte"/>
<input class="btn" type="radio" name="frameworks" aria-label="Vue"/>
<input class="btn" type="radio" name="frameworks" aria-label="React"/>
</form>
```
### Filter without HTML form
Use this if you can't use a HTML form for some reason
```html
<div class="filter">
<input class="btn filter-reset" type="radio" name="metaframeworks" aria-label="All"/>
<input class="btn" type="radio" name="metaframeworks" aria-label="Sveltekit"/>
<input class="btn" type="radio" name="metaframeworks" aria-label="Nuxt"/>
<input class="btn" type="radio" name="metaframeworks" aria-label="Next.js"/>
</div>
```
## Features
- Group of radio buttons for filtering
- Automatically hides other options when one is selected
- Shows a reset button next to the chosen option
- Works with HTML forms or div containers
- Uses btn components for styling
This component is useful for creating filter interfaces where only one option can be active at a time, with an easy way to reset the selection.

107
offline-docs/daisyui/footer.md Normal file
View File

@@ -0,0 +1,107 @@
# daisyUI Documentation - Footer Component
Footer can contain logo, copyright notice, and links to other pages.
## Classes and Usage
### Core Classes:
- **footer** - The main footer component
- **footer-title** - Title of a footer column
- **footer-center** - Aligns footer content to center
- **footer-horizontal** - Puts footer columns next to each other horizontally
- **footer-vertical** - Puts footer columns under each other vertically [Default]
## Examples
### Basic Footer (vertical by default, horizontal for sm and up)
```html
<footer class="footer sm:footer-horizontal bg-neutral text-neutral-content p-10">
<nav>
<h6 class="footer-title">Services</h6>
<a class="link link-hover">Branding</a>
<a class="link link-hover">Design</a>
<a class="link link-hover">Marketing</a>
<a class="link link-hover">Advertisement</a>
</nav>
<nav>
<h6 class="footer-title">Company</h6>
<a class="link link-hover">About us</a>
<a class="link link-hover">Contact</a>
<a class="link link-hover">Jobs</a>
<a class="link link-hover">Press kit</a>
</nav>
<nav>
<h6 class="footer-title">Legal</h6>
<a class="link link-hover">Terms of use</a>
<a class="link link-hover">Privacy policy</a>
<a class="link link-hover">Cookie policy</a>
</nav>
</footer>
```
### Footer with a logo section
```html
<footer class="footer sm:footer-horizontal bg-base-200 text-base-content p-10">
<aside>
<svg
width="50"
height="50"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
fill-rule="evenodd"
clip-rule="evenodd"
class="fill-current">
<path
d="M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z"></path>
</svg>
<p>
ACME Industries Ltd.
<br />
Providing reliable tech since 1992
</p>
</aside>
<nav>
<h6 class="footer-title">Services</h6>
<a class="link link-hover">Branding</a>
<a class="link link-hover">Design</a>
<a class="link link-hover">Marketing</a>
<a class="link link-hover">Advertisement</a>
</nav>
<nav>
<h6 class="footer-title">Company</h6>
<a class="link link-hover">About us</a>
<a class="link link-hover">Contact</a>
<a class="link link-hover">Jobs</a>
<a class="link link-hover">Press kit</a>
</nav>
<nav>
<h6 class="footer-title">Legal</h6>
<a class="link link-hover">Terms of use</a>
<a class="link link-hover">Privacy policy</a>
<a class="link link-hover">Cookie policy</a>
</nav>
</footer>
```
### Centered Footer
```html
<footer class="footer footer-center bg-base-200 text-base-content p-10">
<aside>
<p>Copyright © 2023 - All right reserved by ACME Industries Ltd.</p>
</aside>
</footer>
```
## Features
- Contains logo, copyright notice, and links to other pages
- Responsive design that adapts to screen sizes
- Multiple layout options (vertical, horizontal)
- Can be centered
- Works with navigation elements
- Customizable with Tailwind classes
This component is useful for creating standard footer sections in websites that contain navigation links, copyright information, and company details.

89
offline-docs/daisyui/hero.md Normal file
View File

@@ -0,0 +1,89 @@
# daisyUI Documentation - Hero Component
Hero is a component for displaying a large box or image with a title and description.
## Classes and Usage
### Core Classes:
- **hero** - The main hero component
- **hero-content** - Content container inside hero
- **hero-overlay** - Overlay for hero background
- **hero-center** - Centers content in hero
- **hero-start** - Aligns content to start
- **hero-end** - Aligns content to end
- **hero-text** - Text content styling
- **hero-image** - Image container styling
## Examples
### Basic Hero
```html
<div class="hero bg-base-200">
<div class="hero-content text-center">
<div class="max-w-md">
<h1 class="text-5xl font-bold">Welcome to daisyUI!</h1>
<p class="py-6">Providing useful component class names to help you write less code and build faster.</p>
<button class="btn btn-primary">Get Started</button>
</div>
</div>
</div>
```
### Hero with Image
```html
<div class="hero bg-base-200">
<div class="hero-content flex-col lg:flex-row">
<div class="lg:w-1/2">
<img src="https://img.daisyui.com/images/stock/photo-1635805737707-57588507996c.webp" class="rounded-lg shadow-2xl" />
</div>
<div class="lg:w-1/2">
<h1 class="text-5xl font-bold">Your Title Here!</h1>
<p class="py-6">With the Hero component, you can easily create a large banner area with text and images.</p>
<button class="btn btn-primary">Get Started</button>
</div>
</div>
</div>
```
### Hero with Overlay
```html
<div class="hero bg-base-200">
<div class="hero-overlay bg-opacity-60"></div>
<div class="hero-content text-center text-neutral-content">
<div class="max-w-md">
<h1 class="text-5xl font-bold">Welcome!</h1>
<p class="py-6">This hero has an overlay to make the text more readable.</p>
<button class="btn btn-primary">Get Started</button>
</div>
</div>
</div>
```
### Hero with Background Image
```html
<div class="hero bg-[url('https://img.daisyui.com/images/stock/photo-1635805737707-57588507996c.webp')] bg-cover">
<div class="hero-overlay bg-base-200 bg-opacity-60"></div>
<div class="hero-content text-center text-neutral-content">
<div class="max-w-md">
<h1 class="text-5xl font-bold">Background Image Hero</h1>
<p class="py-6">This hero uses a background image with overlay.</p>
<button class="btn btn-primary">Get Started</button>
</div>
</div>
</div>
```
## Features
- Large banner area for showcasing content
- Responsive design that works on all screen sizes
- Can include images and text
- Supports overlays for better readability
- Flexible layout options (flex-col, lg:flex-row)
- Customizable with Tailwind classes
This component is useful for creating attention-grabbing introductory sections on websites.

109
offline-docs/daisyui/indicator.md Normal file
View File

@@ -0,0 +1,109 @@
# daisyUI Documentation - Indicator Component
Indicators are used to place an element on the corner of another element.
## Classes and Usage
### Core Classes:
- **indicator** - The main indicator container
- **indicator-item** - The indicator element itself
- **indicator-start** - Aligns indicator to start
- **indicator-center** - Centers indicator
- **indicator-end** - Aligns indicator to end
- **indicator-top** - Positions indicator at top
- **indicator-middle** - Positions indicator in middle
- **indicator-bottom** - Positions indicator at bottom
## Examples
### Basic Indicator
```html
<div class="indicator">
<span class="indicator-item badge badge-secondary">new</span>
<div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
</div>
```
### Indicator with Positioning
```html
<!-- Top start -->
<div class="indicator">
<span class="indicator-item indicator-top indicator-start badge badge-secondary">new</span>
<div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
</div>
<!-- Top center -->
<div class="indicator">
<span class="indicator-item indicator-top indicator-center badge badge-secondary">new</span>
<div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
</div>
<!-- Top end -->
<div class="indicator">
<span class="indicator-item indicator-top indicator-end badge badge-secondary">new</span>
<div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
</div>
<!-- Middle start -->
<div class="indicator">
<span class="indicator-item indicator-middle indicator-start badge badge-secondary">new</span>
<div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
</div>
<!-- Middle end -->
<div class="indicator">
<span class="indicator-item indicator-middle indicator-end badge badge-secondary">new</span>
<div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
</div>
<!-- Bottom start -->
<div class="indicator">
<span class="indicator-item indicator-bottom indicator-start badge badge-secondary">new</span>
<div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
</div>
<!-- Bottom center -->
<div class="indicator">
<span class="indicator-item indicator-bottom indicator-center badge badge-secondary">new</span>
<div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
</div>
<!-- Bottom end -->
<div class="indicator">
<span class="indicator-item indicator-bottom indicator-end badge badge-secondary">new</span>
<div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
</div>
```
### Indicator with Avatar
```html
<div class="indicator">
<span class="indicator-item indicator-top indicator-end badge badge-error">1</span>
<div class="avatar placeholder">
<div class="bg-neutral text-neutral-content rounded-full w-24">
<span class="text-xl">U</span>
</div>
</div>
</div>
```
### Indicator with Button
```html
<div class="indicator">
<span class="indicator-item indicator-top indicator-end badge badge-error">1</span>
<button class="btn btn-primary">Messages</button>
</div>
```
## Features
- Places elements on the corner of another element
- Multiple positioning options (top, middle, bottom and start, center, end)
- Works with badges, avatars, buttons and other elements
- Responsive design
This component is useful for creating notification indicators, badges, or any overlay elements that need to be positioned relative to other content.

91
offline-docs/daisyui/input.md Normal file
View File

@@ -0,0 +1,91 @@
# daisyUI Documentation - Input Component
Text Input is a simple input field.
## Classes and Usage
### Core Classes:
- **input** - The main input element
- **input-bordered** - Bordered input style
- **input-ghost** - Ghost input style
- **input-primary** - Primary color input
- **input-secondary** - Secondary color input
- **input-accent** - Accent color input
- **input-neutral** - Neutral color input
- **input-info** - Info color input
- **input-success** - Success color input
- **input-warning** - Warning color input
- **input-error** - Error color input
- **input-xs** - Extra small size
- **input-sm** - Small size
- **input-md** - Medium size [Default]
- **input-lg** - Large size
- **input-xl** - Extra large size
- **input-disabled** - Disabled state
- **input-readonly** - Read-only state
## Examples
### Basic Input
```html
<input type="text" class="input" placeholder="Type here" />
```
### Input with Border Style
```html
<input type="text" class="input input-bordered" placeholder="Type here" />
```
### Input with Ghost Style
```html
<input type="text" class="input input-ghost" placeholder="Type here" />
```
### Input Sizes
```html
<input type="text" class="input input-xs" placeholder="Extra small" />
<input type="text" class="input input-sm" placeholder="Small" />
<input type="text" class="input input-md" placeholder="Medium" />
<input type="text" class="input input-lg" placeholder="Large" />
<input type="text" class="input input-xl" placeholder="Extra large" />
```
### Input Colors
```html
<input type="text" class="input input-primary" placeholder="Primary" />
<input type="text" class="input input-secondary" placeholder="Secondary" />
<input type="text" class="input input-accent" placeholder="Accent" />
<input type="text" class="input input-neutral" placeholder="Neutral" />
<input type="text" class="input input-info" placeholder="Info" />
<input type="text" class="input input-success" placeholder="Success" />
<input type="text" class="input input-warning" placeholder="Warning" />
<input type="text" class="input input-error" placeholder="Error" />
```
### Input with Disabled State
```html
<input type="text" class="input" placeholder="You can't touch this" disabled />
```
### Input with Read-only State
```html
<input type="text" class="input" value="This is read-only" readonly />
```
## Features
- Simple text input styling
- Multiple size options (xs, sm, md, lg, xl)
- Multiple color variants
- Border and ghost styles
- Disabled and read-only states
- Responsive design
This component is useful for creating styled text inputs that blend seamlessly with the rest of your daisyUI interface.

58
offline-docs/daisyui/install.md Normal file
View File

@@ -0,0 +1,58 @@
# daisyUI Documentation
## Installation
How to install daisyUI as a Tailwind CSS plugin?
You need [Node.js](https://nodejs.org/en/download/) and [Tailwind CSS](https://tailwindcss.com/docs/installation/) installed.
1. Install daisyUI as a Node package:
NPM
```
npm i -D daisyui@latest
```
PNPM
```
pnpm add -D daisyui@latest
```
Yarn
```
yarn add -D daisyui@latest
```
Bun
```
bun add -D daisyui@latest
```
Deno
```
deno i -D npm:daisyui@latest
```
2. Add daisyUI to app.css:
```
@import "tailwindcss";
@plugin "daisyui";
```
## Framework install tutorials
See example setup of daisyUI and Tailwind CSS on different frameworks and build tools.
![daisyUI store](https://img.daisyui.com/images/store/nexus.webp)
## NEXUS Official daisyUI Dashboard Template
## Available on daisyUI store
[More details](/store)

97
offline-docs/daisyui/join.md Normal file
View File

@@ -0,0 +1,97 @@
# daisyUI Documentation - Join Component
Join is a container for grouping multiple items, it can be used to group buttons, inputs, etc. Join applies border radius to the first and last item. Join can be used to create a horizontal or vertical list of items.
## Classes and Usage
### Core Classes:
- **join** - For grouping multiple items
- **join-item** - Item inside join. Can be a button, input, etc.
- **join-vertical** - Show items vertically
- **join-horizontal** - Show items horizontally
## Examples
### Basic Join
```html
<div class="join">
<button class="btn join-item">Button</button>
<button class="btn join-item">Button</button>
<button class="btn join-item">Button</button>
</div>
```
### Group Items Vertically
```html
<div class="join join-vertical">
<button class="btn join-item">Button</button>
<button class="btn join-item">Button</button>
<button class="btn join-item">Button</button>
</div>
```
### Responsive Join (Vertical on small, horizontal on large)
```html
<div class="join join-vertical lg:join-horizontal">
<button class="btn join-item">Button</button>
<button class="btn join-item">Button</button>
<button class="btn join-item">Button</button>
</div>
```
### Join with Extra Elements
Even if join-item is not a direct child of the group, it still gets the style
```html
<div class="join">
<div>
<div>
<input class="input join-item" placeholder="Search" />
</div>
</div>
<select class="select join-item">
<option disabled selected>Filter</option>
<option>Sci-fi</option>
<option>Drama</option>
<option>Action</option>
</select>
<div class="indicator">
<span class="indicator-item badge badge-secondary">new</span>
<button class="btn join-item">Search</button>
</div>
</div>
```
### Custom Border Radius
```html
<div class="join">
<input class="input join-item" placeholder="Email" />
<button class="btn join-item rounded-r-full">Subscribe</button>
</div>
```
### Join Radio Inputs with Button Style
```html
<div class="join">
<input class="join-item btn" type="radio" name="options" aria-label="Radio 1" />
<input class="join-item btn" type="radio" name="options" aria-label="Radio 2" />
<input class="join-item btn" type="radio" name="options" aria-label="Radio 3" />
</div>
```
## Features
- Groups multiple items together
- Applies border radius to first and last items
- Horizontal or vertical layout options
- Responsive design
- Works with buttons, inputs, selects, and other elements
- Customizable with Tailwind classes
This component is useful for creating grouped interfaces like button groups, input fields with buttons, or any set of related UI elements that should appear as a cohesive unit.

131
offline-docs/daisyui/kbd.md Normal file
View File

@@ -0,0 +1,131 @@
# daisyUI Documentation - Kbd Component
Kbd is used to display keyboard shortcuts.
## Classes and Usage
### Core Classes:
- **kbd** - The main kbd element
- **kbd-xs** - Extra small size
- **kbd-sm** - Small size
- **kbd-md** - Medium size [Default]
- **kbd-lg** - Large size
- **kbd-xl** - Extra large size
## Examples
### Basic Kbd
`K`
```html
<kbd class="kbd">K</kbd>
```
### Kbd Sizes
`Xsmall` `Small` `Medium` `Large` `Xlarge`
```html
<kbd class="kbd kbd-xs">Xsmall</kbd>
<kbd class="kbd kbd-sm">Small</kbd>
<kbd class="kbd kbd-md">Medium</kbd>
<kbd class="kbd kbd-lg">Large</kbd>
<kbd class="kbd kbd-xl">Xlarge</kbd>
```
### In Text
Press `F` to pay respects.
```html
Press
<kbd class="kbd kbd-sm">F</kbd>
to pay respects.
```
### Key Combination
`ctrl` + `shift` + `del`
```html
<kbd class="kbd">ctrl</kbd>
+
<kbd class="kbd">shift</kbd>
+
<kbd class="kbd">del</kbd>
```
### Function Keys
`⌘` `⌥` `⇧` `⌃`
```html
<kbd class="kbd">⌘</kbd>
<kbd class="kbd">⌥</kbd>
<kbd class="kbd">⇧</kbd>
<kbd class="kbd">⌃</kbd>
```
### A Full Keyboard
```html
<div class="my-1 flex w-full justify-center gap-1">
<kbd class="kbd">q</kbd>
<kbd class="kbd">w</kbd>
<kbd class="kbd">e</kbd>
<kbd class="kbd">r</kbd>
<kbd class="kbd">t</kbd>
<kbd class="kbd">y</kbd>
<kbd class="kbd">u</kbd>
<kbd class="kbd">i</kbd>
<kbd class="kbd">o</kbd>
<kbd class="kbd">p</kbd>
</div>
<div class="my-1 flex w-full justify-center gap-1">
<kbd class="kbd">a</kbd>
<kbd class="kbd">s</kbd>
<kbd class="kbd">d</kbd>
<kbd class="kbd">f</kbd>
<kbd class="kbd">g</kbd>
<kbd class="kbd">h</kbd>
<kbd class="kbd">j</kbd>
<kbd class="kbd">k</kbd>
<kbd class="kbd">l</kbd>
</div>
<div class="my-1 flex w-full justify-center gap-1">
<kbd class="kbd">z</kbd>
<kbd class="kbd">x</kbd>
<kbd class="kbd">c</kbd>
<kbd class="kbd">v</kbd>
<kbd class="kbd">b</kbd>
<kbd class="kbd">n</kbd>
<kbd class="kbd">m</kbd>
<kbd class="kbd">/</kbd>
</div>
```
### Arrow Keys
```html
<div class="flex w-full justify-center">
<kbd class="kbd">▲</kbd>
</div>
<div class="flex w-full justify-center gap-12">
<kbd class="kbd">◀︎</kbd>
<kbd class="kbd">▶︎</kbd>
</div>
<div class="flex w-full justify-center">
<kbd class="kbd">▼</kbd>
</div>
```
## Features
- Displays keyboard shortcuts and key combinations
- Multiple size options (xs, sm, md, lg, xl)
- Works with individual keys or combinations
- Can be styled to look like physical keyboard keys
- Responsive design
This component is useful for documenting keyboard shortcuts in applications or guides.

105
offline-docs/daisyui/link.md Normal file
View File

@@ -0,0 +1,105 @@
# daisyUI Documentation - Link Component
Link adds the missing underline style to links.
## Classes and Usage
### Core Classes:
- **link** - Adds underline
- **link-hover** - Only shows underline on hover
- **link-neutral** - neutral color
- **link-primary** - primary color
- **link-secondary** - secondary color
- **link-accent** - accent color
- **link-success** - success color
- **link-info** - info color
- **link-warning** - warning color
- **link-error** - error color
## Examples
### Basic Link
```html
<a class="link">Click me</a>
```
### Link with Tailwind Reset
Tailwind CSS resets the style of links by default.
Add "link" class to make it look like a again.
```html
<p>
Tailwind CSS resets the style of links by default.
<br />
Add "link" class to make it look like a
<a class="link">normal link</a>
again.
</p>
```
### Link Colors
#### Primary color
```html
<a class="link link-primary">Click me</a>
```
#### Secondary color
```html
<a class="link link-secondary">Click me</a>
```
#### Accent color
```html
<a class="link link-accent">Click me</a>
```
#### Neutral color
```html
<a class="link link-neutral">Click me</a>
```
#### Success color
```html
<a class="link link-success">Click me</a>
```
#### Info color
```html
<a class="link link-info">Click me</a>
```
#### Warning color
```html
<a class="link link-warning">Click me</a>
```
#### Error color
```html
<a class="link link-error">Click me</a>
```
### Show Underline Only on Hover
```html
<a class="link link-hover">Click me</a>
```
## Features
- Adds underline style to links
- Multiple color variants
- Hover-only underline option
- Works with Tailwind CSS reset styles
This component is useful for creating styled links that have proper underline styling and can be customized with different colors.

113
offline-docs/daisyui/menu.md Normal file
View File

@@ -0,0 +1,113 @@
# daisyUI Documentation - Menu Component
Menu is a vertical list of links or buttons.
## Classes and Usage
### Core Classes:
- **menu** - The main menu component
- **menu-title** - Title for menu sections
- **menu-item** - Individual menu item
- **menu-horizontal** - Horizontal layout
- **menu-vertical** - Vertical layout (default)
- **menu-sm** - Small size
- **menu-md** - Medium size [Default]
- **menu-lg** - Large size
- **menu-xs** - Extra small size
## Examples
### Basic Menu
```html
<ul class="menu bg-base-200 text-base-content w-56 rounded-box">
<li>
<a>Menu Item 1</a>
</li>
<li>
<a>Menu Item 2</a>
</li>
<li>
<a>Menu Item 3</a>
</li>
</ul>
```
### Menu with Icons
```html
<ul class="menu bg-base-200 text-base-content w-56 rounded-box">
<li>
<a>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="h-5 w-5">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
</svg>
Home
</a>
</li>
<li>
<a>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="h-5 w-5">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
</svg>
Profile
</a>
</li>
</ul>
```
### Horizontal Menu
```html
<ul class="menu menu-horizontal bg-base-200 text-base-content rounded-box">
<li>
<a>Home</a>
</li>
<li>
<a>Profile</a>
</li>
<li>
<a>Settings</a>
</li>
</ul>
```
### Menu with Title
```html
<ul class="menu bg-base-200 text-base-content w-56 rounded-box">
<li>
<h2 class="menu-title">Main Navigation</h2>
</li>
<li>
<a>Dashboard</a>
</li>
<li>
<a>Profile</a>
</li>
</ul>
```
### Menu with Active State
```html
<ul class="menu bg-base-200 text-base-content w-56 rounded-box">
<li>
<a class="active">Active Item</a>
</li>
<li>
<a>Normal Item</a>
</li>
</ul>
```
## Features
- Vertical list of links or buttons
- Horizontal or vertical layout options
- Multiple size options (xs, sm, md, lg)
- Title support for menu sections
- Active state support
- Works with icons
This component is useful for creating navigation menus, sidebars, or any vertical list of interactive items.