Back to Blog
Februari 04, 2026

UI Elements

Mats Inakri

Mats Inakri

Published: | Updated: Februari 04, 2026

Apa itu Plus-UI Component?

Plus-UI adalah library komponen UI modern yang dirancang khusus untuk optimasi blog dengan mengutamakan performa dan aksesibilitas.

Bagaimana cara integrasinya?

Cukup salin snippet HTML ke dalam post editor dalam mode HTML VIEW.

Apakah mendukung Dark Mode?

Ya, semua elemen secara otomatis menyesuaikan dengan mode gelap sistem atau blog Anda.


Table of Contents

Standard paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Paragraph with text indent: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This is a paragraph with drop cap. Teks awal yang besar memberikan kesan premium dan artistik pada isi konten blog Anda.

Source URL Reference:
www.plus-ui.blog/components


Media & Gallery Grids

Standard figure image
Caption: Coding workspace inspiration

Grid Layout (.grImg)

grid 1 grid 2 grid 3 grid 4

Show All Gallery (.hdImg)

img main img visible
placeholder
hidden 1 hidden 2

Video Embedding

Lazy YouTube (16:9)

Lazy YouTube (4:3 Ratio)


Buttons & External Links


Project_Assets.zip 200 KiB

Alerts & Notes

Info!
Ini adalah komponen Note standar untuk memberikan informasi tambahan.

Warning!
Gunakan Note Warning untuk informasi yang krusial.

Info Alert! A robust information alert box.
Warning Alert! Careful with this setting.
Success Alert! Operation completed successfully.
Error Alert! Oops, something went wrong.
Outlined Alert! Minimalist style.

Professional Data Table

Name Position Office Age Salary
Tiger Nixon System Architect Edinburgh 61 $320,800
Garrett Winters Accountant Tokyo 63 $170,750
Ashton Cox Junior Developer San Francisco 26 $86,000

Instructional Steps

  1. Salin kode dari editor.
  2. Buka dashboard Blogger Anda.
  3. Terapkan dalam mode HTML View.

Developer Experience

⌘ + Shift + P

Marker variants: Red Mark, Green Mark, Blue Mark, Gold Mark

Single Code Block (Fixed)

console.log("Hello Plus-UI!");
// This is a single code block with source info

Multi-tabs Code Block

<div class="container"> <h1>Hello World</h1> </div>
.container { padding: 20px; background: #f0f0f0; }
document.querySelector('.container').innerText = 'Ready!';
{ "status": "active", "version": "V7" }

General Content Tabs

Horizontal Tabs

Overview Content: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Specs Content: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Reviews Content: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Vertical Tabs

Manage your account details and preferences here. Easy to customize.

We respect your privacy. Read our full policy regarding data usage.

Control your push notifications and email alerts from this panel.


Automatic Related Posts