Chakra Airbnb is an open-source front-end template that recreates the Airbnb home page using Next.js, TypeScript, and Chakra UI, designed for developers who want to study or reuse the code. The project is hosted on GitHub under the repository MA-Ahmad/chakra-airbnb and is also listed on TemplatesKart, where users can view and copy code for its components.
What is Chakra Airbnb?
Chakra Airbnb is a front-end template that reproduces the Airbnb home page layout. Its input is a development environment with Node.js and npm or yarn; its output is a running Next.js application served at http://localhost:3000. The template is built by GitHub user MA-Ahmad and is published as an open-source repository, with 10 stars according to the repository metadata. It is one of the projects featured on TemplatesKart, which provides a web interface for browsing and copying the code of individual components.
Key Features
- Next.js framework — The template is built on Next.js, giving it a React-based architecture with file-based routing and a development server ready via
yarn dev. - TypeScript throughout — All source code is written in TypeScript, so components, props, and data structures carry static types.
- Chakra UI styling — Chakra UI is the underlying component and styling library, providing pre-built, themeable UI primitives for the home page layout.
- Single-page Airbnb home clone — The template focuses on reproducing the Airbnb home page, including its hero, search, and listing-card sections in a desktop layout.
- Quick local setup — Three commands —
git clone https://github.com/MA-Ahmad/chakra-airbnb,cd chakra-airbnb && yarn install, andyarn dev— start the app on http://localhost:3000. - Open-source distribution — The complete source is publicly available on GitHub, and the TemplatesKart listing offers per-component code copying.
Who is it for?
- Frontend developers learning Next.js — They can inspect a complete, small codebase that combines Next.js pages with TypeScript and Chakra UI components.
- Developers getting familiar with Chakra UI — The Airbnb home page is a realistic layout, so the template shows how Chakra UI handles grids, cards, buttons, and search inputs together.
- Hobbyists building booking or hospitality demos — They can clone the repository and modify the home page code to create their own property-search or rental interface mockup.
What can you do with Chakra Airbnb?
- Study the code: Read the TypeScript components and pages to see how a Next.js app is assembled with Chakra UI components.
- Run it locally: After following the installation commands, open http://localhost:3000 to view the home page in the browser.
- Customize the UI: Because the template is just one home page, you can edit the Chakra UI components to change colors, text, and layout without dealing with multiple routes.
- Share components: Use the TemplatesKart interface to view and copy individual component code snippets for use in other projects.
How does Chakra Airbnb work?
The template follows a standard Next.js workflow. First, clone the repository from GitHub. Second, run yarn install in the chakra-airbnb folder to install all dependencies. Third, execute yarn dev to launch the development server, which serves the home page at http://localhost:3000.
FAQ
Is Chakra Airbnb free?
Yes, the repository is public on GitHub, so the source code can be cloned, studied, and reused under the project's open-source license.
What do I need to run it?
You need Node.js and npm or yarn installed on your machine. The README lists Node.js and npm as requirements, and the installation commands use yarn.
What does the template include?
It includes the Airbnb home page built with Next.js, TypeScript, and Chakra UI. The exact sections visible in the app can be seen in the home screen screenshot on the project page.
Where can I view the code?
The full code is on GitHub at github.com/MA-Ahmad/chakra-airbnb, and the TemplatesKart website lets you view and copy code for specific components.
