### Installing streamlit-shadcn-ui via pip (Bash)

Source: https://github.com/observedobserver/streamlit-shadcn-ui-docs/blob/main/README.md

Explains how to install the `streamlit-shadcn-ui` Python package using the pip package manager from the command line. This is the standard method for adding the library to your Python environment. Requires pip to be installed and configured.

```bash
pip install streamlit-shadcn-ui
```

--------------------------------

### Installing streamlit-shadcn-ui Package - Bash

Source: https://github.com/observedobserver/streamlit-shadcn-ui-docs/blob/main/docs/introduction.md

This snippet provides the command to install the streamlit-shadcn-ui Python package using the pip package installer. It is the standard method for adding the library to your Python environment. Requires a working Python installation with pip.

```bash
pip install streamlit-shadcn-ui
```

--------------------------------

### Using Textarea Component in Streamlit-shadcn-ui (Python)

Source: https://github.com/observedobserver/streamlit-shadcn-ui-docs/blob/main/docs/components/textarea.md

This snippet demonstrates the basic usage of the `textarea` component from the `streamlit_shadcn_ui` library within a Streamlit application. It imports necessary libraries, initializes a `textarea` with default content, placeholder text, and a unique key, and then displays the current value entered by the user using `st.write`. Requires `streamlit` and `streamlit_shadcn_ui` to be installed.

```python
import streamlit as st
import streamlit_shadcn_ui as ui

# Textarea Component
textarea_value = ui.textarea(default_value="Type your message here...", placeholder="Enter longer text", key="textarea1")
st.write("Textarea Value:", textarea_value)
```

--------------------------------

### Using Switch Component Streamlit Python

Source: https://github.com/observedobserver/streamlit-shadcn-ui-docs/blob/main/docs/components/switch.md

This snippet demonstrates how to add a toggle switch to a Streamlit application using the streamlit-shadcn-ui library. It imports the necessary libraries, creates a switch element with a default state and label, and then displays the current boolean value of the switch.

```python
import streamlit as st
import streamlit_shadcn_ui as ui


switch_value = ui.switch(default_checked=True, label="Toggle Switch", key="switch1")
st.write("Switch is On:", switch_value)
```

--------------------------------

### Implementing Checkboxes with Streamlit Shadcn UI (Python)

Source: https://github.com/observedobserver/streamlit-shadcn-ui-docs/blob/main/docs/components/checkbox.md

This snippet demonstrates the basic implementation of the `checkbox` component from the `streamlit-shadcn-ui` library. It shows how to import the library and render three checkboxes, setting different initial `checked` states (one true, two false) and custom `label` texts for each. This code requires the `streamlit-shadcn-ui` library to be installed and executed within a Streamlit application environment. The expected output is a set of three interactive checkbox elements displayed in the application's user interface.

```python
import streamlit_shadcn_ui as ui

ui.checkbox(checked=True, label="I am a Checkbox 1")
ui.checkbox(checked=False, label="I am a Checkbox 2")
ui.checkbox(checked=False, label="I am a Checkbox 3")
```

--------------------------------

### Using Streamlit Shadcn UI Date Pickers (Python)

Source: https://github.com/observedobserver/streamlit-shadcn-ui-docs/blob/main/docs/components/date_picker.md

This snippet shows the basic usage of the `date_picker` component from `streamlit-shadcn-ui`. It demonstrates creating instances for selecting a single date and a date range, utilizing the `mode` parameter, and displaying the chosen values using `st.write`. Requires the `streamlit` and `streamlit-shadcn-ui` libraries.

```python
import streamlit as st
import streamlit_shadcn_ui as ui

# Date Picker
dt = ui.date_picker(key="date_picker", mode="single", label="Date Picker")
st.write("Date Value:", dt)

# Date Range Picker
dt2 = ui.date_picker(key="date_picker2", mode="range", label="Date Picker")
st.write("Date Range:", dt2)

```

--------------------------------

### Creating Tabs with Streamlit Shadcn UI in Python

Source: https://github.com/observedobserver/streamlit-shadcn-ui-docs/blob/main/docs/components/tabs.md

This snippet demonstrates the basic implementation of a tab component using the `streamlit_shadcn_ui` library. It imports the library and calls the `tabs` function, providing a list of tab options, a default selected tab, and a unique key for the component within the Streamlit application.

```python
import streamlit_shadcn_ui as ui

ui.tabs(options=['PyGWalker', 'Graphic Walker', 'GWalkR', 'RATH'], default_value='PyGWalker', key="kanaries")
```

