React-admin Demos

If you want to see what react-admin is capable of, or if you want to learn from apps built by seasoned react-admin developers, check out these demos.

<style> .demos-list { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 10px; } @media (max-width: 600px) { .demos-list { grid-template-columns: repeat(1, 1fr); } .iframe-wrapper { max-width: 100%; } } .card { box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2); transition: 0.3s; background-color: rgba(243, 246, 249, 0.4); border: 1px solid rgba(0,0,0,0.25); border-radius: 10px; margin: 0; display: flex; flex-direction: column; } .card:hover { box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2); } .card > img, .card > video { border-radius: 5px; max-width: 100%; } .mardown-section > video, .markdown-section, img { max-width: 100%; } .content-card { padding: 2px; margin-left: 1rem; margin-right: 1rem; text-decoration: none !important; } .title-card { margin-bottom: 0.4rem !important; font-size: 1.75em; color: black; } .description-card { color: rgb(100,100,100); } .card-footer { flex-grow: 1; display: flex; flex-direction: column-reverse; } .links-container { padding: 2px; margin-left: calc(1rem - 10px); margin-right: calc(1rem - 10px); display: flex; justify-content: space-between; } .link { color: rgb(0, 127, 255) !important; padding: 10px; border-radius: 5px } .link:hover { background-color: rgba(0, 127, 255, 0.07) !important; } .no-decoration, .link { text-decoration: none !important; } .iframe-wrapper { float: none; clear: both; max-width: 92.25%; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; } .iframe-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> <div class="demos-list"> <div class="card"> <a href="#e-commerce" class="no-decoration"></a> <div class="content-card"> <a href="#e-commerce" class="no-decoration"> <p class="title-card"><b>E-commerce</b></p> <p class="description-card">The admin of a fictional poster shop, allowing to manage sales, products, customers and reviews. Built by the core team.</p> </a> </div> <div class="card-footer"> <div class="links-container"> <p><b><a href="https://marmelab.com/react-admin-demo/" class="demo link">Demo</a></b></p> <p><b><a href="https://github.com/marmelab/react-admin/tree/master/examples/demo" class="source-code link">Source code</a></b></p> </div> </div> </div> <div class="card"> <a href="#crm" class="no-decoration"></a> <div class="content-card"> <a href="#crm" class="no-decoration"> <p class="title-card"><b>CRM</b></p> <p class="description-card">A complete CRM app allowing to manage contacts, companies, deals, notes, tasks, and tags. Uses Supabase as backend. Built by the core team.</p> </a> </div> <div class="card-footer"> <div class="links-container"> <p><b><a href="https://marmelab.com/react-admin-crm/" class="demo link">Demo</a></b></p> <p><b><a href="https://github.com/marmelab/atomic-crm" class="source-code link">Source code</a></b></p> </div> </div> </div> <div class="card"> <a href="#help-desk" class="no-decoration"></a> <div class="content-card"> <a href="#help-desk" class="no-decoration"> <p class="title-card"><b>Help Desk</b></p> <p class="description-card">A ticketing app with realtime collaboration and site-wide search. Built by the core team.</p> </a> </div> <div class="card-footer"> <div class="links-container"> <p><b><a href="https://marmelab.com/react-admin-helpdesk/" class="demo link">Demo</a></b></p> <p><b><a href="https://github.com/marmelab/react-admin-helpdesk" class="source-code link">Source code</a></b></p> </div> </div> </div> <div class="card"> <a href="#note-taking-app" class="no-decoration"></a> <div class="content-card"> <a href="#note-taking-app" class="no-decoration"> <p class="title-card"><b>Note-taking app</b></p> <p class="description-card">Writer's Delight lets you write notes, essays, and stories with an AI assistant. Built by the core team.</p> </a> </div> <div class="card-footer"> <div class="links-container"> <p><b><a href="https://marmelab.com/writers-delight/" class="demo link">Demo</a></b></p> <p><b><a href="https://github.com/marmelab/writers-delight/" class="source-code link">Source code</a></b></p> </div> </div> </div> <div class="card"> <a href="#blog-admin" class="no-decoration"></a> <div class="content-card"> <a href="#blog-admin" class="no-decoration"> <p class="title-card"><b>Blog admin</b></p> <p class="description-card">A simple application with posts, comments and users that we use for our e2e tests. Designed to use most of the react-admin features. Built by the core team.</p> </a> </div> <div class="card-footer"> <div class="links-container"> <p><b><a href="https://stackblitz.com/github/marmelab/react-admin/tree/master/examples/simple" class="demo link">Demo</a></b></p> <p><b><a href="https://github.com/marmelab/react-admin/tree/master/examples/simple" class="source-code link">Source code</a></b></p> </div> </div> </div> <div class="card"> <a href="#music-player" class="no-decoration"></a> <div class="content-card"> <a href="#music-player" class="no-decoration"> <p class="title-card"><b>Music Player</b></p> <p class="description-card">Navidrome is a Spotify clone allowing to manage songs, artists, playlists, and favorites.</p> </a> </div> <div class="card-footer"> <div class="links-container"> <p><b><a href="https://demo.navidrome.org/app/" class="demo link">Demo</a></b></p> <p><b><a href="https://github.com/navidrome/navidrome/" class="source-code link">Source code</a></b></p> </div> </div> </div> <div class="card"> <a href="#todo-app" class="no-decoration"></a> <div class="content-card"> <a href="#todo-app" class="no-decoration"> <p class="title-card"><b>Todo App</b></p> <p class="description-card">React-admin used in headless mode</p> </a> </div> <div class="card-footer"> <div class="links-container"> <p><b><a href="https://marmelab.com/react-admin-todo/" class="demo link">Demo</a></b></p> <p><b><a href="https://github.com/marmelab/react-admin-todo" class="source-code link">Source code</a></b></p> </div> </div> </div> <div class="card"> <a href="#kanban-board" class="no-decoration"></a> <div class="content-card"> <a href="#kanban-board" class="no-decoration"> <p class="title-card"><b>Kanban Board</b></p> <p class="description-card">A Kanban board built with React-admin Enterprise Edition</p> </a> </div> <div class="card-footer"> <div class="links-container"> <p><b><a href="https://djhi.github.io/atomic-pm/#/boards/1" class="demo link">Demo</a></b></p> <p><b><a href="https://github.com/djhi/atomic-pm" class="source-code link">Source code</a></b></p> </div> </div> </div> <div class="card"> <a href="#team-wiki" class="no-decoration"></a> <div class="content-card"> <a href="#team-wiki" class="no-decoration"> <p class="title-card"><b>Team Wiki</b></p> <p class="description-card">A Team Wiki board built with React-admin Enterprise Edition</p> </a> </div> <div class="card-footer"> <div class="links-container"> <p><b><a href="https://marmelab.com/team-wiki/" class="demo link">Demo</a></b></p> <p><b><a href="https://github.com/marmelab/team-wiki" class="source-code link">Source code</a></b></p> </div> </div> </div> <div class="card"> <a href="#broadcom-layer-7-api-hub" class="no-decoration"></a> <div class="content-card"> <a href="#broadcom-layer-7-api-hub" class="no-decoration"> <p class="title-card"><b>Developer portal</b></p> <p class="description-card">Interactive documentation and rights administration for an API gateway</p> </a> </div> <div class="card-footer"> <div class="links-container"> <p><b><a href="https://github.com/CAAPIM/APIHub" class="source-code link">Source code</a></b></p> </div> </div> </div> </div>

