Getting Started

Installation

Add NasDev UI to your project by including the CSS file in your HTML:


                                <link rel="stylesheet" href="https://nasdev.nasyuwa.biz.id/nasdev.css">

Javascript


                                <script src="https://nasdev.nasyuwa.biz.id/js/main.js">


                                <link rel="stylesheet" href="https://nasdev.nasyuwa.biz.id/styles/nasdev.css">

By :


                             NasDev-UI

Basic Template

Start with this basic HTML template:

<!DOCTYPE html>
<html lang="en" class="nasdev-body">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My NasDev UI Project</title>
    <link rel="stylesheet" href="https://nasdev.nasyuwa.biz.id/nasdev.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <!-- Your content here -->
    
    <h1 class="nasdev-text-primary">Hello NasDev UI!</h1>
    <button class="nasdev-btn nasdev-btn-primary">Click Me</button>
</body>
</html>

Components

Buttons

NasDev UI provides a variety of button styles:

Basic Buttons

Outline Buttons

Button Sizes

Usage

<!-- Basic button -->
<button class="nasdev-btn nasdev-btn-primary">Primary</button>

<!-- Outline button -->
<button class="nasdev-btn nasdev-btn-outline-primary">Primary</button>

<!-- Button sizes -->
<button class="nasdev-btn nasdev-btn-primary nasdev-btn-lg">Large</button>
<button class="nasdev-btn nasdev-btn-primary">Default</button>
<button class="nasdev-btn nasdev-btn-primary nasdev-btn-sm">Small</button>

Cards

Cards provide a flexible and extensible content container.

Basic Card

This is a basic card with some sample text.

Go somewhere

Featured

Card with Header

Card with a header section.

2 days ago

Card with Image

Card with an image at the top.

Usage

<!-- Basic card -->
<div class="nasdev-card">
    <div class="nasdev-card-body">
        <h5 class="nasdev-card-title">Card title</h5>
        <p class="nasdev-card-text">Card content</p>
    </div>
</div>

<!-- Card with header and footer -->
<div class="nasdev-card">
    <div class="nasdev-card-header">
        Header
    </div>
    <div class="nasdev-card-body">
        <h5 class="nasdev-card-title">Card title</h5>
        <p class="nasdev-card-text">Card content</p>
    </div>
    <div class="nasdev-card-footer">
        Footer
    </div>
</div>

<!-- Card with image -->
<div class="nasdev-card">
    <img src="image.jpg" class="nasdev-card-img-top" alt="...">
    <div class="nasdev-card-body">
        <h5 class="nasdev-card-title">Card title</h5>
        <p class="nasdev-card-text">Card content</p>
    </div>
</div>

Alerts

Provide contextual feedback messages for typical user actions.

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

Usage

<div class="nasdev-alert nasdev-alert-primary">
    A simple primary alert—check it out!
</div>

<div class="nasdev-alert nasdev-alert-success">
    A simple success alert—check it out!
</div>

<!-- Dismissible alert -->
<div class="nasdev-alert nasdev-alert-warning nasdev-alert-dismissible">
    <button type="button" class="nasdev-close" data-dismiss="alert">×</button>
    <strong>Warning!</strong> This alert can be dismissed.
</div>

Utility Classes

Spacing Utilities

NasDev UI includes a wide range of shorthand responsive margin and padding utility classes.

Margin

.nasdev-m-{0-5} - margin on all sides
.nasdev-mt-{0-5} - margin top
.nasdev-mb-{0-5} - margin bottom
.nasdev-ml-{0-5} - margin left
.nasdev-mr-{0-5} - margin right
.nasdev-mx-{0-5} - margin left and right
.nasdev-my-{0-5} - margin top and bottom

Padding

.nasdev-p-{0-5} - padding on all sides
.nasdev-pt-{0-5} - padding top
.nasdev-pb-{0-5} - padding bottom
.nasdev-pl-{0-5} - padding left
.nasdev-pr-{0-5} - padding right
.nasdev-px-{0-5} - padding left and right
.nasdev-py-{0-5} - padding top and bottom

Usage Examples

