Getting started

Celerik UI is a set of PHP components that render accessible Bootstrap 5 markup. A small JavaScript bundle then enhances them with proven open-source libraries (DataTables, Chart.js, Parsley.js, FullCalendar, Quill, FilePond, Notyf, elFinder), each loaded only on the pages that use it.

You build a component in PHP, print it in your template, and, for server-side data, answer its requests with the same definition.

Requirements

• PHP 8.2 or later, with ext-fileinfo for uploads
• Bootstrap 5.3 (CSS, and bootstrap.bundle.js for Modal and Tabs) and jQuery 3.7 on the page
• Optional: Laravel 11+ or Symfony 7 for the adapters

Install

composer require celerik/ui

Then make the bundle (the package's public/ folder) available to the browser:

Laravel

php artisan vendor:publish --tag=celerik-assets   # copies it to public/vendor/celerik

Symfony

# Register Celerik\Ui\Adapters\Symfony\CelerikUiBundle in config/bundles.php, then:
php bin/console assets:install                    # copies it to public/bundles/celerikui

Plain PHP

cp -r vendor/celerik/ui/public public/vendor/celerik

Publish the assets again after every Celerik update. Releases include the built bundle, so no Node.js is needed.

Or use the CDN or npm

Instead of publishing the assets, load the bundle of the installed version from jsDelivr:

<?= Celerik\Ui\Assets::tags(Celerik\Ui\Assets::cdnUrl()) ?>

<x-celerik-assets :base-url="Celerik\Ui\Assets::cdnUrl()" />

Allow https://cdn.jsdelivr.net in script-src and style-src if you use a Content Security Policy. With a JavaScript bundler (Vite, webpack), install it from npm instead:

npm install @celerik/ui

import '@celerik/ui';                       // registers the components and starts them
import '@celerik/ui/celerik.css';
import '@celerik/ui/celerik-material.css';  // optional base look

The PHP version and the npm version must match: the components and the bundle change together.

Load the assets

Load Bootstrap and jQuery first, then the Celerik tags in the <head>:

Blade

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" defer></script>
<x-celerik-assets />

Twig

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" defer></script>
{{ celerik_assets() }}

Plain PHP

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" defer></script>
<?= Celerik\Ui\Assets::tags('/vendor/celerik') ?>

The tags are a stylesheet and one ES module (celerik.js). Module scripts are deferred, so they run after jQuery and Bootstrap.

Your first component

LookBootstrapMaterialTailwindOpen the demo in a new tab (Grid)

Grid demo. Data is embedded and nothing is saved.

<?php

use Celerik\Ui\Components\Grid;

return Grid::make('users')
    ->caption('Team members')
    ->column('name', 'Name')
    ->column('role', 'Role')
    ->column('city', 'City')
    ->export('copy', 'csv')
    ->pageSize(5)
    ->rows([
        ['name' => 'Ada Lovelace', 'role' => 'Engineer', 'city' => 'London'],
        ['name' => 'Alan Turing', 'role' => 'Researcher', 'city' => 'Manchester'],
        ['name' => 'Grace Hopper', 'role' => 'Admiral', 'city' => 'Arlington'],
        ['name' => 'Katherine Johnson', 'role' => 'Mathematician', 'city' => 'Hampton'],
        ['name' => 'Linus Torvalds', 'role' => 'Maintainer', 'city' => 'Portland'],
        ['name' => 'Margaret Hamilton', 'role' => 'Director', 'city' => 'Boston'],
        ['name' => 'Tim Berners-Lee', 'role' => 'Inventor', 'city' => 'Geneva'],
    ]);

Print it in your template:

Blade

<x-celerik :component="$grid" />

Twig

{{ celerik(grid) }}

Plain PHP

<?= $grid ?>

The grid works without JavaScript too: PHP renders a real <table> with its caption and header scopes, and the bundle turns it into a sortable, searchable, paged grid.

Next steps

• How it works: rendering, options and the JavaScript API.
• Data endpoints: server-side grids and calendars with respond().
• Set up plain PHP, Laravel or Symfony.
• Browse the components.