Simple Admin Dashboard UI | Free Source Code (HTML & CSS)

In this post, I am sharing a clean and lightweight Admin Dashboard UI. If you are starting a new web project and need a solid foundation for your admin panel, this code is perfect for you. It is designed to be simple, fast, and easy to customize.

What’s Inside the Free Version?

Minimalist Sidebar: A sleek menu area for your navigation links.
Main Content Area: A clean layout ready for your cards, tables, or charts.
Responsive Design: Simple structure that works well for basic admin interfaces.

The Source Code

1. HTML Structure

<div class="sidebar">
    <h2>0fplanet Admin</h2>
    <div class="menu-item">Dashboard</div>
    <div class="menu-item">Analytics</div>
    <div class="menu-item">Settings</div>
</div>

<div class="main-content">
    <div class="card">
        <h1>Welcome, Admin!</h1>
        <p>This is your basic dashboard interface.</p>
    </div>
</div>

2. CSS Styles

body { margin: 0; font-family: sans-serif; display: flex; background: #f0f2f5; }

.sidebar { width: 250px; height: 100vh; background: #1e293b; color: white; padding: 20px; }
.sidebar h2 { font-size: 20px; text-align: center; color: #38bdf8; }
.menu-item { padding: 15px; cursor: pointer; border-bottom: 1px solid #334155; }
.menu-item:hover { background: #38bdf8; }

.main-content { flex: 1; padding: 30px; }
.card { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

Take Your Project to the Next Level: Ofplanet Pro Versions

While the free version provides a great starting point, the Ofplanet Pro versions are crafted for developers who need a production-ready, highly professional look. Choose the style that fits your project best:

Feature	Light Edition	Dark Edition
Download	Get Light Version	Get Dark Version

Why upgrade to Pro?

✅ Interactive Elements: Includes advanced Data Charts & Statistics cards.
✅ Advanced UI: Fully responsive sidebars with smooth toggle effects.
✅ Modular Code: Clean, well-commented code for effortless integration.

Final Thoughts

I hope this dashboard helps you speed up your development process! If you have any suggestions, let me know in the comments. Happy coding!