--------------------------------

### Adding and Interacting with Buttons using Streamlit Shadcn UI (Python)

Source: https://github.com/observedobserver/streamlit-shadcn-ui-docs/blob/main/docs/components/button.md

This snippet shows how to import the necessary libraries (`streamlit` and `streamlit_shadcn_ui`) and create two buttons using `ui.button`. It demonstrates how to capture the click state of a button (`clicked`) and display its state using `st.write`. Required dependencies are `streamlit` and `streamlit-shadcn-ui`. The buttons are created with specified labels ('Click', 'Reset') and unique keys ('clk_btn', 'reset_btn').

```python
import streamlit as st
import streamlit_shadcn_ui as ui


clicked = ui.button("Click", key="clk_btn")
ui.button("Reset", key="reset_btn")
st.write("UI Button Clicked:", clicked)
```

--------------------------------

### Implementing ui.slider in Python for Single and Range Selection

Source: https://github.com/observedobserver/streamlit-shadcn-ui-docs/blob/main/docs/components/slider.md

This snippet shows how to import necessary libraries and create two instances of the `ui.slider` component: one for selecting a single value and one for selecting a range. It configures parameters like default value(s), min/max values, step size, label, and a unique key for each slider. The selected value(s) from the sliders are then displayed in the Streamlit app using `st.write`.

```python
import streamlit as st
import streamlit_shadcn_ui as ui

# Slider Component
slider_value = ui.slider(default_value=[20], min_value=0, max_value=100, step=2, label="Select a Value", key="slider1")
st.write("Slider Value:", slider_value)

slider_range = ui.slider(default_value=[20, 80], min_value=0, max_value=100, step=2, label="Select a Range", key="slider2")
st.write("Slider Range:", slider_range)
```

--------------------------------

### Creating a Simple Card Container with Elements - Python Streamlit Shadcn UI

Source: https://github.com/observedobserver/streamlit-shadcn-ui-docs/blob/main/docs/components/card.md

This Python snippet demonstrates how to create a basic Card container using `ui.card` and a `with` statement. Inside the card, it adds `ui.element` calls to include text labels (using `span`), input fields, and a submit button. The `key` parameter is used for element identification, and `className` for styling.

```python
with ui.card(key="card1"):
    ui.element("span", children=["Email"], className="text-gray-400 text-sm font-medium m-1", key="label1")
    ui.element("input", key="email_input", placeholder="Your email")

    ui.element("span", children=["User Name"], className="text-gray-400 text-sm font-medium m-1", key="label2")
    ui.element("input", key="username_input", placeholder="Create a User Name")
    ui.element("button", text="Submit", key="button", className="m-1")
```

--------------------------------

### Using Streamlit Shadcn UI Select Component - Python

Source: https://github.com/observedobserver/streamlit-shadcn-ui-docs/blob/main/docs/components/select.md

This snippet demonstrates importing Streamlit and the streamlit-shadcn-ui library. It initializes a dropdown select component (`ui.select`) with a list of string options. The selected value is then captured in the `choice` variable and displayed to the user using `st.markdown`.

```python
import streamlit as st
import streamlit_shadcn_ui as ui

choice = ui.select(options=["Apple", "Banana", "Orange"])

st.markdown(f"Currrent value: {choice}")
```

--------------------------------

### Creating Link Button Streamlit ShadCN UI Python

Source: https://github.com/observedobserver/streamlit-shadcn-ui-docs/blob/main/docs/components/link_button.md

This snippet demonstrates how to create a link button using the `streamlit_shadcn_ui` library. The `link_button` function requires `text` for the button label, `url` for the target link (which opens in a new tab), and a unique `key`. Requires the `streamlit_shadcn_ui` library.

```python
import streamlit_shadcn_ui as ui

ui.link_button(text="Go To Github", url="https://github.com/ObservedObserver/streamlit-shadcn-ui", key="link_btn")

```

--------------------------------

### Rendering a Basic Avatar in Streamlit

Source: https://github.com/observedobserver/streamlit-shadcn-ui-docs/blob/main/docs/components/avatar.md

This snippet demonstrates how to import the streamlit library and use the `ui.avatar` function from the streamlit-shadcn-ui library to display a simple avatar component. It requires importing `streamlit` and the shadcn-ui components (assuming `ui` is the alias used). The `src` parameter is used to specify the image URL for the avatar.

