---

## 🧩 More Components: Card, Input, Nav, Sidenav

### Card Example
```jsx
<div className="card filled primary">Primary Card</div>
<div className="card outlined success">Success Outlined Card</div>
<div className="card glass warning">Glass Warning Card</div>
<div className="card gradient danger">Gradient Danger Card</div>
```

### Input Example
```jsx
<div className="floatinglabel">
	<input className="floatinglabel-input" placeholder=" " />
	<label className="floatinglabel-label">Floating Label</label>
</div>
<input className="standardlabel-input" placeholder="Standard Label" />
<select className="select primary">
	<option>Option 1</option>
	<option>Option 2</option>
</select>
<div className="radio-group horizontal">
	<label className="radio-item">
		<input type="radio" name="r" className="primary" />
		<span className="radio-label">Radio 1</span>
	</label>
	<label className="radio-item">
		<input type="radio" name="r" className="success" />
		<span className="radio-label">Radio 2</span>
	</label>
</div>
<input type="checkbox" className="primary" />
<input type="checkbox" className="success" />
```

### Nav Example
```jsx
<nav className="nav-container">
	<div className="nav-brand">Brand</div>
	<ul className="nav-ul nav-ul-right">
		<li className="nav-li active"><a href="#">Home</a></li>
		<li className="nav-li"><a href="#">About</a></li>
		<li className="nav-li"><a href="#">Contact</a></li>
	</ul>
</nav>
```

### Sidenav Example
```jsx
<aside className="admin-nav glass-wave">
	<div className="admin-nav-header">Sidenav Header</div>
	<ul>
		<li>Dashboard</li>
		<li>Settings</li>
		<li>Logout</li>
	</ul>
</aside>
```

---

## 🏆 All Global Classes

- **Button:** `.filled`, `.outlined`, `.plain`, `.primary`, `.secondary`, `.success`, `.warning`, `.danger`, `.info`, `.gradient`, `.glass`, `.glow`
- **Card:** `.card`, `.filled`, `.outlined`, `.glass`, `.gradient`, color variants
- **Input:** `.floatinglabel`, `.standardlabel`, `.select`, `.radio-group`, `.radio-item`, `.checkbox`, color variants
- **Nav:** `.nav-container`, `.nav-brand`, `.nav-ul`, `.nav-li`, `.nav-dropdown`, `.nav-toggle`, `.nav-search-container`, etc.
- **Sidenav:** `.admin-nav`, `.glass-wave`, `.neon-flow`, `.crystal-glass`, `.aqua-depth`, `.admin-nav-header`

See `src/App.jsx` for a full working demo of all these classes and effects.
# 🇳🇵 DolphinCSS + React + Vite

यो template ले minimal setup दिन्छ **React** को लागि **Vite**, **HMR**, **TailwindCSS**, र **DolphinCSS theme** सँग काम गर्न।

DolphinCSS एक lightweight, world-class CSS library हो जसमा ready-to-use components र Tailwind-friendly utilities छन्।

---

## Features

- Prebuilt **Dolphin theme colors** र utilities
- React-ready **components** (buttons, inputs, tables, etc.)
- TailwindCSS v4+ compatible
- Optimized for **Vite + React + HMR**
- Fully **TypeScript compatible**

---

## Installation

Install TailwindCSS & DolphinCSS:

```bash
npm install tailwindcss dolphincss
import 'dolphincss/dolphin-css.css';

---

## 🚀 DolphinCSS Tutorial & Demo

### 1. GitHub Link

[View on GitHub](https://github.com/Phuyalshankar/dolphincss)

---

### 2. All Button & Global Classes

#### Button Variants

```jsx
<button className="filled primary md">Primary</button>
<button className="outlined primary md">Primary Outlined</button>
<button className="plain primary md">Primary Plain</button>
<button className="filled secondary md">Secondary</button>
<button className="outlined danger md">Danger Outlined</button>
<button className="filled success glow md">Success Glow</button>
<button className="gradient primary md">Gradient Primary</button>
<button className="gradient outlined primary md">Gradient Outlined</button>
<button className="gradient plain primary md">Gradient Text</button>
<button className="glass primary md">Glass Primary</button>
<button className="glass primary glow md">Glass + Glow</button>
<button className="glass primary gradient glow md">Glass + Gradient + Glow</button>
```

#### Global Classes

- `.filled`, `.outlined`, `.plain` (from varient.css)
- `.primary`, `.secondary`, `.success`, `.warning`, `.danger`, `.info`
- `.glow` (from glow.css)
- `.gradient` (from gradient.css)
- `.glass` (from glass.css)

---

### 3. Demo: All Effects in One Component

You can see all global classes in action in the main demo component:

```jsx
// src/App.jsx
import React from 'react';

export default function Demo() {
	return (
		<div>
			<button className="filled primary md">Primary</button>
			<button className="outlined primary md">Primary Outlined</button>
			<button className="plain primary md">Primary Plain</button>
			<button className="filled success glow md">Success Glow</button>
			<button className="gradient primary md">Gradient Primary</button>
			<button className="gradient outlined primary md">Gradient Outlined</button>
			<button className="gradient plain primary md">Gradient Text</button>
			<button className="glass primary md">Glass Primary</button>
			<button className="glass primary glow md">Glass + Glow</button>
			<button className="glass primary gradient glow md">Glass + Gradient + Glow</button>
		</div>
	);
}
```

---

### 4. Try All Effects

All global classes from `glow.css`, `gradient.css`, and `varient.css` are already used in the main demo (`src/App.jsx`).

**To test:**

1. Run the project:
	 ```bash
	 npm install
	 npm run dev
	 ```
2. Open [http://localhost:5173](http://localhost:5173) in your browser.
3. You will see all button variants, glow, gradient, and glass effects in one place.

---

**For more, see the [GitHub repo](https://github.com/Phuyalshankar/dolphincss) and explore `src/App.jsx` for all global class usage.**