Skip to main content

Tutorial Intro

Welcome to the Yipit Dash MUI Components documentation! Let's explore how to install and use this library to create powerful dashboards with Dash and MUI components.

Getting Started​

Follow these steps to set up the Yipit Dash MUI Components library in your project.

Requirements​

Before proceeding, ensure you have the following installed:

Installation​

Step 1: Install the library​

Install the yipit_dash_mui_components package from your package manager. Use the following command:

pip install yipit_dash_mui_components

This command will fetch the library and its dependencies.

Start Your Application​

Step 2: Create a basic Dash app​

Follow these steps to set up your Dash app and use the yipit_dash_mui_components library:

  1. Create a new Python file, e.g., app.py.
  2. Import and use components from yipit_dash_mui_components.

Example app.py:​

import dash
from dash import html
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
    children=[
        html.Div(
            children=[
                dmc.Button(
                    id="example-button",
                    children="Click Me",
                    variant="contained",
                    color="primary"
                )
            ]
        )
    ]
)

if __name__ == "__main__":
    app.run_server(debug=True)

Step 3: Run the application​

  1. Open your terminal and navigate to the directory containing app.py.
  2. Run the app:
python app.py
  1. Open your browser and go to http://localhost:8050 to see your app in action.