| layout | title |
|---|---|
default |
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>
The admin of a fictional poster shop, allowing to manage sales, products, customers and reviews. Built by the core team.
- 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
- d3.js chart with Recharts
- 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.
- 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
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.
react-admin-crm.mp4
- 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
A simple help desk app allowing to manage issues, users, and tags. ZenDesk / Linear clone, built by the core team.
react-admin-help-desk-demo.mov
- 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
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;"></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
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
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/
A framework built on top of react-admin for building developer portals.
Check out Issue #4027 on the react-admin GitHub for a list of apps built by other people.
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>