Preline UI Framework Guides
Set up Preline UI with Tailwind CSS and JavaScript plugins in React, Next.js, Vue, Nuxt, Angular, Astro, Laravel, and other framework projects.
Installation
This guide will help you get started with Preline UI, including how to run, customize, update, and integrate your project!
HTML + Vite
Vite is a blazing fast frontend build tool powering the next generation of web applications.
React + Vite
A JavaScript library for building user interfaces.
Next.js
Production grade React applications that scale.
Vue.js
A framework for building web user interfaces.
Nuxt.js
Meta-framework for universal applications.
Angular
Platform for building mobile and desktop web applications.
Astro
All-in-one web framework for building fast websites.
SolidJS
Simple and performant reactivity for building user interfaces.
Qwik
Qwick is an instant-loading framework with minimal overhead.
Svelte
Svelte is a JS framework for building fast, efficient web apps.
Remix
Remix is a full stack React web framework.
Laravel
PHP web application framework with expressive, elegant syntax.
Hugo
Static site generator for building fast, secure, and scalable websites.
Adonis
TypeScript-first web framework for building web apps and API servers.
Livewire
Full-stack framework for Laravel to build modern apps.
Symfony
PHP-based full-stack framework for building modern web apps.
Rails
Ruby-based full-stack MVC framework to build modern apps.
Phoenix LiveView
Elixir-based full-stack framework to build modern apps.
Ember.js
JavaScript-based full-stack framework to build modern apps.
Flask
Python-based microframework for building web applications.
Django
Python-based full-stack framework for building web applications.
Express.js
Node.js framework for building web applications.
Blazor
Framework for building web applications with C#.
ASP.NET Core
Framework for building web applications with C#.
Specific guides
Practical notes for wiring Preline UI JavaScript plugins into common framework projects.
Using Preline UI with HTML + Vite
Use Preline UI JavaScript plugins in HTML + Vite projects, including auto entries, non-auto imports, manual instances, cleanup, and optional dependencies.
View guideUsing Preline UI with Hugo
Use Preline UI JavaScript plugins in Hugo projects, including static scripts, module imports, Hugo Pipes, cleanup, and optional dependencies.
View guideUsing Preline UI with Express
Use Preline UI JavaScript plugins in Express projects, including static scripts, module bundles, template rendering, cleanup, and optional dependencies.
View guideUsing Preline UI with React + Vite
Use Preline UI JavaScript plugins in React + Vite projects, including autoInit, module imports, cleanup, and optional dependencies.
View guideUsing Preline UI with Next.js
Use Preline UI JavaScript plugins in Next.js projects, including client boundaries, rescans, cleanup, and optional dependencies.
View guideUsing Preline UI with Remix
Use Preline UI JavaScript plugins in Remix projects, including client effects, route rescans, cleanup, and optional dependencies.
View guideUsing Preline UI with Vue
Use Preline UI JavaScript plugins in Vue projects, including mounted hooks, router rescans, cleanup, and optional dependencies.
View guideUsing Preline UI with Nuxt
Use Preline UI JavaScript plugins in Nuxt projects, including client plugins, route hooks, rescans, cleanup, and optional dependencies.
View guideUsing Preline UI with Angular
Use Preline UI JavaScript plugins in Angular projects, including lifecycle hooks, dynamic views, cleanup, and optional dependencies.
View guideUsing Preline UI with Ember.js
Use Preline UI JavaScript plugins in Ember.js projects, including route rescans, element modifiers, cleanup, and optional dependencies.
View guideUsing Preline UI with Svelte
Use Preline UI JavaScript plugins in Svelte and SvelteKit projects, including onMount, tick, afterNavigate, actions, cleanup, and optional dependencies.
View guideUsing Preline UI with SolidJS
Use Preline UI JavaScript plugins in SolidJS projects, including onMount, createEffect, router rescans, cleanup, and optional dependencies.
View guideUsing Preline UI with Qwik
Use Preline UI JavaScript plugins in Qwik projects, including visible tasks, Qwik City navigation, cleanup, and optional dependencies.
View guideUsing Preline UI with Astro
Use Preline UI JavaScript plugins in Astro projects, including layout client scripts, astro:page-load, framework islands, cleanup, and optional dependencies.
View guideUsing Preline UI with AdonisJS
Use Preline UI JavaScript plugins in AdonisJS projects, including Vite entrypoints, Edge templates, Inertia navigation, cleanup, and optional dependencies.
View guideUsing Preline UI with Laravel
Use Preline UI JavaScript plugins in Laravel projects, including the Vite entrypoint, the ES-module dependency ordering trap, Blade templates, cleanup, and optional dependencies.
View guideUsing Preline UI with Laravel Livewire
Use Preline UI JavaScript plugins in Laravel Livewire projects, including the Vite entrypoint, livewire:navigated and morph hooks, Blade templates, cleanup, and optional dependencies.
View guideUsing Preline UI with Symfony
Use Preline UI JavaScript plugins in Symfony projects, including the Webpack Encore entry, AssetMapper, the Turbo Drive re-init hook, Twig templates, cleanup, and optional dependencies.
View guideUsing Preline UI with Phoenix LiveView
Use Preline UI JavaScript plugins in Phoenix LiveView projects, including the esbuild app.js entry, Vite, the phx:page-loading-stop and phx:update re-init hooks, Phoenix LiveView Hooks, HEEx templates, cleanup, and optional dependencies.
View guideUsing Preline UI with Flask
Use Preline UI JavaScript plugins in Flask projects, including serving Preline from static files, the Vite build path, the htmx re-init hook, Jinja2 templates, cleanup, and optional dependencies.
View guideUsing Preline UI with Django
Use Preline UI JavaScript plugins in Django projects, including serving Preline from static files, the django-vite build path, the htmx re-init hook, Django templates, cleanup, and optional dependencies.
View guideUsing Preline UI with Blazor
Use Preline UI JavaScript plugins in Blazor projects, including serving Preline from wwwroot, the IJSRuntime re-init pattern for Blazor Server renders, the enhancedload navigation hook, Razor components, cleanup, and optional dependencies.
View guideUsing Preline UI with ASP.NET Core
Use Preline UI JavaScript plugins in ASP.NET Core MVC and Razor Pages projects, including serving Preline from wwwroot with LibMan, the Vite build path, re-init after partial view and AJAX updates, Razor templates, cleanup, and optional dependencies.
View guide