<!-- Margin examples -->
<div class="nasdev-m-3">Margin on all sides (1rem)</div>
<div class="nasdev-mt-2">Margin top (0.5rem)</div>
<div class="nasdev-mx-auto">Horizontal centering</div>

<!-- Padding examples -->
<div class="nasdev-p-4">Padding on all sides (1.5rem)</div>
<div class="nasdev-py-2">Padding top and bottom (0.5rem)</div>

Typography

Text Utilities

NasDev UI provides various text utilities for alignment, color, weight, and size.

Examples

Big Heading

This is a paragraph with muted text color.

This text is bold and red.

Usage

<h1 class="nasdev-text-primary nasdev-text-center">Big Heading</h1>
  <p class="nasdev-text-muted">This is a regular paragraph</p>
  <p class="nasdev-text-bold nasdev-text-danger">This text is bold and red</p>

Grid & Layout

Grid System

NasDev UI uses a simple grid system based on .nasdev-row and .nasdev-col-* classes to build flexible and responsive layouts.

Example Layout

.nasdev-col-6

Usage

<div class="nasdev-row">
    <div class="nasdev-col-6">Column 1</div>
    <div class="nasdev-col-6">Column 2</div>
  </div>

Background & Colors

Use color classes for text and background such as .nasdev-text-primary, .nasdev-bg-success, and more.

Primary

Success

Danger

Warning

<div class="nasdev-bg-primary nasdev-text-light">Background color</div>

Form

Use form control classes such as .nasdev-form-control for modern and responsive inputs.

<input type="text" class="nasdev-form-control">

Border & Shadow

Classes like .nasdev-border and .nasdev-shadow can be used to style elements with borders and shadows.

.nasdev-border

.nasdev-rounded

.nasdev-shadow-sm

.nasdev-shadow-lg

<div class="nasdev-border nasdev-shadow">...</div>

Display

Use display utility classes like .nasdev-d-none, .nasdev-d-block, and .nasdev-d-flex to control element visibility and layout.

<div class="nasdev-d-none">Hidden element</div>
  <div class="nasdev-d-block">Visible element</div>

Animation

NasDev UI provides built-in animation classes such as .nasdev-fade-in, .nasdev-slide-up, and .nasdev-zoom-in.

Fade In

Slide Up

Zoom In

<div class="nasdev-fade-in">Animated Element</div>

Modal

Use modals for interactive pop-ups. Apply .nasdev-modal and .nasdev-modal-content to structure the modal window.

<div class="nasdev-modal">
    <div class="nasdev-modal-content">
      <h3>Modal Title</h3>
      <p>This is the modal content.</p>
    </div>
  </div>

Accordion

The accordion component is used to toggle visibility of content areas. Click to expand/collapse.

What is NasDev UI?

NasDev UI is a lightweight and responsive CSS framework built for simplicity and speed.

Is it mobile friendly?

Yes! All components are responsive by default.

Usage

<div class="nasdev-accordion">
    <div class="nasdev-accordion-header">Title</div>
    <div class="nasdev-accordion-body">Content here</div>
  </div>

Floating Note

This floating note box is unique to NasDev UI. It helps you highlight promotions, tips, or important messages without disrupting the layout.

Hey, Developer!

Don't forget to check out the new NasDev components. They're 🔥

Usage

<div class="nasdev-floating-note">
    <span class="nasdev-floating-close">×</span>
    <h4>Hello!</h4>
    <p>Your message here...</p>
  </div>

Tabs

Tabs allow you to organize content in a small area by switching between panels. This version is unique to NasDev UI.

Overview
Features
Contact

This is the overview section. You can put descriptions or welcome text here.

NasDev UI includes components like buttons, cards, modals, and more!

You can contact us via WhatsApp or check our documentation for more info.

Usage

<ul class="nasdev-tabs">
    <li class="nasdev-tab nasdev-tab-active">Tab 1</li>
    <li class="nasdev-tab">Tab 2</li>
  </ul>
  <div class="nasdev-tab-content active">Content 1</div>
  <div class="nasdev-tab-content">Content 2</div>

Switch Toggle

Use the NasDev Switch for toggle inputs like dark mode, settings, or preferences. Simple and smooth!

Usage

<label class="nasdev-switch">
    <input type="checkbox">
    <span class="nasdev-switch-slider"></span>
  </label>