E-commerce

The admin of a fictional poster shop, allowing to manage sales, products, customers and reviews. Built by the core team.

<div style="padding:56.25% 0 0 0;position:relative;"> <iframe src="https://www.youtube-nocookie.com/embed/bJEo1O1oT6o" title="react admin e commerce demo" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen referrerpolicy="strict-origin-when-cross-origin"></iframe> </div>

• Demo: https://marmelab.com/react-admin-demo/
• Source code: https://github.com/marmelab/react-admin/tree/master/examples/demo

The source shows how to implement the following features:

• Custom theme with white AppBar
• Line chart with Echart
• List widget embedded in another page
• Tabbed Datagrid
• Row expand with a custom show view
• Grid list showing a list of images
• Filter sidebar
• Custom form layout
• Custom page with static list
• Edit view in a sidebar

A modified version of this demo uses the React Admin Enterprise features.

<div style="padding:56.93% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/884005183?h=7f12a85dcf&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div>

• Demo: https://marmelab.com/ra-enterprise-demo/
• Source code: https://github.com/marmelab/ra-enterprise-demo

The source shows example implementation of the following features:

• Solar Layout
• Breadcrumb
• Editable Datagrid
• Accordion Form
• Locks
• Live List
• Realtime Data Provider
• Calendar
• Audit Log
• Search Sub Menu
• Category List with Hierarchical Structure
• Markdown Input
• Markdown Field
• Guided Tours

