Separator · Panel

Basic Usage

MVUI

A free MVUI component library.

Docs

<div class="text-foreground">
  <div class="space-y-1">
    <h4 class="text-sm font-medium leading-none">MVUI</h4>
    <p class="text-sm text-muted-foreground">A free MVUI component library.</p>
  </div>
  <div class="mv-separator my-2.5"></div>
  <div class="flex h-5 items-center space-x-4 text-sm">
    <a href="https://MVui.io" class="hover:text-primary hover:underline hover:underline-offset-2">Components</a>
    <div class="mv-separator mv-separator-vertical"></div>
    <a href="https://MVui.io/docs" class="hover:text-primary hover:underline hover:underline-offset-2">Docs</a>
    <div class="mv-separator mv-separator-vertical"></div>
    <a href="https://github.com/keenthemes/MVui" class="hover:text-primary hover:underline hover:underline-offset-2">Source</a>
  </div>
</div>

Vertical

Project Actions

Toolbar grouping with vertical separators.

<div class="max-w-xl text-foreground">
  <div class="mb-2 text-sm font-medium">Project Actions</div>
  <div class="mb-3 text-xs text-muted-foreground">
    Toolbar grouping with vertical separators.
  </div>
  <div class="inline-flex h-10 items-center rounded-lg border border-border bg-muted/30 px-2.5">
    <button class="rounded-md px-2.5 py-1.5 text-sm hover:bg-accent hover:text-primary">
      Edit
    </button>
    <div class="mx-2 h-5 mv-separator mv-separator-vertical" aria-hidden="true"></div>
    <button class="rounded-md px-2.5 py-1.5 text-sm hover:bg-accent hover:text-primary">
      Share
    </button>
    <div class="mx-2 h-5 mv-separator mv-separator-vertical" aria-hidden="true"></div>
    <button class="rounded-md px-2.5 py-1.5 text-sm hover:bg-accent hover:text-primary">
      Export
    </button>
    <div class="mx-2 h-5 mv-separator mv-separator-vertical" aria-hidden="true"></div>
    <button class="rounded-md px-2.5 py-1.5 text-sm hover:bg-accent hover:text-primary">
      Archive
    </button>
  </div>
</div>

With Label

Sign In

Use your account credentials or continue with a provider.

OR

<div class="max-w-sm text-foreground">
  <div class="rounded-lg border border-border bg-card p-5">
    <div class="mb-4">
      <h4 class="text-sm font-semibold">Sign In</h4>
      <p class="text-xs text-muted-foreground">
        Use your account credentials or continue with a provider.
      </p>
    </div>
    <button class="mv-btn mv-btn-outline w-full">Continue with Email</button>
    <div class="my-4 flex items-center gap-3">
      <div class="flex-1 min-w-0">
        <div class="mv-separator" aria-hidden="true"></div>
      </div>
      <span class="shrink-0 rounded-full border border-border px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">OR</span>
      <div class="flex-1 min-w-0">
        <div class="mv-separator" aria-hidden="true"></div>
      </div>
    </div>
    <button class="mv-btn mv-btn-outline w-full">Continue with Google</button>
  </div>
</div>

With Label Left

Billing Details

Optional

Company Name

Used for invoices

Acme Inc.

Tax Number

VAT registration

DE-4582931

<div class="max-w-xl text-foreground">
  <div class="rounded-lg border border-border bg-card">
    <div class="flex items-center gap-3 px-4 py-3">
      <span class="shrink-0 text-sm font-semibold">Billing Details</span>
      <div class="flex-1 min-w-0">
        <div class="mv-separator" aria-hidden="true"></div>
      </div>
      <span class="shrink-0 text-xs text-muted-foreground">Optional</span>
    </div>
    <div class="mv-separator" aria-hidden="true"></div>
    <div class="flex items-center justify-between px-4 py-3">
      <div>
        <div class="text-sm font-medium">Company Name</div>
        <div class="text-xs text-muted-foreground">Used for invoices</div>
      </div>
      <div class="text-sm text-muted-foreground">Acme Inc.</div>
    </div>
    <div class="mv-separator" aria-hidden="true"></div>
    <div class="flex items-center justify-between px-4 py-3">
      <div>
        <div class="text-sm font-medium">Tax Number</div>
        <div class="text-xs text-muted-foreground">VAT registration</div>
      </div>
      <div class="text-sm text-muted-foreground">DE-4582931</div>
    </div>
  </div>
