refine

A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.

Programming language: TypeScript

License: MIT License

Tags: UI Frameworks     Component Collections    

README

Home Page | Discord | Examples | Blog | Documentation | Roadmap

Build your React-based CRUD applications, without constraints.Open source, headless web application framework developed with flexibility in mind.

[](CODE_OF_CONDUCT.md)

What is refine?

refine is a React-based framework for the rapid ✨ development of web applications. It eliminates the repetitive tasks demanded by CRUD operations and provides industry standard solutions for critical parts like authentication, access control, routing, networking, state management, and i18n.

refine is headless by design offering unlimited styling and customization options.

What do you mean by "headless" ?

Instead of being a limited set of pre-styled components, refine is a collection of helper hooks, components, and providers. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.

refine seamlessly works with any custom design or UI framework you favor. For convenience, it ships with ready-made integrations for Ant Design System, Material UI, and Mantine.

Use cases

refine shines on data-intensive applications like admin panels, dashboards and internal tools. Thanks to built-in SSR support, refine can also power customer-facing applications like storefronts.

Key Features

⚙️ Zero-config, one-minute setup with a single CLI command

🔌 Connectors for 15+ backend services including REST API, GraphQL, NestJs CRUD, Airtable, Strapi, Strapi v4, Strapi GraphQL, Supabase, Hasura, Nhost, Appwrite, Firebase, Directus and Altogic

🌐 SSR support with Next.js or Remix

⚛ 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

✅ Full test coverage

Quick Start

The fastest way to get started with refine is using the superplate project starter tool. Run the following command to create a new refine project configured with Ant Design System as the default UI framework:

npx superplate-cli --preset refine-antd my-project

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:3000: Let's consume a public fake REST API and add two resources (posts, categories) to our project. Replace the contents of src/App.tsx with the following code:

```tsx title="src/App.tsx"

import { Refine, useMany } from "@pankod/refine-core"; import { useTable, List, Table, DateField, Layout, ReadyPage, notificationProvider, ErrorComponent, } from "@pankod/refine-antd"; import routerProvider from "@pankod/refine-react-router-v6"; import dataProvider from "@pankod/refine-simple-rest";

import "@pankod/refine-antd/dist/styles.min.css";

const App: React.FC = () => { return ( } /> ); };

export const PostList: React.FC = () => { const { tableProps } = useTable();

const categoryIds =
    tableProps?.dataSource?.map((item) => item.category.id) ?? [];

const { data, isLoading } = useMany<ICategory>({
    resource: "categories",
    ids: categoryIds,
    queryOptions: {
        enabled: categoryIds.length > 0,
    },
});

return (
    <List>
        <Table<IPost> {...tableProps} rowKey="id">
            <Table.Column dataIndex="title" title="title" />
            <Table.Column
                dataIndex={["category", "id"]}
                title="category"
                render={(value: number) => {
                    if (isLoading) {
                        return "loading...";
                    }

                    return data?.data.find(
                        (item: ICategory) => item.id === value,
                    )?.title;
                }}
            />
            <Table.Column
                dataIndex="createdAt"
                title="createdAt"
                render={(value) => <DateField format="LLL" value={value} />}
            />
        </Table>
    </List>
);

};

export default App;

interface IPost { title: string; createdAt: string; category: { id: number }; }

interface ICategory { id: number; title: string; }

Now, you should see the output as a table populated with `post` & `category` data:
![First example result](https://github.com/refinedev/refine/blob/master/documentation/static/img/first-example-result.png?raw=true)
## Next Steps

👉 Jump to [Refine<>Ant Design Tutorial](https://refine.dev/docs/ui-frameworks/antd/tutorial/) to continue your work and turn the example into a full-blown CRUD application.

👉 Check out the [Refine<>Tailwind Tutorial](https://refine.dev/docs/tutorials/headless-tutorial/) to learn how to use **refine** in a pure *headless* way.

👉 Visit [Learn the Basics Page](https://refine.dev/docs/getting-started/overview/) to get informed about the fundemental concepts.

👉 Read more on [Advanced Tutorials
](https://refine.dev/docs/advanced-tutorials/) for different usage scenarios.

👉 See the real-life [Finefoods Demo](https://refine.dev/demo/) project.

👉 Play with interactive [Examples](https://refine.dev/docs/examples/)

## Roadmap
You can find refine's <a href="https://github.com/refinedev/refine/projects/1">Public Roadmap here!</a> 

## Stargazers

[![Stargazers repo roster for refinedev/refine](https://reporoster.com/stars/refinedev/refine)](https://github.com/refinedev/refine/stargazers)

## Contribution

If you have a bug to report, do not hesitate to file an [issue](https://github.com/refinedev/refine/issues/new/choose).

If you are willing to fix an issue or propose a feature, all PRs with clear explanations are welcome and encouraged.

If you have any doubts related to the project or want to discuss something, then join our [Discord Server](https://discord.gg/refine).

## License

Licensed under the MIT License, Copyright © 2021-present Refinedev