DOCSEARCHbyAlgolia
Submit Docs

Soft UI Dashboard React

repository·main·Indexed 43 days ago

https://github.com/creativetimofficial/soft-ui-dashboard-react

An innovative admin template built with React and Material UI (MUI) version 4.0.1. It features a collection of over 70 customizable frontend components, pre-built design blocks, and support for RTL layouts. The framework includes a centralized theme configuration for design tokens (palette, typography, shadows) and utility functions for styling, alongside specialized components like SoftAlert, SoftAvatar, and SoftBadge.

Tokens
15.1K
Snippets
48
Records
59
Agent score
54%

What's inside Soft UI Dashboard React

  1. Understand the Soft UI Dashboard React file structure

    main

    The project is organized into several key directories to separate core logic, UI components, and page layouts:

    • src/assets/theme: Contains the theme configuration, including base styles, component overrides, and utility functions.
    • src/components: Houses the core UI elements (e.g., SoftButton, SoftInput, SoftTypography) built on top of MUI.
    • src/examples: Contains pre-built UI patterns and complex components like Cards, Charts, Navbars, and Tables.
    • src/layouts: Defines the different page structures, such as authentication, dashboard, profile, and rtl (Right-to-Left) layouts.
    • src/routes.js: The central configuration for application routing.

  4. Configure routing using the routes object

    main
    The application uses react-router-dom to handle navigation. Routes are defined in a central routes configuration file. The App component recursively processes this object to build the route tree. To add a new route, ensure your route object contains a route path and a component element. If a route has a collapse property, the application will recursively extract nested routes from it.

  5. Theme structure and design tokens

    main

    The Soft UI Dashboard theme is composed of several core design token groups. If you are overriding the theme, these are the primary keys available in the exported object:

    • breakpoints: Responsive design breakpoints.
    • palette: Color definitions (primary, secondary, etc.).
    • typography: Font families, sizes, and weights.
    • boxShadows: Predefined shadow levels.
    • borders: Border radius and width definitions.
    • functions: Styling utility functions.
    • components: MUI component overrides (e.g., MuiButton, MuiCard, MuiSidenav).

  6. Support RTL (Right-to-Left) layouts

    main
    The dashboard supports RTL layouts by switching the direction attribute on the document.body and applying a specific themeRTL. When direction is set to rtl, the application wraps the component tree in a CacheProvider using an Emotion cache configured with the stylis-plugin-rtl to handle CSS directionality correctly.

  7. Initialize Soft UI Dashboard React application

    main

    The application entrypoint initializes the React application by wrapping the main <App /> component with BrowserRouter for routing and SoftUIControllerProvider for managing the dashboard's global state and controller context. This setup ensures that all components within the dashboard have access to the necessary routing and UI controller logic.

    To use this setup in your own implementation, ensure you have a DOM element with id="root" and that you wrap your application component with the following providers:

    import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "App";
import { SoftUIControllerProvider } from "context";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <SoftUIControllerProvider>
      <App />
    </SoftUIControllerProvider>
  </BrowserRouter>
);

  8. Configure MUI Menu theme overrides

    main

    The menu configuration object defines the default properties and style overrides for Material UI (MUI) Menu components within the Soft UI Dashboard React theme.

    Key customizations include:

    • Default Props: Sets disableAutoFocusItem: true to prevent automatic focus on menu items.
    • Paper Component Styles: The paper element (the menu container) is styled with a minimum width of 160px (converted to rem), uses the lg box shadow, specific padding, small typography size, and a white background with medium border radius.
    const menu = {
  defaultProps: {
    disableAutoFocusItem: true,
  },
  styleOverrides: {
    paper: {
      minWidth: pxToRem(160),
      boxShadow: lg,
      padding: `${pxToRem(16)} ${pxToRem(8)}`,
      fontSize: size.sm,
      color: text.main,
      textAlign: "left",
      backgroundColor: `${white.main} !important`,
      borderRadius: borderRadius.md,
    },
  },
};

  9. Setup the SoftUIControllerProvider

    main

    To enable global state management for dashboard components (like sidenav behavior, navbar styles, and layout), you must wrap your application (or a specific component tree) with the SoftUIControllerProvider. This provider manages the global state using a reducer pattern.

    Initial State Values:

    • miniSidenav: false
    • transparentSidenav: true
    • sidenavColor: `

  11. Access the Soft UI Dashboard React theme configuration

    main

    The dashboard uses a centralized theme configuration object created via @mui/material/styles. This theme object contains the design tokens (colors, typography, spacing) and component overrides that give the dashboard its 'Soft UI' look.

    When building custom components or extending the dashboard, you can access this theme via the useTheme hook from @mui/material/styles or by using the sx prop on MUI components. The theme includes custom helper functions for common styling tasks like converting hex to RGB or generating linear gradients.

    import { useTheme } from "@mui/material/styles";

const MyComponent = () => {
  const theme = useTheme();
  
  // Accessing custom theme properties
  const color = theme.palette.primary.main;
  const boxShadow = theme.functions.boxShadow(2);

  return <div style={{ color: color, boxShadow }}>Hello Soft UI</div>;
};

  12. Use the SoftInput component

    main

    The SoftInput component is a styled input field used for forms within the Soft UI Dashboard. It supports various sizes, validation states (error/success), and the inclusion of icons positioned to the left or right of the input field.

    Props

    PropTypeDefaultDescription
    size'small' | 'medium' | 'large''medium'Controls the visual scale of the input.
    iconobject{ component: false, direction: 'none' }Configuration for an icon inside the input.
    icon.componentReactNodefalseThe icon element to render.
    icon.direction'none' | 'left' | 'right''none'The position of the icon relative to the input.
    errorbooleanfalseIf true, applies error styling.
    successbooleanfalseIf true, applies success styling.
    disabledbooleanfalseIf true, disables the input.
    ...restanyn/aStandard HTML input attributes (e.g., placeholder, onChange, value).
    import SoftInput from "components/SoftInput";
import SearchIcon from "@mui/icons-material/Search";

function MyForm() {
  return (
    <SoftInput
      size="medium"
      icon={{
        component: <SearchIcon />,
        direction: "left",
      }}
      placeholder="Search..."
      error={false}
    />
  );
}