:orphan:

.. toctree::
   :maxdepth: 1
   :hidden:

   basic
   intermediate

###########################
Add a web UI with Streamlit
###########################

.. raw:: html

    <div class="display-card-container">
        <div class="row">

.. Add callout items below this line

.. displayitem::
   :header: 1: Connect Streamlit
   :description: Learn how to connect Streamlit to a Lightning Component.
   :col_css: col-md-6
   :button_link: basic.html
   :height: 150
   :tag: basic

.. displayitem::
   :header: 2: Enable two-way communication
   :description: Enable two-way communication between Streamlit and a Lightning App.
   :col_css: col-md-6
   :button_link: intermediate.html
   :height: 150
   :tag: intermediate

.. raw:: html

        </div>
    </div>

----

********
Examples
********
Here are a few example apps that use a Streamlit web UI.


.. raw:: html

    <div class="display-card-container">
        <div class="row">

.. Add callout items below this line

.. displayitem::
    :header: Example 1
    :description: Show off your work! Contribute an example.
    :col_css: col-md-4
    :button_link: ../../../contribute_app.html
    :height: 150
    :tag: Waiting for contributed example

.. displayitem::
    :header: Example 2
    :description: Show off your work! Contribute an example.
    :col_css: col-md-4
    :button_link: ../../../contribute_app.html
    :height: 150
    :tag: Waiting for contributed example

.. displayitem::
    :header: Example 3
    :description: Show off your work! Contribute an example.
    :col_css: col-md-4
    :button_link: ../../../contribute_app.html
    :height: 150
    :tag: Waiting for contributed example

.. raw:: html

        </div>
    </div>