---
url: /frontend.md
---

# Theme

Once the Evolve default theme is installed, you can start customizing it to your needs. The theme is located in the `theme` directory.
The frontend stack consists of:

* [Laravel Blade](https://laravel.com/docs/12.x/blade)
* [Laravel Livewire 3](https://livewire.laravel.com/docs/quickstart)
* [Tailwind CSS](https://tailwindcss.com/)
* [Alpine.js](https://alpinejs.dev/)

### Starting the development server

To start the development server, run the following command in the theme directory:

```bash
yarn theme:dev
```

### Building for production

To build the theme for production, run the following command in the theme directory:

```bash
yarn theme:build
```

### Directory structure

Here's a list of the most important directories and files in the theme directory:

* `dist`: Contains the compiled CSS and JavaScript files generated by [Vite](https://vite.dev/), these files are then copied to the *public* directory of your Laravel application.

* `src`: Contains the TypeScript and CSS source files.

* `tailwind`: Contains our theme config and some utility
  functions for [Tailwind](https://tailwindcss.com/).
  * `theme.js`: Contains the theme configuration for our design system tokens.

* `views`: Contains all views and layouts for the theme.
  * `components`: Contains Blade components.
  * `errors`: Contains error views.
  * `livewire`: Contains Livewire components.
  * `mail`: Contains mail views.
  * `vendor`: Contains view-overrides for vendor packages.

* `tailwind.config.js`: Contains the Tailwind configuration for the theme.

### Scaffolding and typings

* `php artisan evolve:blueprint {Name}` creates a blueprint class and tells you where its block view goes.
* `php artisan evolve:component {name} {fields?}` scaffolds a component with fields.
* `php artisan evolve:typings` writes TypeScript typings for the blueprints; `yarn theme:dev` and `yarn theme:build` run it for you.
* `php artisan theme:update` refreshes the theme's core library (`theme/.evolve`) after a package update; `theme:publish --force` re-publishes the whole starter theme and overwrites local changes.