```python
import streamlit as st

ui.avatar(src="https://your_image_url")
```

--------------------------------

### Creating Alert Dialog triggered by Button (Python)

Source: https://github.com/observedobserver/streamlit-shadcn-ui-docs/blob/main/docs/components/alert_dialog.md

This snippet demonstrates how to create a button that, when clicked, displays an alert dialog using the streamlit-shadcn-ui library. It utilizes the ui.button and ui.alert_dialog components, linking the alert dialog's visibility to the button's state via the 'show' parameter.

```python
import streamlit_shadcn_ui as ui

trigger_btn = ui.button(text="Trigger Button", key="trigger_btn_1")
ui.alert_dialog(show=trigger_btn, title="Alert Dialog", description="This is an alert dialog", confirm_label="OK", cancel_label="Cancel", key="alert_dialog_1")
```

--------------------------------

### Nesting Streamlit Shadcn UI Components (explicit render)

Source: https://github.com/observedobserver/streamlit-shadcn-ui-docs/blob/main/docs/components/experiment.md

This snippet shows an alternative method for creating nested `streamlit-shadcn-ui` components without using the `with` statement. Components are instantiated individually, and child components are added explicitly using the `add_child` method. The top-level component's `render()` method must be called to display the structure in the Streamlit app.

```Python
st.header("Nest Element 2")
card = ui.element("card", key="base_ele_2")
card2 = ui.element("card", key="base_ele2_2")
card2.add_child(ui.element("input", key="nst2_input_2", label="Value"))
card2.add_child(ui.element("button", key="nst2_btn_2", text="Nest Submmit", variant="outline"))
card.add_child(card2)
card.add_child(ui.element("button", key="nst_btn_2", text="Hello World"))
card.render()
```

--------------------------------

### Using Input Component with Streamlit shadcn-ui in Python

Source: https://github.com/observedobserver/streamlit-shadcn-ui-docs/blob/main/docs/components/input.md

This snippet demonstrates how to import and use the `ui.input` component from the `streamlit_shadcn_ui` library in a Streamlit application. It creates a text input field with a default value and placeholder, assigns a unique key, and then displays the current value entered by the user using `st.write`. It requires `streamlit` and `streamlit_shadcn_ui` libraries.

```python
import streamlit as st
import streamlit_shadcn_ui as ui
# Input Component
input_value = ui.input(default_value="Hello, Streamlit!", type='text', placeholder="Enter text here", key="input1")
st.write("Input Value:", input_value)
```

--------------------------------

### Rendering Data Table with Streamlit Shadcn UI - Python

Source: https://github.com/observedobserver/streamlit-shadcn-ui-docs/blob/main/docs/components/table.md

This snippet demonstrates how to display tabular data using the `table` component from the `streamlit_shadcn_ui` library in a Streamlit application. It requires `streamlit_shadcn_ui` and `pandas`. It prepares sample data as a list of dictionaries, converts it into a pandas DataFrame, and then passes the DataFrame to the `ui.table` function along with a `maxHeight` parameter to limit the table's height.

```python
import pandas as pd
import streamlit_shadcn_ui as ui
# Sample data
data = [
    {"invoice": "INV001", "paymentStatus": "Paid", "totalAmount": 500, "paymentMethod": "Credit Card"},
    {"invoice": "INV002", "paymentStatus": "Unpaid", "totalAmount": 200, "paymentMethod": "Cash"},
    {"invoice": "INV003", "paymentStatus": "Paid", "totalAmount": 150, "paymentMethod": "Debit Card"},
    {"invoice": "INV004", "paymentStatus": "Unpaid", "totalAmount": 350, "paymentMethod": "Credit Card"},
    {"invoice": "INV005", "paymentStatus": "Paid", "totalAmount": 400, "paymentMethod": "PayPal"},
    # Add more records as needed
]

# Creating a DataFrame
invoice_df = pd.DataFrame(data)

ui.table(data=invoice_df, maxHeight=300)
```

--------------------------------

### Displaying Badges with streamlit-shadcn-ui in Python

Source: https://github.com/observedobserver/streamlit-shadcn-ui-docs/blob/main/docs/components/badges.md

This snippet demonstrates how to render multiple badges with different styles using the `ui.badges` function. It takes a list of tuples `badge_list` where each tuple is `(text, style)`. The `class_name` parameter applies CSS classes, and `key` provides a unique identifier for Streamlit state management.