</div>

Inset

Account Settings

Manage profile and security preferences.

Profile

Security

Notifications

<div class="max-w-lg rounded-lg border border-border bg-background text-foreground">
  <div class="px-4 py-3">
    <h4 class="text-sm font-medium">Account Settings</h4>
    <p class="text-sm text-muted-foreground">
      Manage profile and security preferences.
    </p>
  </div>
  <div class="mx-4 mv-separator" aria-hidden="true"></div>
  <div class="px-4 py-3 text-sm">Profile</div>
  <div class="mx-4 mv-separator" aria-hidden="true"></div>
  <div class="px-4 py-3 text-sm">Security</div>
  <div class="mx-4 mv-separator" aria-hidden="true"></div>
  <div class="px-4 py-3 text-sm">Notifications</div>
</div>

List Divider

Recent Activity

Signed in from new device

2 minutes ago

Updated billing details

1 hour ago

Exported reports

Yesterday

<div class="max-w-xl rounded-lg border border-border text-foreground">
  <div class="px-4 py-3">
    <h4 class="text-sm font-medium">Recent Activity</h4>
  </div>
  <div class="mv-separator" aria-hidden="true"></div>
  <div class="px-4 py-3">
    <div class="text-sm font-medium">Signed in from new device</div>
    <div class="text-xs text-muted-foreground">2 minutes ago</div>
  </div>
  <div class="mv-separator" aria-hidden="true"></div>
  <div class="px-4 py-3">
    <div class="text-sm font-medium">Updated billing details</div>
    <div class="text-xs text-muted-foreground">1 hour ago</div>
  </div>
  <div class="mv-separator" aria-hidden="true"></div>
  <div class="px-4 py-3">
    <div class="text-sm font-medium">Exported reports</div>
    <div class="text-xs text-muted-foreground">Yesterday</div>
  </div>
</div>

In Card

Storage Usage

72% of 100 GB used

Documents

34 GB

Media

38 GB

<div class="max-w-md rounded-lg border border-border bg-card text-card-foreground">
  <div class="px-4 py-3">
    <h4 class="text-sm font-semibold">Storage Usage</h4>
    <p class="text-sm text-muted-foreground">72% of 100 GB used</p>
  </div>
  <div class="mv-separator" aria-hidden="true"></div>
  <div class="grid grid-cols-2 px-4 py-3">
    <div>
      <div class="text-xs text-muted-foreground">Documents</div>
      <div class="text-sm font-medium">34 GB</div>
    </div>
    <div>
      <div class="text-xs text-muted-foreground">Media</div>
      <div class="text-sm font-medium">38 GB</div>
    </div>
  </div>
</div>

Section Divider

Profile Overview

Basic account details and communication preferences.

Security Settings

Password, sessions, and multi-factor authentication options.

<div class="max-w-xl text-foreground">
  <div class="space-y-1">
    <h4 class="text-base font-semibold">Profile Overview</h4>
    <p class="text-sm text-muted-foreground">
      Basic account details and communication preferences.
    </p>
  </div>
  <div class="my-4 mv-separator" aria-hidden="true"></div>
  <div class="space-y-1">
    <h5 class="text-sm font-medium">Security Settings</h5>
    <p class="text-sm text-muted-foreground">
      Password, sessions, and multi-factor authentication options.
    </p>
  </div>
</div>