Ant Design Landing is a collection of React-based landing page templates and an online editor for the Ant Design system, built on Ant Motion's motion components.
What is Ant Design Landing?
Ant Design Landing is a template library and site-building tool maintained by the Ant Design / Ant Motion team. It takes pre-built homepage designs and modular content blocks as inputs and outputs a React code package you can drop into your project. The project provides a gallery of downloadable templates on landing.ant.design, a module system for composing layouts, and an online editor for building pages in the browser.
Key Features
- Template gallery — Offers a variety of homepage template designs that can be downloaded as code packages.
- Online editor — A browser-based editor at landing.ant.design/edit lets you assemble pages from modules without writing code upfront.
- Ant Motion integration — Templates use Ant Motion's motion components, adding animations that match the Ant Design visual language.
- Responsive layouts — The documentation includes a layout guide to help pages adapt to different screen sizes.
- Modular construction — Diverse modules can be mixed to configure the exact landing page structure, such as hero, features, and footer blocks.
- Scaffolding examples — Official integration examples are provided for dva-cli and umi projects.
- Bilingual documentation — README and docs are available in both English and Simplified Chinese.
Who is it for?
Front-end developers working with React can download a template and customize its source to ship a landing page quickly without designing components from scratch. Designers using the Ant Design specification can use the editor to prototype homepage layouts and hand off React code. Teams building marketing pages inside a larger React application will benefit from the modular structure and the provided scaffolding examples.
What can you do with Ant Design Landing?
- Front-end developers: Download a template's code package, import it into a React project, and customize colors, content, and animations using Ant Design conventions.
- Designers: Arrange and re-skin modules in the online editor, preview the responsive result, and export code for implementation.
- Product teams: Assemble a complete homepage from modules like hero banners, feature grids, and pricing tables, then integrate the generated React components into an existing site.
How does Ant Design Landing work?
Two primary usage paths are described in the project docs: you can pick a template from the gallery and download its code package to use directly in your React project, or you can open the online editor at landing.ant.design/edit, compose a page from modules, and generate the corresponding React code. The documentation also covers specifications and responsive layout guidance for adapting the templates to your site.
