New Component: Streamlit-antd-components,more widgets to extend streamlit!

A Streamlit component to display Antd-Design.
Check out the Demo APP for more example.

Check out the Github for detail usage.


Hi @ji_haoran

This seems an awesome component. I have a question though. How many levels of nesting can this component support. The screenshot displays 2 levels…


Hi @ji_haoran

This is truly amazing!!! I see that you have really put effort into building this very useful component.

I have 1 observation though: If I click in the middle of a nested chain (say… table22), the entire chain gets selected, right up to table 55). Ideally, it should only select up to table22, right?

Nevertheless, awesome component. Thank you very much.

God Bless :slight_smile:

in antd_tree,you can set checkbox_strict=True(that means parent key and children keys are not associated) to achieve this effect。

1 Like

Hi @ji_haoran,

I tried installing your component on my server (using pip install streamlit-antd-components) - It doesn’t install correctly. I get this error message:

I tried uninstalling and re-installing - it didn’t work. How can I make it work?

Thanks in advance.


I renamed all the component names, as well as some parameter names, so when you update the new version, the original component names will not be available, you will need to change the component names and parameters in your code.
For example,rename antd_tree to tree in your code.

Hi @ji_haoran, thank you so much for your prompt response. The problem is solved.

Cheers :slight_smile:

太厉害了,特别是可分组的 tree select 真的是解了燃眉之急。

一个野心的目标:有无可能做一个抽象对接到 Ant Design Charts,极大扩展其画图能力。

ji, i want to congratulations you for updating the component. Your work is amazing!! I’m super impressed!

Thank you for liking this component. This component is used to extend the steramlit component, so that users can use more components to build more complex interfaces. I hope this component is useful to you.


1 Like

Awesome componente, I’ll be definetly using it!

Adding Ant Design components to Streamlit is a fantastic idea! Your code base is well organized too!

Fyi, so far the components I have tested work well with streamlit-float. I have only tested the Alert banner and Menu. You can see an example of a floating Alert in the demo.


The floating Alert is amazing!

1 Like

Could you please provide an example of catching an event when clicked on a child item and get its parent hierarchy please.
Also is there a way we can expand the tree by default so we can save some clicks.

The tree component has open_index params to expand the default items, when you set open_index params,you should set open_all=False.

My friend, first I want to thank you for dedicating your time to an extremely useful element for the community to use.

I wanted to know if you could help me with the following situation: When using it, I noticed that the elements have a default background color for the app. Is it possible to remove this background or make it transparent?


Can you show a piece of code and what components are used?

unfortunately, at the moment, I don’t have access to the computer that has the code now :confused: I can send it to you on 9/11 when i’ll have acess to the computer with the code hahaha

Anyway, it was something like this:

Remembering that I styled my sidebar with css. So it doesn’t use the secondary color configured in the stremlit app. I believe that the component uses the secondary color to use the background color on the buttons and etc.

If you can help me with this, i’ll be grateful!

The issue has fixed in latest version (0.1.21),so all components has redesign, you can update the package to solve the problem.
Hope it helpful !

1 Like