What is antd-layout?

antd-layout @adminui.dev/antd-layout is a frontend layout component built on top of ant-design and react-router. It is fully open-source and provides flexible, diverse layout styles, along with support for custom theme skins. It is particularly well-suited for admin panels and web dashboard projects that require a high degree of customization. Hereafter referred to as antd-layout:

🎉 Live Demo

Layout Component

In frontend frameworks, layout pages (components) are typically located in the scr/layouts directory. antd-layout is added to layout files as a component. Through configuration options, it enables all pages in the project to present rich and dynamic styles, offering a high level of flexibility.

Features

• Supports multiple layout modes and detailed property controls
• Supports dynamic monochrome theme switching
• Supports custom theme skins
• Supports i18n internationalization
• Control over brand size and color depth
• Fine-grained control over user avatar positioning
• Detailed control over icons down to basic UI components

Tech Stack

• node.js (22+)
• react (18+)
• react-intl (8.0)
• react-router (7.11)
• ant-design (6.10)
• vite (7.0+)

Use Cases

• Single-page admin dashboards
• Dashboard projects with highly customized UI
• SaaS management systems
• Systems developed based on the ant-design ecosystem

Not Suitable For

• Projects requiring server-side rendering (SSR)
• Projects requiring full static site generation
• End-user-oriented free layout platforms