Streamlit-Antd-Components

A Streamlit custom component to implement Antd-Design and Mantine widgets.

Check out the Demo App for more example.

This library now provides component blow:

• buttons A group of buttons component.
• divider A divider line separates different content
• menu A versatile menu for navigation
• steps A navigation bar that guides users through the steps of a task
• cascader Chooses cascade items in one float layer for better user experience.
• checkbox A group of checkbox.
• rate Rate component
• switch Switching between two states or on-off state
• transfer Double column transfer choice box with case-insensitive search
• segmented Segmented Controls.
• tabs A tabs component.
• tree A hierarchical list structure component.
• alert Alert component for feedback
• result Used to feed back the results of a series of operational tasks
• tag Tag for categorizing or markup
• pagination A long list can be divided into several pages

Install

pip install streamlit-antd-components

Quickstart

Create a group of buttons,use more style params.

import streamlit as st
import streamlit_antd_components as sac

btn = sac.buttons(
    items=['button1', 'button2', 'button3'],
    index=0,
    format_func='title',
    align='center',
    direction='horizontal',
    radius='lg',
    return_index=False,
)
st.write(f'The selected button label is: {btn}')

Transfer with Case-Insensitive Search

The transfer widget now supports case-insensitive search, making it easier to find items regardless of their case.

import streamlit as st
import streamlit_antd_components as sac

# Sample data with mixed case
mixed_case_items = ["Apple", "banana", "CHERRY", "Date", "Elderberry"]

# Using the transfer widget with search enabled
result = sac.transfer(
    items=mixed_case_items,
    label="Case-insensitive Transfer Demo",
    titles=["Available", "Selected"],
    search=True,  # Enable search
    return_index=False
)
st.write("Selected items:", result)

When searching in the transfer widget, terms like "apple", "APPLE", or "Apple" will all match "Apple" in the list.

Todo

• pop-up component
• Interaction between components
• Add component callback function
• multiple sac components