Skip to content

[blog] Introducing Toolpad Core #43497

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 9 commits into
base: master
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions docs/pages/blog/introducing-toolpad-core.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
import { docs } from './introducing-toolpad-core.md?muiMarkdown';

export default function Page() {
return <TopLayoutBlog docs={docs} />;
}
50 changes: 50 additions & 0 deletions docs/pages/blog/introducing-toolpad-core.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
---
title: Introducing Toolpad Core
Copy link
Member

@oliviertassinari oliviertassinari Sep 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would "Introducing" feel too much for something that is stable? For example, I reframed https://mui.com/blog/introducing-pigment-css/ as a "preview" as it felt more accurate to what it is. It's not generally available, it's a sample of what we envision to build.

description: Material UI-based components and tools for building dashboards and internal apps.
date: 2024-09-03T00:00:00.000Z
authors: ['prakhargupta']
manualCard: true
tags: ['Product', 'Toolpad']
---

At MUI, our vision is to provide a unified UI creation ecosystem for web developers. We try to reflect the diverse ways in which developers build UIs in our product offerings:

- Material UI: Low-level components that developers use to build UIs of varying complexity and size.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's more about creating a design system on this one.

Suggested change
- Material UI: Low-level components that developers use to build UIs of varying complexity and size.
- Material UI:

- MUI X: Advanced components that enable developers to include data-intensive functionality in their apps.
- Templates: Ready-to-use interfaces for developers who need a good-looking starting point to extend from.

Today, we're extending that ecosystem by launching Toolpad Core. If you're someone who's started out with templates before but found them to require too much manual setup, or built internal tools with Material UI and MUI X but found it difficult to integrate them together and with other third-party libraries, then [Toolpad Core](https://mui.com/toolpad/) is for you.

## Toolpad Core

<a href="https://mui.com/toolpad/">
<img alt="MUI public app for tracking KPIs" src="/static/blog/introducing-toolpad-core/toolpad-core.png" width="2400" height="1394" />
</a>

With Toolpad Core we're building a set of higher-level abstractions to get you from zero to one faster. We're also building a CLI tool to help scaffold your project. The goal is for your project to contain less code for common UI use cases that don't require frequent updates.

The beta release includes the following component sets:

- [layout and navigation](https://mui.com/toolpad/core/react-dashboard-layout/)
- [page container](https://mui.com/toolpad/core/react-page-container/)
- [sign-in and account display](https://mui.com/toolpad/core/react-sign-in-page/)
- [dialogs](https://mui.com/toolpad/core/react-use-dialogs/)
- [notifications](https://mui.com/toolpad/core/react-use-notifications/)
- [persisted state](https://mui.com/toolpad/core/react-persistent-state/)
Comment on lines +28 to +33
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Upper case on the first word?


<video controls width="100%" height="auto" style="contain" alt="toolpad core product walkthrough">
<source src="/static/blog/introducing-toolpad-core/toolpad_core_walkthrough.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

By integrating Toolpad Core components with your existing Material UI and MUI X components, you can build dashboards and internal apps faster than ever before.

We plan to continue to work on MUI's mission—to enable developers of any level to quickly and efficiently build UIs that feel amazing. We'll be rolling out more features and updates regularly as we accelerate Toolpad Core's development. We're actively seeking feedback and feature requests, and we encourage you to get involved by [creating an issue](https://github.com/mui/mui-toolpad)!

## What's next

In the coming months, we'll offer a well-designed dashboard template powered by Toolpad components. This should help you kickstart your next internal tool faster.

In another initiative, we want to offer a CRUD component in Toolpad Core. It's a critical internal tool feature that a lot of users build from scratch. If this interests you, please visit [this](https://github.com/mui/mui-toolpad/discussions/3311) RFC for more details.

In case you need any further information, feel free to reach out to the team at toolpad@mui.com.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
106 changes: 53 additions & 53 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.