base on Using shadcn-ui components in streamlit # streamlit-shadcn-ui :construction: [](https://pypi.org/project/streamlit-shadcn-ui/)  [](https://shadcn.streamlit.app/) Using shadcn-ui components in streamlit <img width="1453" alt="streamlit-shadcn" src="https://github.com/ObservedObserver/streamlit-shadcn-ui/assets/22167673/75620347-9e9c-454c-a7ce-381d7464c519"> ## Installation ```bash pip install streamlit-shadcn-ui ``` example: ```py import streamlit_shadcn_ui as ui trigger_btn = ui.button(text="Trigger Button", key="trigger_btn") ui.alert_dialog(show=trigger_btn, title="Alert Dialog", description="This is an alert dialog", confirm_label="OK", cancel_label="Cancel", key="alert_dialog1") ``` ## Components Check docs and compoenent examples in [](https://shadcn.streamlit.app/) + [x] button + [x] checkbox + [x] select + [x] tabs + [x] card + [x] avatar + [x] date_picker + [x] date_range_picker (date_picker with mode="range") + [x] table + [x] input + [x] slider + [x] textarea + [x] switch + [x] radio_group + [x] alert_dialog + [x] hover_card + [x] badges + [x] link_button    ## One more thing There is a new component in testing, it will allows you to nest all streamlit-shadcn-ui components together. It will not treat each component as an independent streamlit custom component in iframe, but parse the component structure as data and render them all at once in one iframe. example ([live demo](https://shadcn.streamlit.app/Experiment(Cool))): ```py with ui.card(key="card1"): with ui.card(key="card2"): ui.element("input", key="card2_input") ui.element("button", key="card2_btn", text="Nest Submmit", variant="outline") ui.element("button", key="card1_btn", text="Hello World") ```  ## Development Guide There are several scripts in `scripts` folder to help you develop this project. ```sh # For local development ./scripts/frontend.sh # frontend dev server ./scripts/dev.sh # streamlit dev server ``` This repo follows the streamlit custom component structure. + `./streamlit_shadcn_ui` is the python package + `./streamlit_shadcn_ui/components` is the frontend mono repo + `./streamlit_shadcn_ui/components/packages/frontend` is the custom components collection. + `./streamlit_shadcn_ui/components/packages/streamlit-components-lib` is a patch of streamlit-components-lib for react 18 (For now, only the react/react-dom version is changed). + `./streamlit_shadcn_ui/py_components` is the python level API for components. ## Reference + [streamlit-shadcn-ui examples and docs repo](https://github.com/ObservedObserver/steamlit-shadcn-ui-docs) + [Streamlit](https://streamlit.io/) + [shadcn-ui](https://ui.shadcn.com/) # License This repo is under MIT license. See [LICENSE](LICENSE) for details. `streamlit_shadcn_ui/components/packages/streamlit-components-lib` is under its original Apache-2.0 license. It is a temporal patch for streamlit-components-lib in react 18. ", Assign "at most 3 tags" to the expected json: {"id":"5419","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"