🧩 More Components: Card, Input, Nav, Sidenav

Card Example

<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

<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

<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

<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:

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:

// 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:

   npm install
   npm run dev

2. Open 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 and explore src/App.jsx for all global class usage.