react-admin
styled-components
react-admin | styled-components | |
---|---|---|
65 | 223 | |
24,059 | 40,115 | |
0.9% | 0.2% | |
9.9 | 8.4 | |
5 days ago | about 14 hours ago | |
TypeScript | TypeScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
react-admin
-
Ask HN: Does Anyone Use a "Closed Core" Software Model?
> "Are there examples of companies adopting this model?"
Many examples across the industry:
- Autodesk AutoCAD (closed) + Plugins/Addons (many open)
- MS Windows (closed) + Many 3rd party programs (open)
- Github (closed) + Github Actions (open)
- Npm (closed) + Npm modules (mostly open)
> "What are the potential benefits or pitfalls?"
Benefits:
- Harder to replicate, the company gets to keep the "secret sauce" a secret
- Opening up a way to "extend" the platform means 3rd party developers add value to your system
- The core isn't open, so less effort is required to maintain compare to OpenSource
Pitfalls:
- Closed-source is hard to verify, company is essentially saying "trust me bro"
- Less innovation, as user's can't contribute to the core
> "How does it impact community engagement and software adoption?"
There's hardcore FOSS advocates that will hate anything not fully open. But a business has to make money and protect it's IP, having a "closed core" is one way to do that and ensure a sustainable business model.
Another approach is the opposite, open-core + closed-premium-addons. An example of this is "React Admin"
- Open Core -> https://github.com/marmelab/react-admin
- Premium Modules Offering -> https://react-admin-ee.marmelab.com/
-
React Component Libraries
Official Website: https://marmelab.com/react-admin/
-
Building an Admin Console With Minimum Code Using React-Admin, Prisma, and Zenstack
React-Admin is a React-based frontend framework for building admin applications that talk to a backend data API. It offers a pluggable mechanism for easily adapting to the specific API style of your backend.
-
New client-side hooks coming to React 19
With these features, data fetching and forms become significantly easier to implement in React. However, creating a great user experience involves integrating all these hooks, which can be complex. Alternatively, you can use a framework like react-admin where user-friendly forms with optimistic updates are built-in.
-
33 React Libraries Every React Developer Should Have In Their Arsenal
31.react-admin
-
I absolutely despise front-end work and styling, (and JS too), coming from a C++ / Java background, what would be a good framework or anything really to make it as painless as possible for me to build a front end.
For the admin panel, or basically anything with basic crud operations, take a look at https://marmelab.com/react-admin/. Most frontend devs don't like it, since it limits you somewhat in customization, but at the same time, it is very easy to grasp for someone coming from a backend dev profile, who just wants a crud UI. It even has a guesser template that proposes an initial screen layout based on the response of your api, which you can then copy-paste and finetune. It is really made to make quick admin crud ui's.
-
Anatomy Of A Profitable Open-Source Project
We’ve developed a business based on an open-source platform called react-admin. Embracing the open-source spirit, we’re sharing the key performance indicators of this business. We hope it will help other open-source developers build their own business.
-
An Overview of 25+ UI Component Libraries in 2023
React-Admin: As the name suggests, this component library is targeted at building administrator interfaces for B2B (business-to-business), for example, managing users in your system. It is based on Material design and has a neat feature where you can let it “guess” your list views by providing a sample API endpoint for your data.
- Launch HN: Refine (YC S23) – Open-Source Retool for Enterprise
-
Pros and cons of off-the-shelf solutions for creating a control panel
- We want a solution that creates CRUD (create, read, update, delete) quickly and requires minimal effort. - We want to be able to create some sort of complex interface if the task requires it. - We make cool, beautiful projects, so we want a visually pleasing solution. - We want the solution to be independent of the language on the back-end, because, for example, we started with PHP, Laravel, but over time node.js, Go appeared in the stack. In short, we want fast, beautiful and custom. We've had time to poke at various off-the-shelf solutions that we've been advised. They're good, but: - they are created specifically for some frameworks / languages like laravel, node.js - they can only generate CRUDs with a rigidly defined structure, where you can't implement or customize anything of your own. - they can't be styled Here's what we've been looking at Control Panels for Laravel: https://demo.backpackforlaravel.com/admin/dashboard Not a very pretty solution in our opinion. And the promo page has nice screenshots, not the demo "well such". https://orchid.software/en/ Not particularly functional, but neatly done https://nova.laravel.com They have a beautiful, but rigidly set strutkrua, you can not create castmon interfaces, stylize them. Just do CRUD and that's it. And it's paid https://filamentphp.com/ Analog to Nova, with essentially the same problems. For node.js: https://adminjs.co Nice promo, and the demo is way behind As standalone dashboards: https://strapi.io/ Very cool, but for other purposes. It's more of an entity builder with an interface and API https://pocketbase.io/ Similarly, it's an entity builder with an interface and API https://directus.io/ This is a backend builder. https://filamentphp.com/It is purely for php, you can't customize styles, you can't create your own interfaces. It is possible to create only tables and forms by template, and we remember that we want flexibility, independence from the language and the ability to create their own interfaces and customize them https://flatlogic.com This is also more of a backend builder. Direct competitors: https://github.com/refinedev/refine https://marmelab.com/react-admin/is probably the best solution that is currently on the market, they have been developing for a long time, they are our favorite. To the disadvantages we considered the following points: quite an old project, and somewhere the technology is already outdated, unsympathetic interface, old UI libraries. Huge documentation, it’s simply to create CRUD but hard to work without immersion. After all this there is only one conclusion: you need to do it yourself....
styled-components
-
Approaches to Styling React Components, Best Use Cases
CSS-in-JS is a styling technique wherein CSS is composed using JavaScript instead of defined in external files. This method allows CSS to be scoped locally to components rather than globally, reducing the probability of style conflicts. Utilizing JavaScript also enables dynamic styling easily aligned with the component's state or props. Libraries like Styled Components and Emotion are popular choices in the React ecosystem for adopting this method.
-
Growth Hacking Killed GitHub Stars
In 2023, I had a chat with Max Stoiber, CEO of Stellate, on a podcast to learn about his early success on GitHub. His first open-source project, react-boilerplate/react-boilerplate, gained a whopping 10k stars in just one weekend after appearing on the homepage of Hacker News. This success led Max to drop out of university and create several other popular open-source projects, including styled-components. This library accelerates the process of building styles in React components.
- Creating Nx Workspace with Eslint, Prettier and Husky Configuration
-
The Secret Weapon of Top Developers: 7 React JS Libraries You Can't Afford to Ignore
Embracing the styled-components library allows developers to write actual CSS code to style their components. It utilizes tagged template literals to style components, enabling a seamless integration of styles within the component's JavaScript file. This approach eliminates the mapping between components and styles, thus enhancing developer productivity and component reusability.
-
The 20 most used React libraries
styled-components: Allows for maintainable styling with CSS-in-JS. Learn more
- Iniciando um backoffice rapidamente com AdminJS
-
Styling React 2023 edition
Over the past few years, I've worked with React apps utilising various CSS-in-JS libraries, starting with styled-components, transitioning through emotion, Theme UI, and finally Stitches. I've also integrated MUI, Mantine, and Chakra in numerous client projects.
-
The Ultimate Tech Stack for Building a Full-Stack MVP and Iterating Quickly
There are several alternatives to MUI. shadcn/ui is a modern alternative that is very popular. Ant Design is also a great alternative. Charkra UI can also be used as a UI Framework. Some people suggest just using styled components. Some use Tailwind CSS. Yet, for both styled components and Tailwind CSS, one still writes a lot of CSS. This might not provide the best developer experience compared to using a UI Framework, especially if we aim to avoid designing all the pages on the website.
-
React Ecosystem in 2024
Website: Styled Components
-
Building an entire fullstack project with Firebase 10 and React (Vite)
The project is build using several ready made components available within, Mantine. It’s a fully featured React components library. However some places still use some custom CSS-in-JS so we used some good ol’ styled components.
What are some alternatives?
tailwind-dashboard-template - Mosaic Lite is a free admin dashboard template built on top of Tailwind CSS and fully coded in React. Made by
styled-jsx - Full CSS support for JSX without compromises
Refine - A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.
chakra-ui - ⚡️ Simple, Modular & Accessible UI Components for your React Applications
AdminJS - AdminJS is an admin panel for apps written in node.js
emotion - 👩‍🎤 CSS-in-JS library designed for high performance style composition
refine - Build your React-based CRUD applications, without constraints. [Moved to: https://github.com/refinedev/refine]
styletron - :zap: Toolkit for component-oriented styling
mantine - A fully featured React components library
JSS - JSS is an authoring tool for CSS which uses JavaScript as a host language.
appsmith - Platform to build admin panels, internal tools, and dashboards. Integrates with 25+ databases and any API.
PostCSS - Transforming styles with JS plugins