Progress Gradient

A beautiful animated progress bar with gradient color only available in NasDev UI.

<div class="nasdev-progress">
    <div class="nasdev-progress-bar" style="width: 70%"></div>
  </div>

Skeleton Loader

This skeleton loader is used to simulate loading content. Very helpful for improving UX.

<div class="nasdev-skeleton" style="width:100%; height:20px;"></div>

Context Bubble

This custom tooltip-like feature is clean, minimal, and 100% NasDev UI.

Hover me

This is context info ✨

<div class="nasdev-context">
    Hover me
    <div class="nasdev-context-text">This is context info ✨</div>
  </div>

Dark Mode Toggle

<button class="nasdev-btn nasdev-toggle-dark">Toggle Dark Mode</button>

Bottom Sheet

This is a NasDev Sheet panel. Slide it up and down!

<div class="nasdev-sheet">...</div>
  <button class="nasdev-toggle-sheet">Open</button>

Magic Alert

Magic Alert is a typing animation alert only available in NasDev UI. Simply add a <div> with class nasdev-magic-alert and a data-text attribute.

Usage

<div class="nasdev-magic-alert" data-text="🚨 Welcome to NasDev UI – Stylish. Fast. Modern."></div>

JavaScript Included

This component is already included in main.js.
Just make sure to include it in your HTML:

<script src="https://nasdev.nasyuwa.biz.id/js/main.js">

Toast Notification

NasDev Toast is a lightweight snackbar-style alert. Use it to notify users with messages that disappear automatically.

Usage

<button onclick="nasdevToast('Message here', 'success')">Show Toast</button>

JavaScript Included

This feature is already included in main.js
Include this in your HTML:

<script src="https://nasdev.nasyuwa.biz.id/js/main.js"></script>

Timeline

NasDev Timeline is a vertical step indicator to visualize events, history, or achievements. This feature is fully CSS and mobile-friendly.

Framework Released

April 2025

NasDev UI was officially launched for public use.

Version 1.1 Update

May 2025

Introduced unique components such as Magic Alert and Floating Notes.

Usage

<div class="nasdev-timeline">
    <div class="nasdev-timeline-item">
      <div class="nasdev-timeline-title">Step Title</div>
      <div class="nasdev-timeline-date">Date</div>
      <p>Description text here.</p>
    </div>
  </div>

Hover Freeze Panel

NasDev Hover Effect

Hover over this card to see the subtle freeze effect. It enhances focus and makes your UI feel premium.

Usage

<div class="nasdev-card nasdev-hover-freeze">
    <div class="nasdev-card-body">
      <h4>Hover Title</h4>
      <p>Hover description here</p>
    </div>
  </div>

Live Status Dot

Online

Busy

Offline

<span class="nasdev-status-dot nasdev-online"></span> Online

Tabbed Card

Overview

Features

This is the overview of your product or service.

Details about your features go here.

JavaScript Included

<script src="https://nasdev.nasyuwa.biz.id/js/main.js"></script>

Pricing with Toggle

Basic

$9/month

Pro

$29/month

JavaScript Included

<script src="https://nasdev.nasyuwa.biz.id/js/main.js"></script>

Inline Chat Bubble

Hello, what is NasDev UI?

It’s a lightweight and beautiful CSS framework 💖

Usage

<div class="nasdev-chat">
    <div class="nasdev-chat-bubble nasdev-chat-left">...</div>
    <div class="nasdev-chat-bubble nasdev-chat-right">...</div>
  </div>

Step Progress Tracker

Start

Profile

Confirm

Finish

Usage

<div class="nasdev-steps">
    <div class="nasdev-step active">Step 1</div>
    <div class="nasdev-step">Step 2</div>
  </div>

Glassmorphism Modal

JavaScript Included

<script src="https://nasdev.nasyuwa.biz.id/js/main.js"></script>

Accordion Slide

What is NasDev UI?

NasDev UI is a fast, modern CSS framework built with love 💖

JavaScript Included

<script src="https://nasdev.nasyuwa.biz.id/js/main.js"></script>

Switch State Binding

Current Mode: OFF

<input type="checkbox" id="toggleMode">
  <span id="modeLabel">OFF</span>

