xxshna.ui
V 1.1.0Get started ↗
Guides / Installation

Installation

Everything required to install Xshna UI on a static website, Laravel application or ordinary cPanel hosting.

1. Upload the files

Upload the complete package to a new cPanel subdomain document root such as public_html/ui/. The dist/ folder contains all distributable CSS and JavaScript; the docs and demos work immediately without a build step.

2. Add the assets

<link rel="stylesheet" href="/dist/xshna-ui.css">
<div data-xsh-ui>
  <button class="xsh-button" data-xsh-toast="success"
          data-xsh-message="Hello from Xshna UI">Get started</button>
</div>
<script src="/dist/xshna-ui.js" defer></script>

Use paths relative to the deployment directory, not root-relative paths, when embedding from a different subfolder. The library has no external CSS, font, CDN or JavaScript dependencies.

3. Integrate with existing projects

In a Laravel Blade template, copy dist/ into public/vendor/xshna-ui/ and reference its assets using the asset() helper. In WordPress use wp_enqueue_style() and wp_enqueue_script(). For xshna.css, load Xshna UI after the existing CSS; all UI-specific selectors retain the xsh- prefix. Review visual token overrides for inherited variables.

4. Publish safely

Set your cPanel subdomain document root to the folder containing index.html. Enable HTTPS, test /components/dialogs/ and /playground/, then invalidate Cloudflare cache after updates. This is a static distribution: no database, PHP extensions, Composer, npm, cron or migrations are required.