Skip to content

Commit 990650d

Browse files
committed
Improve headless doc introduction
1 parent b0d2e30 commit 990650d

File tree

2 files changed

+26
-14
lines changed

2 files changed

+26
-14
lines changed

docs_headless/src/content/docs/Getting-Started.md

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,39 @@
22
title: "Getting Started"
33
---
44

5-
Welcome to ra-core, the headless foundation of react-admin! This documentation will guide you through building powerful admin applications using your preferred UI library.
5+
Welcome to ra-core, the headless single-page application framework for React that helps you build admins panels, internal tools, dashboards, ERPs, and B2B Apps, on top of any REST or GraphQL API.
66

77
![ra-core examples using various UI libraries](../../img/ra-core-quick-start-guide-hero.png)
88

99
## What is ra-core?
1010

11-
Ra-core is the headless version of react-admin - it provides all the business logic, data management, and state handling without being tied to any specific UI library. While react-admin comes with a complete Material UI-based interface, ra-core gives you the freedom to build your admin interface with [Ant Design](https://ant.design/), [Chakra UI](https://chakra-ui.com/), [Daisy UI](https://daisyui.com/), [Shadcn UI](https://ui.shadcn.com/), or any custom UI components.
11+
Ra-core provides hooks and components to manage the data fetching, data edition, navigation, security, and internationalization logic that you've probably already implemented several times and that form the base of any single-page application. It glues together powerful React libraries like [TanStack Query](https://tanstack.com/query/latest/docs/react/overview), [react-hook-form](https://react-hook-form.com/), and [react-router](https://reactrouter.com/).
12+
13+
Ra-core has a strong emphasis on relational APIs, and lets you aggregate data from several sources directly in the frontend without the need for complex backend logic.
14+
15+
Ra-core is headless, so it gives you the freedom to build your admin interface with [Shadcn UI](https://ui.shadcn.com/), [Material UI](https://mui.com/material-ui/), [Ant Design](https://ant.design/), [Chakra UI](https://chakra-ui.com/), [Daisy UI](https://daisyui.com/), or any custom UI components.
1216

1317
You can use ra-core to:
1418
- **Create your own admin app** with your preferred design system
1519
- **Build your own admin framework** by adding your own UI layer on top of ra-core's business logic
1620

17-
Throughout this documentation, we'll use the terms 'ra-core', 'react-admin headless', and 'react-admin' interchangeably when referring to concepts that apply to the headless core functionality.
21+
## Who Uses ra-core?
22+
23+
Ra-core is the base of two popular admin frameworks:
24+
25+
- **[React-Admin](https://marmelab.com/react-admin/)**: The complete Material UI implementation
26+
- **[Shadcn Admin Kit](https://marmelab.com/shadcn-admin-kit/)**: A modern implementation using Shadcn UI
27+
28+
These frameworks themselves are used by thousands of developers worldwide.
29+
30+
if you want to see demos of ra-core in action, check out the following resources:
31+
32+
- [Atomic CRM](https://marmelab.com/atomic-crm/), a complete CRM built on top of Supabase
33+
- [E-commerce backend](https://marmelab.com/shadcn-admin-kit/demo/), a demo built with Shadcn UI and ra-core
34+
- [HelpDesk ticketing App](https://marmelab.com/react-admin-helpdesk/), a demo built with Material UI
35+
- [Writer's Delight](https://marmelab.com/writers-delight/), a note-taking app with AI capabilities
36+
- [Navidrome](https://demo.navidrome.org/app/), a Spotify clone
37+
- [Kanban](https://djhi.github.io/atomic-pm/#/boards/1), a Kanban board application
1838

1939
## Why Choose ra-core?
2040

@@ -209,14 +229,6 @@ Ra-core provides the foundation; you build the interface. Here's a suggested dev
209229

210230
8. **Advanced Layouts**: Build tabbed forms, filter panels, breadcrumbs, and responsive designs. Create specialized layouts for different screen sizes, implement advanced form patterns like wizard flows, and enhance navigation with breadcrumbs.
211231

212-
## Real-World Examples
213-
214-
See ra-core in action with different UI libraries:
215-
216-
- **[React-Admin](https://marmelab.com/react-admin/)**: The complete Material UI implementation
217-
- **[Shadcn Admin Kit](https://marmelab.com/shadcn-admin-kit/)**: A modern implementation using Shadcn UI
218-
- **[Tutorial: React-Admin with Daisy UI](https://marmelab.com/blog/2023/11/28/using-react-admin-with-your-favorite-ui-library.html)**: Step-by-step guide using Tailwind CSS, Daisy UI, Tanstack Table, and React-Aria
219-
220232
## Documentation Structure
221233

222234
This documentation is organized to help you build effectively:

docs_headless/src/content/docs/index.mdx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
title: ra-core
3-
description: Headless core of React Admin
2+
title: Headless Single-Page Application Framework for React
3+
description: The Headless SPA Framework for React
44
template: splash
55
hero:
6-
tagline: Welcome to ra-core, the headless foundation of react-admin!
6+
tagline: Battle-tested hooks and components to build high-performance apps with react-query, react-hook-form, react-router, and TypeScript on top of any REST or GraphQL API. Used by React-admin, shadcn-admin-kit, and thousands of developers.
77
actions:
88
- text: Get started
99
link: /ra-core/getting-started/

0 commit comments

Comments
 (0)