# Symfony Add AdminKit to a Symfony web application with AssetMapper's importmap:require, a Twig base layout and Turbo navigation. The Symfony `webapp` pack uses AssetMapper with an import map, so AdminKit is added with `importmap:require` and imported from `assets/app.js`. No Node build step is needed. ## Install ```bash composer create-project symfony/skeleton my-app cd my-app composer require webapp php bin/console importmap:require @adminkit/core ``` `importmap:require` downloads `app.js` into `assets/vendor/` and adds it to `importmap.php`, pinned to the version it resolved. AdminKit PRO is not published to npm. Copy `dist/` from the download into `assets/adminkit/`, import `./adminkit/css/app.css` and `./adminkit/js/app.js` with relative paths instead of the CDN link and `@adminkit/core`, and load `head.js` with `{{ asset('adminkit/js/head.js') }}`. ## Import the CSS and JavaScript Import `app.js` from the `app` entry point, which `{{ importmap('app') }}` in `base.html.twig` already loads. Turbo Drive replaces `` on every visit while the script keeps running, and `app.js` sets up the icons and the sidebar in each new body. ```js title="assets/app.js" import './stimulus_bootstrap.js'; import '@adminkit/core'; ``` `importmap:require` downloads single files, and the stylesheet's fonts are separate files next to it, so link the stylesheet from the CDN in ``, before the import map: ```twig title="templates/base.html.twig" ``` ### Optional: avoid a color mode flash Without `head.js`, `app.js` applies the stored [color mode](/docs/getting-started/dark-mode/) once it runs, so a visitor who picked the mode opposite to their operating system briefly sees the other one. `head.js` applies it before the first paint. Load it as a plain script in ``, before the stylesheet: ```twig ``` ## Minimal layout ```twig title="templates/base.html.twig" {% block title %}Dashboard{% endblock %} {% block stylesheets %}{% endblock %} {% block javascripts %} {% block importmap %}{{ importmap('app') }}{% endblock %} {% endblock %}
{% block body %}{% endblock %}
``` ```php title="src/Controller/DashboardController.php" render('dashboard/index.html.twig'); } } ``` ```twig title="templates/dashboard/index.html.twig" {% extends 'base.html.twig' %} {% block body %}

Dashboard

Hello from AdminKit.
{% endblock %} ``` ## Run ```bash php -S localhost:8000 -t public ``` Open http://localhost:8000. You should see the dark sidebar, the navbar with the hamburger toggle and the card, with the Symfony debug toolbar at the bottom. With the Symfony CLI installed, `symfony server:start` serves the same app. ## Notes - `assets/app.js` in the generated project also imports `./styles/app.css` and logs a welcome message. Keep the stylesheet import for your own CSS, which loads after the AdminKit stylesheet, or remove it. - AssetMapper serves the files directly in the `dev` environment. For production, run `php bin/console asset-map:compile`. - The CDN URLs above are unpinned and serve the latest published version. Pin the version `importmap:require` reports, for example `https://unpkg.com/@adminkit/core@/dist/css/app.css`. --- Canonical HTML page: https://adminkit.io/docs/frameworks/symfony/ Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/docs/ · Questions: support@adminkit.io