Skip to content
Get packs

Guide · Open source

How to use layui: install, build pages and tips

Updated · written with AI from the project's own documentation and checked against our catalogue data

Layui is an open-source Web UI component library that provides ready-made parts such as buttons, forms, tables and pop-up windows. It is written for standard browser code, with no build system or specific framework required. This guide explains what Layui is, how to get the source, and where it fits, so you can decide whether to use it and how to start.

Layuilayui/layui · ★ 30.6k · MIT

Quick start

  1. 1Confirm the fit. Check that your project is an existing Layui site or a small browser-native project, since the README points new large single-page apps elsewhere.
  2. 2Clone the repository. Run git clone https://github.com/layui/layui.git in the folder where you want the source.
  3. 3Pick the version. Use Layui 2.x, since Layui 3 is listed as still in development in the README.
  4. 4Read the official docs. Open the Layui 2 documentation at layui.dev/docs/2/ to find component markup and JavaScript usage.
  5. 5Build a plain HTML page. Write standard HTML, CSS and JavaScript that uses the components, with no build system required.
  6. 6Check the licence. Confirm the MIT licence terms in the repository before you ship the project.

What is Layui and who is it for?

Layui is a set of ready-made user interface components for websites. You write standard HTML, CSS and JavaScript for browsers rather than working through a framework. The project says it was built to lower the barrier for people who are not front-end specialists to create complex web interfaces.

The README describes these best-fit groups: developers maintaining existing sites or admin panels built on Layui, non-front-end developers who want UI components without learning a framework, small projects that prefer plain browser-native code, and teams already running Layui 2.x in production.

Get the Layui source code

The README's install instruction is to clone the repository. Run the following command in the folder where you want the project to live.

  • The README lists no prerequisites for this step.
  • The README's install method is listed as 'other', so check the repository files after cloning to see how they are organised.
git clone https://github.com/layui/layui.git

Choose between Layui 2.x and Layui 3

The documentation links to Layui 2 at layui.dev/docs/2/. Layui 3 is listed as still in development, and the README points to an issue thread for it.

For new work, the README's guidance is that Layui 3 is not yet available. Teams that already use Layui 2.x in production are the group the project names as a good fit.

Use Layui components in a plain browser page

Layui follows browser-native development. The README describes writing standard HTML, CSS and JavaScript for the browser, so the page you build is a normal web page that loads the library's own files. The README does not document the exact include tags or component APIs, so consult the official docs at https://layui.dev for usage details.

  • Buttons, forms, tables and pop-up windows are the component types the summary names.
  • There is no build system step described in the source.
  • Use the docs site for component markup and JavaScript calls.

Check licence, fit and limits before you commit

Layui is released under the MIT licence, and the project describes itself as open-source and free. The README also notes a disclaimer document in its repository.

The README does not describe a React, Vue or similar integration, and it does not compare component depth or accessibility with other libraries. Layui is therefore a weaker fit for a new large single-page app or for projects that need a wide modern component ecosystem. Comparable projects named in the material include Bootstrap, Element Plus, Ant Design and Materialize.

  • Good fit: maintaining an existing Layui site or admin panel.
  • Good fit: plain browser-native code with no framework.
  • Weaker fit: a new large single-page application.
  • Weaker fit: projects needing a broad modern component ecosystem.

What people use it for

  • Maintaining an existing admin panel built on Layui
  • Adding buttons, forms, tables and pop-up windows to a plain website
  • Building a small internal tool with browser-native code and no framework
  • Upgrading or supporting a production site that already runs Layui 2.x

Frequently asked questions

Is Layui free to use?

The project describes Layui as open-source and free, and it is released under the MIT licence. The README also links a disclaimer document in the repository for other related terms.

Does Layui need a build system or a framework?

No. The project describes a plain approach: you write standard HTML, CSS and JavaScript for browsers without a build system or a specific framework.

How do I install Layui?

The README's install instruction is to clone the repository with git clone https://github.com/layui/layui.git. The source does not list prerequisites.

Should I use Layui 2 or Layui 3?

The README says Layui 3 is still in development, so Layui 2.x is the version the README points to for current use. Teams already running Layui 2.x in production are a named good fit.

Does Layui work with React or Vue?

The README does not describe a React, Vue or similar integration. If you need a framework-based workflow, check the official docs or consider alternatives.

What are alternatives to Layui?

The comparable projects listed are Bootstrap, Element Plus, Ant Design and Materialize. The README does not compare them with Layui on component depth or accessibility, so test them against your needs.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Layui suits teams maintaining existing Layui 2.x sites or admin panels, and people who want UI components in plain browser code without a build system. It is a weaker choice for a new large single-page app or for projects that need a broad modern component ecosystem, where Element Plus, Ant Design or Bootstrap may fit better.

Install options & downloads