X-Cart Admin UI Kit

Component library and mockup generator for X-Cart admin panel

Components

Patterns

Mockups

50+

CSS Classes

Returns Module Mockups ECOM-5618

UI mockups for the improved returns system

Click Flow: Order #00005 Create Return Returns Dashboard Return Detail

1. Order #00005

Order detail with Returns tab

2. Create Return

Per-item return creation

3. Dashboard

Returns list with filters

4. Return Detail

R-20251203-00001

Settings

Rules & config

Product Setting

Returnable toggle

Getting Started

1. Include CSS

<link rel="stylesheet" href="/public/css/bootstrap.min.css">
<link rel="stylesheet" href="/public/css/fontawesome.min.css">
<link rel="stylesheet" href="/public/css/xcart-admin.css">

2. Include JS

<script src="/public/js/jquery.min.js"></script>
<script src="/public/js/bootstrap.min.js"></script>

3. Use Components

<button class="xcart-btn xcart-btn-primary">
    <i class="fas fa-save"></i> Save Changes
</button>

Components

Buttons

Forms

Badges

Synced Pending Failed

Alerts

Success message

Tables

Column	Value
Row 1	Data

Panels

Panels, cards, and metric boxes

CSS Variables

Primary Colors

Status Colors

Layout Dimensions

--xcart-sidebar-width: 70px
--xcart-topbar-height: 40px
--xcart-content-padding: 30px 40px

Technology Stack

Bootstrap 3.3.7

CSS Framework

FontAwesome 5

Icons

Twig 3

Templates

PHP 7.4+

Server