```python
import streamlit_shadcn_ui as ui

ui.badges(badge_list=[("default", "default"), ("secondary", "secondary"), ("outline", "outline"), ("Hello", "destructive"), ("World", "destructive")], class_name="flex gap-2", key="badges1")
```

--------------------------------

### Rendering Metric Cards in Streamlit Columns (Python)

Source: https://github.com/observedobserver/streamlit-shadcn-ui-docs/blob/main/docs/components/metric_card.md

This snippet demonstrates how to lay out multiple `metric_card` components from the `streamlit-shadcn-ui` library side-by-side in a Streamlit application. It uses `st.columns` to create a three-column layout and then places an instance of `ui.metric_card` in each column, providing a title, content, description, and a unique key for each card.

```python
import streamlit as st
import streamlit_shadcn_ui as ui

cols = st.columns(3)
with cols[0]:
    ui.metric_card(title="Total Revenue", content="$45,231.89", description="+20.1% from last month", key="card1")
with cols[1]:
    ui.metric_card(title="Total Revenue", content="$45,231.89", description="+20.1% from last month", key="card2")
with cols[2]:
    ui.metric_card(title="Total Revenue", content="$45,231.89", description="+20.1% from last month", key="card3")
```

--------------------------------

### Nesting Streamlit Shadcn UI Components (with statement)

Source: https://github.com/observedobserver/streamlit-shadcn-ui-docs/blob/main/docs/components/experiment.md

This snippet demonstrates how to build nested components in `streamlit-shadcn-ui` using Python's `with` statement syntax. It shows a card component containing another nested card, which in turn includes an input field and a button, alongside a separate button within the outer card.

```Python
with ui.card(key="base_ele_card_l1"):
    with ui.card(key="base_ele_card_l2"):
        ui.element("input", key="nst2_input", label="Value")
        ui.element("button", key="nst2_btn", text="Nest Submmit", variant="outline")

    ui.element("button", key="nst_btn", text="Hello World")
```

--------------------------------

### Implementing Radio Group Component with Streamlit Shadcn-UI (Python)

Source: https://github.com/observedobserver/streamlit-shadcn-ui-docs/blob/main/docs/components/radio_group.md

This snippet demonstrates how to add a radio group component to a Streamlit app using the `streamlit_shadcn_ui` library. It defines a list of options, renders the `radio_group` component with a default selection and a unique key, and then displays the currently selected value.

```Python
import streamlit as st
import streamlit_shadcn_ui as ui

# Radio Group Component
radio_options = [
    {"label": "Option A", "value": "A", "id": "r1"},
    {"label": "Option B", "value": "B", "id": "r2"},
    {"label": "Option C", "value": "C", "id": "r3"}
]
radio_value = ui.radio_group(options=radio_options, default_value="B", key="radio1")
st.write("Selected Radio Option:", radio_value)
```

--------------------------------

### Adding a Hover Card Component in Streamlit

Source: https://github.com/observedobserver/streamlit-shadcn-ui-docs/blob/main/docs/components/hover_card.md

This snippet imports the necessary Streamlit and streamlit-shadcn-ui libraries and then calls the `ui.hover_card` function to display an interactive hover card. The `label` is the text shown initially, `content` is the text displayed on hover, `content_type` specifies the content format, and `key` is a unique identifier for the component.

```python
import streamlit as st

import streamlit_shadcn_ui as ui

ui.hover_card(label="Hover on me1!", content="I am a hover card1!", content_type="text", key="hover_card_1")
```

--------------------------------

### Styling Streamlit Shadcn UI Elements with Tailwind CSS

Source: https://github.com/observedobserver/streamlit-shadcn-ui-docs/blob/main/docs/components/experiment.md

This snippet demonstrates how to apply styling, including Tailwind CSS classes, to individual `streamlit-shadcn-ui` elements using the `className` parameter within the experimental `ui.element` function. It shows adding classes to span elements used as labels and to a button within a card component to control appearance like text color, size, weight, and margin.

```Python
import streamlit_shadcn_ui as UI

with ui.card(key="card1"):
    ui.element("span", children=["Email"], className="text-gray-400 text-sm font-medium m-1", key="label1")
    ui.element("input", key="email_input", placeholder="Your email")

    ui.element("span", children=["User Name"], className="text-gray-400 text-sm font-medium m-1", key="label2")
    ui.element("input", key="username_input", placeholder="Create a User Name")
    ui.element("button", text="Submit", key="button", className="m-1")
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.