:orphan:

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

   basic
   intermediate

########################
Add a web UI with Gradio
########################

.. raw:: html

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

.. Add callout items below this line

.. displayitem::
   :header: 1: Connect Gradio
   :description: Learn how to connect Gradio 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 Gradio and a Lightning App.
   :col_css: col-md-6
   :button_link: intermediate.html
   :height: 150
   :tag: [documentation coming soon]

.. raw:: html

        </div>
    </div>

----

********
Examples
********
Here are a few example apps that use a Gradio 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>