Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/refinedev/refine
A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.
https://github.com/refinedev/refine
admin admin-ui ant-design crud developer-tools frontend-framework good-first-issue graphql hacktoberfest headless internal-tools javascript low-code nestjs nextjs open-source-project react react-framework react-hooks typescript
Last synced: about 2 months ago
JSON representation
A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.
- Host: GitHub
- URL: https://github.com/refinedev/refine
- Owner: refinedev
- License: mit
- Created: 2021-01-20T12:01:32.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-05-02T15:40:53.000Z (about 2 months ago)
- Last Synced: 2024-05-02T17:09:47.940Z (about 2 months ago)
- Topics: admin, admin-ui, ant-design, crud, developer-tools, frontend-framework, good-first-issue, graphql, hacktoberfest, headless, internal-tools, javascript, low-code, nestjs, nextjs, open-source-project, react, react-framework, react-hooks, typescript
- Language: TypeScript
- Homepage: https://refine.dev
- Size: 3.3 GB
- Stars: 24,827
- Watchers: 125
- Forks: 1,834
- Open Issues: 43
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
- Security: SECURITY.md
Lists
- awesome-react - refine - Build your React-based CRUD applications, without constraints (**Awesome React** [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) / React)
- awesome-stars - refine
- awesome - refinedev/refine - A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. (TypeScript)
- awesome-readme - refinedev/refine - Clean project logo. Brief description at top. Multiple badges. Usage description and examples. Use cases and demo links. Screenshots. Key Features. Contributors. Stargazers. Contribution guidelines. (Examples)
- jimsghstars - refinedev/refine - A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. (TypeScript)
- awesome - refinedev/refine - A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. (TypeScript)
- awesome - refinedev/refine - A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. (TypeScript)
- awesome - refinedev/refine - A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. (TypeScript)
- awesome-stars - refinedev/refine - A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. (TypeScript)
- awesome-stars - refinedev/refine
- awesome-stars-Sunny-117 - refinedev/refine - A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. (TypeScript)
- awesome-stars - refinedev/refine - A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. (TypeScript)
- Absolute-Awesome - refinedev/refine - A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. (TypeScript)
- awesome-stars - refinedev/refine - A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. (TypeScript)
- awesome-repositories - refinedev/refine - A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. (TypeScript)
- awesome-stars - refinedev/refine - A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. (TypeScript)
- awesome-stars - refinedev/refine - A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. (TypeScript)
- awesome-stars - refinedev/refine - A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. (TypeScript)
- awesome-stars - refine
- awesome-stars - refine
- awesome-stars - refinedev/refine - A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. (TypeScript)
- awesome-stars - refinedev/refine - A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. (TypeScript)
- awesome - refinedev/refine - A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. (TypeScript)
- awesome-stars - refinedev/refine - A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. (TypeScript)
- awesome-stars - refine
- awesome-stars - refinedev/refine - A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. (TypeScript)
- project-awesome - refinedev/refine - A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. (TypeScript)
- awesome-stars - refinedev/refine - Build your React-based CRUD applications, without constraints. π Star to support our work! (TypeScript)
- awesome-stars - refine
- awesome-stars - refinedev/refine - A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. (typescript)
- awesome-stars - refine
- my-awesome - refinedev/refine - A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. (TypeScript)
- fucking-awesome-readme - refinedev/refine - Clean project logo. Brief description at top. Multiple badges. Usage description and examples. Use cases and demo links. Screenshots. Key Features. Contributors. Stargazers. Contribution guidelines. (Examples)
- awesome-stars - refinedev/refine - A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. (TypeScript)
- my-awesome-stars - refinedev/refine - A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. (TypeScript)
- awesome-stars - refinedev/refine - A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. (TypeScript)
- awesome - refinedev/refine - A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. (TypeScript)
- awesome-stars - refine
- awesome-stars - refinedev/refine - A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. (TypeScript)
- awesome-stars - refinedev/refine - A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. (TypeScript)
- my-awesome-stars - refine - based CRUD applications, without constraints. π Star to support our work! | refinedev | 14743 | (TypeScript)
- awesome-stars - refinedev/refine - `β 25697` A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. (TypeScript)
README
Build your React-based CRUD applications, without constraints.
An open-source, headless web application framework developed with flexibility in mind.
[![Awesome](https://github.com/refinedev/awesome-refine/raw/main/images/badge.svg)](https://github.com/refinedev/awesome-refine)
[![OpenSSF Best Practices](https://www.bestpractices.dev/projects/8101/badge)](https://www.bestpractices.dev/projects/8101)
[![npm version](https://img.shields.io/npm/v/@refinedev/core.svg)](https://www.npmjs.com/package/@refinedev/core)
[![](https://img.shields.io/github/commit-activity/m/refinedev/refine)](https://github.com/refinedev/refine/commits/master)
[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](CODE_OF_CONDUCT.md)[![Discord](https://img.shields.io/discord/837692625737613362.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/refine)
[![Twitter Follow](https://img.shields.io/twitter/follow/refine_dev?style=social)](https://twitter.com/refine_dev)
[![how-refine-works](https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/new-diagram.jpg)](https://refine.dev)
## What is Refine?
**Refine** is a meta **React** framework that enables the rapid⨠development of a wide range of web applications.
From internal tools to admin panels, B2B apps, and dashboards, it serves as a comprehensive solution for building any type of **CRUD** application.
Refine's internal hooks and components simplify the development process and eliminate repetitive tasks by providing industry-standard solutions for crucial aspects of a project, including **authentication**, **access control**, **routing**, **networking**, **state management**, and **i18n**.
**Refine** is _headless by design_, thereby offering unlimited styling and customization options.
## What do you mean by "headless" ?
Instead of being limited to a set of pre-styled components, **Refine** provides collections of helper `hooks`, `components`, `providers`, and more. Since business logic and the UI are completely decoupled, you can customize the UI without constraints.
It means that **Refine** just works _seamlessly_ with any _custom designs_ or _UI frameworks_. Thanks to it's headless architecture, you can use popular CSS frameworks like [TailwindCSS](https://tailwindcss.com/) or even create your own styles from scratch.
Refine also provides integrations with [Ant Design](https://ant.design/), [Material UI](https://mui.com/material-ui/getting-started/overview/), [Mantine](https://mantine.dev/), and [Chakra UI](https://chakra-ui.com/) to get you started quickly. These libraries are a set of components that are nicely integrated with the headless `@refinedev/core` package.
### Headless in Routing
For the routing, Refine's headless approach shines too. It doesn't tie you to a single routing method or library. Instead, it offers a simple routing interface with built-in integrations for popular libraries.
This means you can use Refine seamlessly on different platforms like React Native, Electron, Next.js, Remix, etc. without any extra setup steps.
## β‘ Try Refine
Refine's [browser-based app scaffolder](https://refine.dev/#playground) enables you to build a Refine app through an interactive, step-by-step process in your browser.
You have the freedom to select your preferred libraries and frameworks, and the tool generates a ready-to-download boilerplate code. This feature not only lets you preview and tweak your project on the fly but also accelerates the overall development workflow.
## Use cases
**Refine**Β shines on _data-intensiveβ‘_ enterprise B2B applications like **admin panels**, **dashboards** and **internal tools**. Thanks to the built-in **SSR support**, itΒ can also power _customer-facing_ applications like **storefronts**.
You can take a look at some live examples that can be built using **refine** from scratch:
- [Fully-functional CRM Application](https://example.crm.refine.dev/)
- [Fully-functional Admin Panel](https://s.refine.dev/readme-admin-panel)
- [Win95 Style Admin panel πͺ](https://win95.refine.dev/)
- [Medium Clone - Real World Example](https://s.refine.dev/readme-medium-clone)
- [Multitenancy Example](https://multi-tenancy-strapi.refine.dev/)
- [Storefront](https://s.refine.dev/readme-ssr-storefront)[π Refer to most popular real use case examples](https://refine.dev/docs/examples/)
[π More **Refine** powered different usage scenarios can be found here](https://refine.dev/docs/examples#other-examples)
## Key Features
βοΈ Zero-config, **one-minute setup** with a **single CLI command**
π Connectors for **15+ backend services** including [REST API](https://github.com/refinedev/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/refinedev/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/refinedev/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/refinedev/refine/tree/master/packages/airtable), [Strapi](https://github.com/refinedev/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/refinedev/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/refinedev/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/refinedev/refine/tree/master/packages/supabase), [Hasura](https://github.com/refinedev/refine/tree/master/packages/hasura), [Appwrite](https://github.com/refinedev/refine/tree/master/packages/appwrite), [Nestjs-Query](https://github.com/refinedev/refine/tree/master/packages/nestjs-query), [Firebase](https://firebase.google.com/), [Sanity](https://www.sanity.io/), and [Directus](https://directus.io/).
π **SSR support** with **Next.js** or **Remix**
π Auto-generated **CRUD** UIs from **your API data structure**
β Perfect **state management** & **mutations** with **React Query**
π **Advanced routing** with any router library of your choice
π Providers for seamless **authentication** and **access control** flows
β‘ Out-of-the-box support for **live / real-time applications**
π Easy **audit logs** & **document versioning**
π¬ Support for any **i18n** framework
πͺ Future-proof, **robust architecture**
βοΈ Built-in CLI with time-saving features
π» Refine [Devtools](https://github.com/refinedev/refine/blob/master/packages/devtools/README.md) - dive deeper into your app and provide useful insights
β Full **test coverage**
## Quick Start
There are two ways to create a Refine app: either by using the `create refine-app` CLI tool or the [browser-based app scaffolder](https://refine.dev/#playground).
To quickly start a Refine project with [Ant Design](https://ant.design/) as the default UI framework, run the following command.
```
npm create refine-app@latest -- -o refine-antd
```Once the setup is complete, navigate to the project folder and start your project with:
```
npm run dev
```
Your **Refine** application will be accessible at [http://localhost:5173](http://localhost:5173):
> Note: The command above uses pre-set options for ease. For a different tech stack, simply run:
>
> ```
> npm create refine-app@latest
> ```Let's consume a public `fake REST API` and add two resources (_blog_posts_ and _categories_) to our project. Replace the contents of `src/App.tsx` with the following code:
```tsx title="src/App.tsx"
import { Refine } from "@refinedev/core";
import {
notificationProvider,
ErrorComponent,
ThemedLayout,
} from "@refinedev/antd";
import routerProvider, { NavigateToResource } from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
import { AntdInferencer } from "@refinedev/inferencer/antd";
import "@refinedev/antd/dist/reset.css";
const App: React.FC = () => {
return (
}
>
} />
} />
} />
} />
} />
} />
} />
} />
);
};export default App;
```
π The [**Refine Inferencer package**](https://refine.dev/docs/packages/documentation/inferencer/) automatically generates `list`, `show`, `create`, and `edit` pages by guessing configurations from API data. We've used it here for a quick, clear start, but you can also choose to code your pages from scratch instead of using the Inferencer feature.
Now, you should see the output as a table populated with `blog_posts` & `category` data:
![First example result](https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/readme-quick-start-2.png)
You can get the auto-generated page codes by clicking the `Show Code` button on each page. Afterward, simply pass the pages to the `resources` array by replacing them with the Inferencer components.
## Next Steps
π Jump to [Tutorial](https://refine.dev/docs/tutorial/introduction/index/) to continue your work and turn the example into a full-blown CRUD application.
π Visit the [Learn the Basics page](https://refine.dev/docs/getting-started/overview/) to get informed about the fundamental concepts.
π Read more on [Advanced Tutorials
](https://refine.dev/docs/advanced-tutorials/) for different usage scenarios.π See the real-life [CRM Application](https://example.crm.refine.dev/) project built using Refine.
π Play with interactive [examples](https://refine.dev/docs/examples/).
## Contribution
[π Refer to the contribution docs for more information.](https://refine.dev/docs/contributing/#ways-to-contribute)
If you have any doubts related to the project or want to discuss something, then join our [Discord server](https://discord.gg/refine).
## Contributors β₯οΈ
## License
Licensed under the MIT License, Copyright Β© 2021-present Refinedev