详细内容
The wait is over.
Refine AI is here!
Instantly transform your APIs into enterprise-grade admin panels, dashboards & internal tools.
Open-source Retool for Enterprise
Build React-based internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.
npmcreaterefine-app@latest
react platform
Vite
ui framework
Material UI
backend
Supabase
authentication
CRM ApplicationE-Commerce ApplicationHR ApplicationDevOps Dashboard
Trusted by developers from
Thesweet spotbetween low-code and full-code.
Drag-and-drop tools shine initially but collapse under the weight of complexity. Refine offers comparable speed at the start and infinite scaling in the long run.
Business applications not only share fundamental UI elements, but also the underlying logic.
Stop writing repetitive code for CRUD, security and
state management. Let Refine automatically transform
your UI elements to enterprise-grade:
Tables
List
Charts
Forms
Wizards
Authentication
Startfaster, maintaineasier, managecomplexity.
Firebase
npm i refine-firebase
Ably
npm i @refinedev/ably
Airtable
npm i @refinedev/airtable
Appwrite
npm i @refinedev/appwrite
Directus
npm i @tspvivek/refine-directus
Elide
npm i elide-simple-rest
Elide GraphQL
npm i elide-simple-graphql
Hasura
npm i @refinedev/hasura
Hook Form
npm i @refinedev/react-hook-form
Ant Design
npm i @refinedev/antd
Material UI
npm i @refinedev/mui
Mantine
npm i @refinedev/mantine
Chakra UI
npm i @refinedev/chakra-ui
shadcn/ui
npx shadcn-ui init
Tailwind CSS
npx tailwindcss init
Headless UI
npm i @headlessui/react
Firebase
npm i refine-firebase
Ably
npm i @refinedev/ably
Airtable
npm i @refinedev/airtable
Appwrite
npm i @refinedev/appwrite
Directus
npm i @tspvivek/refine-directus
Elide
npm i elide-simple-rest
Elide GraphQL
npm i elide-simple-graphql
Hasura
npm i @refinedev/hasura
Hook Form
npm i @refinedev/react-hook-form
Ant Design
npm i @refinedev/antd
Material UI
npm i @refinedev/mui
Mantine
npm i @refinedev/mantine
Chakra UI
npm i @refinedev/chakra-ui
shadcn/ui
npx shadcn-ui init
Tailwind CSS
npx tailwindcss init
Headless UI
npm i @headlessui/react
GraphQL
npm i @refinedev/graphql
Kbar
npm i @refinedev/kbar
Medusa
npm i @refinedev/medusa
NestJS CRUD
npm i @refinedev/nestjsx-crud
Nestjs-query
npm i @refinedev/nestjs-query
Next.js
npm i @refinedev/nextjs-router
Remix
npm i @refinedev/remix-router
REST
npm i @refinedev/simple-rest
Strapi
npm i @refinedev/strapi-v4
Supabase
npm i @refinedev/supabase
Hygraph
npm i @acomagu/refine-hygraph
Sanity
npm i refine-sanity
SQLite
npm i refine-sqlite
JSON:API
npm i refine-jsonapi
GraphQL
npm i @refinedev/graphql
Kbar
npm i @refinedev/kbar
Medusa
npm i @refinedev/medusa
NestJS CRUD
npm i @refinedev/nestjsx-crud
Nestjs-query
npm i @refinedev/nestjs-query
Next.js
npm i @refinedev/nextjs-router
Remix
npm i @refinedev/remix-router
REST
npm i @refinedev/simple-rest
Strapi
npm i @refinedev/strapi-v4
Supabase
npm i @refinedev/supabase
Hygraph
npm i @acomagu/refine-hygraph
Sanity
npm i refine-sanity
SQLite
npm i refine-sqlite
JSON:API
npm i refine-jsonapi
Seamless connectivity
Out-of-the box integrations for 15+ services including custom REST and GraphQL API’s.
Wheel? Already invented.
Start with a well-structured boilerplate, built around the industry’s best practices.
1importReactfrom"react";
2
3import{ useList }from"@refinedev/core";
4
5exportconstList:React.FC=()=>{
6const{
7 result:{ data, total },
8 isLoading,
9}=useList();
10
11if(isLoading)return<div>Loading...</div>;
12
13return(
14<div>
15<h1>Products</h1>
16<h3>Showing {total} products in total.</h3>
17<ul>
18{data?.map((product)=>(
19<likey={product.id}>
20<span>{product.name}</span>
21</li>
22))}
23</ul>
24</div>
25);
26};
1importReactfrom"react";
2
3import{ useList }from"@refinedev/core";
4
5exportconstList:React.FC=()=>{
6const{
7 result:{ data, total },
8 isLoading,
9}=useList();
10
11if(isLoading)return<div>Loading...</div>;
12
13return(
14<div>
15<h1>Products</h1>
16<h3>Showing {total} products in total.</h3>
17<ul>
18{data?.map((product)=>(
19<likey={product.id}>
20<span>{product.name}</span>
21</li>
22))}
23</ul>
24</div>
25);
26};
100% Pure React code
Don’t get locked-in to proprietary, black-box
solutions. With Refine you have always 100% control
over your project.
Enterprise developers❤️Refine.
Refine is designed to target the specific pain points of larger organizations by giving top priority tosecurity.
Self-host for compliance
Deploy to your own infrastructure without worrying about regulations, performance, and stability. Maintain your current security best practices with no compromises.
Leverage the power of your existing Identity Provider
Native support for Okta, Azure AD, Amazon Cognito & Google Cloud Identity.
Achieve fine-grained access control
Out-of-the-box support for widely accepted authorization models including ACL, RBAC & ABAC.
Unlock the black box
Implement an open-source solution with an open architecture. Save yourself from the hassle of adding another proprietary component to your stack.
Effortlessly monitor your application
Ready-made providers and components for audit logging and usage analytics.
Get supported by the experts
Enroll in plans that provide priority support, trainings and consulting.
Feel the power of agreat community.
Projects on production, including large enterprises
32K+
Active developers in our open-source community
200K+
End users are using apps built with Refine
Backed by Y Combinator (YC S23), 500 Emerging Europe and Senovo.
Thedifferencethat Refine makes
I find CRUD boring, but Refine makes it fun for developers again!
\
\
Zeno Rocha\
\
CEO - Resend
Refine perfectly aligns with the philosophy of React Hook Form, and they work seamlessly together.
\
\
Beier Luo\
\
Author of React Hook Form
Refine has codemod support for major version transitions, making it easy for users to integrate new versions into their existing codebases seamlessly.
\
\
Daniel Del Core\
\
Sr. Software Engineer at Atlassian
I find CRUD boring, but Refine makes it fun for developers again!
\
\
Zeno Rocha\
\
CEO - Resend
Refine perfectly aligns with the philosophy of React Hook Form, and they work seamlessly together.
\
\
Beier Luo\
\
Author of React Hook Form
Show more
Get started now!
Choose your way to scaffold your project and start developing in seconds.
Use our online GUI to create, customize, and download.
Try it in your browser
or
Run the npm command in Terminal and follow the wizard instructions.
npmcreaterefine-app@latest
Twitter Widget Iframe
Ask AI
reCAPTCHA
Recaptcha requires verification.
protected by reCAPTCHA