CRM

Atomic CRM is a complete CRM app allowing to manage contacts, companies, deals, notes, tasks, and tags. Built by the core team. You can use it as a template to build your own CRM.

<video src="https://user-images.githubusercontent.com/99944/116970434-4a926480-acb8-11eb-8ce2-0602c680e45e.mp4" controls="controls"></video>

• Demo: https://marmelab.com/react-admin-crm/
• Source code: https://github.com/marmelab/atomic-crm

The source shows how to implement the following features:

• Horizontal navigation
• Custom exporter
• Trello-like Kanban board for the deals pipeline
• Custom d3.js / Nivo Chart in the dashboard
• Add or remove tags to a contact
• Use dataProvider hooks to update notes
• Custom grid layout for companies
• Filter by "my favorites" in the company list

Help Desk

A simple help desk app allowing to manage issues, users, and tags. ZenDesk / Linear clone, built by the core team.

<video src="https://user-images.githubusercontent.com/99944/212743583-a4ee135f-f55b-4305-86c4-a3da1c49bb98.mov" controls="controls"></video>

• Demo: https://marmelab.com/react-admin-helpdesk/
• Source code: https://github.com/marmelab/react-admin-helpdesk

The source shows how to implement the following features:

• Real-time notifications
• Real-time reads and locks
• Site search
• Reference counting
• Show Aside
• Lifecycle callbacks
• Tabs with count
• Custom list layout with side filters
• Custom List layout for messages
• Custom creation form
• Latest Reference Field
• Mark as read on visit
• List with live updates

Note-taking App

Writer's Delight lets you write notes, essays, and stories with an AI assistant. Built by the core team.

<iframe src="https://www.youtube-nocookie.com/embed/XytdFN1Oqg8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="aspect-ratio: 16 / 9;width:100%;margin-bottom:1em;" referrerpolicy="strict-origin-when-cross-origin"></iframe>

• Demo: https://marmelab.com/writers-delight/
• Source code: https://github.com/marmelab/writers-delight/

The source shows how to implement the following features:

• Predictive Text Input
• AutoSave
• Infinite List
• Edit with List sidebar
• Offline-first data provider
• Custom Layout
• Custom theme
• Splash Screen
• Headless Delete
• useCreate
• useStore

Blog Admin

A simple application with posts, comments and users that we use for our e2e tests. Not designed to have a good UX, but to use most of the react-admin features. Built by the core team.

• Demo: available on Stackblitz or on Codesandbox
• Source code: https://github.com/marmelab/react-admin/tree/master/examples/simple

Music Player

Navidrome is a Spotify clone allowing to manage songs, artists, playlists, and favorites.

• Demo: https://demo.navidrome.org/app/
• Source code: https://github.com/navidrome/navidrome/

Todo App

The classic todo app from TodoMVC built with react-admin in headless mode.

• Demo: https://marmelab.com/react-admin-todo/
• Source code: https://github.com/marmelab/react-admin-todo

The source shows how to implement the following features:

• Headless admin
• Custom Layout
• Custom List iterator
• Edit-in-place
• Inline Create form
• Custom filter UI

Shows how to use react-admin without Material UI.

Kanban Board

A Kanban board built with React-admin Enterprise edition.

• Demo: https://djhi.github.io/atomic-pm
• Source code: https://github.com/djhi/atomic-pm

It leverages the following Enterprise Edition features:

• Realtime
• Navigation
• Form layout
• History
• Markdown

The source shows how to implement the following features:

• Custom Layout
• Custom UserMenu
• Custom dataProvider methods
• InPlace Edition
• Drag & drop

Team Wiki

A Team Wiki board built with React-admin Enterprise edition.

• Demo: https://marmelab.com/team-wiki/
• Source code: https://github.com/marmelab/team-wiki

It leverages the following Enterprise Edition features:

• Navigation
• History
• Markdown
• Search
• Tree

The source shows how to implement the following features:

• AppBar with Custom Navigation and Search
• Customizing the Markdown Input
• Custom List

Broadcom Layer 7 API Hub

A framework built on top of react-admin for building developer portals.

• Source code: https://github.com/CAAPIM/APIHub

Other Apps

Check out Issue #4027 on the react-admin GitHub for a list of apps built by other people.

Your App Here / showcase

Did you publish an app built with react-admin with open-source code? Open a PR on this page to add it to this list.

<script src="https://player.vimeo.com/api/player.js"></script>