JavaScript Included

<script src="https://nasdev.nasyuwa.biz.id/js/main.js"></script>

Floating Tooltip

Usage

<button data-nasdev-tooltip="Tooltip text">Hover</button>

Notification Center

JavaScript Included

<script src="https://nasdev.nasyuwa.biz.id/js/main.js"></script>

AI Tooltip

Hover me 🤖

JavaScript Included

<script src="https://nasdev.nasyuwa.biz.id/js/main.js"></script>

Hero Carousel

JavaScript Included

<script src="https://nasdev.nasyuwa.biz.id/js/main.js"></script>

Color Picker

Usage

<input type="color">
  <div class="nasdev-color-preview"></div>

JavaScript Included

<script src="https://nasdev.nasyuwa.biz.id/js/main.js"></script>

File Upload with Preview

Usage

<input type="file" accept="image/*">
  <img class="nasdev-preview-image">

JavaScript Included

<script src="https://nasdev.nasyuwa.biz.id/js/main.js"></script>

Avatar Group

Mini Confirm Modal

<script src="https://nasdev.nasyuwa.biz.id/js/main.js"></script>

Form Stepper

Step 1

Step 2

Step 3

Step 1 Content Here

<script src="https://nasdev.nasyuwa.biz.id/js/main.js"></script>

Custom Range Slider

50%

<input type="range" class="nasdev-range">
  <div class="nasdev-range-output">...</div>

Rating Stars

★ ★ ★ ★ ★

Usage

<div class="nasdev-rating">
    <input type="radio" id="star5" name="rating" value="5"><label for="star5">★</label>
    ...
  </div>

No JavaScript needed. Selection is native HTML behavior.

Divider Text

Usage

<div class="nasdev-divider">OR</div>

This divider is great to split sections like login forms or page breaks.

Badge Icon

3 🔔

Usage

<div class="nasdev-icon-badge">
    <span class="nasdev-badge">3</span>
    <i>🔔</i>
  </div>

Use it to show unread notifications or alerts.

Glass Card Hover

Hover me ✨

<div class="nasdev-card nasdev-glass-card">...</div>

Dark Mode Toggle

<button data-nasdev-darkmode-toggle>Toggle</button>

Scroll Reveal

I appear on scroll! 👀

<div class="nasdev-reveal">...</div>

Sticky Sidebar

<aside class="nasdev-sidebar">...</aside>

Floating Action Button

<div class="nasdev-fab">+</div>

Skeleton Loader

<div class="nasdev-skeleton"></div>

Terminal-style Code Block

> npm install nasdev-ui
> Framework loaded successfully.

<div class="nasdev-terminal">> Command</div>

Examples

Dashboard

See how to build an admin dashboard with NasDev UI.

View Example

E-commerce

Product listing and checkout page examples.

View Example

Blog

Blog layout with article cards and sidebar.

View Example

Welcome to NasDev UI

NasDev-UI

Getting Started

Installation

Javascript

Basic Template

Components

Buttons

Basic Buttons

Outline Buttons

Button Sizes

Usage

Cards

Basic Card

Card with Header

Card with Image

Usage

Alerts

Usage

Utility Classes

Spacing Utilities

Margin

Padding

Usage Examples

Typography

Text Utilities

Examples

Big Heading

Usage

Grid & Layout

Grid System

Example Layout

Usage

Background & Colors

Form

Border & Shadow

Display

Animation

Modal

Accordion

Usage

Floating Note

Hey, Developer!

Usage

Tabs

Usage

Switch Toggle

Usage

Progress Gradient

Skeleton Loader

Context Bubble

Dark Mode Toggle

Bottom Sheet

Magic Alert

Usage

JavaScript Included

Toast Notification

Usage

JavaScript Included

Timeline

Usage

Hover Freeze Panel

NasDev Hover Effect

Usage

Live Status Dot

Tabbed Card

JavaScript Included

Pricing with Toggle

Basic

Pro

JavaScript Included

Inline Chat Bubble

Usage

Step Progress Tracker

Usage

Glassmorphism Modal

Welcome to NasDev UI ✨

JavaScript Included

Accordion Slide

JavaScript Included