{"id":13475498,"url":"https://github.com/ObservedObserver/streamlit-shadcn-ui","last_synced_at":"2025-03-27T00:31:30.717Z","repository":{"id":208606555,"uuid":"698517452","full_name":"ObservedObserver/streamlit-shadcn-ui","owner":"ObservedObserver","description":"Using shadcn-ui components in streamlit","archived":false,"fork":false,"pushed_at":"2025-03-06T05:25:34.000Z","size":508,"stargazers_count":893,"open_issues_count":23,"forks_count":76,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-03-20T20:26:15.723Z","etag":null,"topics":["shadcn","shadcn-ui","streamlit","tailwindcss"],"latest_commit_sha":null,"homepage":"https://shadcn.streamlit.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ObservedObserver.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-30T06:33:35.000Z","updated_at":"2025-03-20T03:42:06.000Z","dependencies_parsed_at":"2025-03-20T20:14:17.321Z","dependency_job_id":"74002970-ef83-440d-b9f7-2b0c5a15eb95","html_url":"https://github.com/ObservedObserver/streamlit-shadcn-ui","commit_stats":{"total_commits":50,"total_committers":2,"mean_commits":25.0,"dds":"0.020000000000000018","last_synced_commit":"c3eff3d4c3e065bd1ca0f1c159e83853c1af05cc"},"previous_names":["observedobserver/streamlit-shadcn-ui"],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ObservedObserver%2Fstreamlit-shadcn-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ObservedObserver%2Fstreamlit-shadcn-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ObservedObserver%2Fstreamlit-shadcn-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ObservedObserver%2Fstreamlit-shadcn-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ObservedObserver","download_url":"https://codeload.github.com/ObservedObserver/streamlit-shadcn-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245760732,"owners_count":20667886,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["shadcn","shadcn-ui","streamlit","tailwindcss"],"created_at":"2024-07-31T16:01:20.920Z","updated_at":"2025-03-27T00:31:30.710Z","avatar_url":"https://github.com/ObservedObserver.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","tailwindcss","Components \u0026 Libraries"],"sub_categories":[],"readme":"# streamlit-shadcn-ui :construction:\n\n[![PyPI - Version](https://img.shields.io/pypi/v/streamlit-shadcn-ui)](https://pypi.org/project/streamlit-shadcn-ui/)\n![PyPI - Downloads](https://img.shields.io/pypi/dm/streamlit-shadcn-ui)\n[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://shadcn.streamlit.app/)\n\nUsing shadcn-ui components in streamlit\n\n\u003cimg width=\"1453\" alt=\"streamlit-shadcn\" src=\"https://github.com/ObservedObserver/streamlit-shadcn-ui/assets/22167673/75620347-9e9c-454c-a7ce-381d7464c519\"\u003e\n\n\n## Installation\n\n```bash\npip install streamlit-shadcn-ui\n```\n\nexample:\n```py\nimport streamlit_shadcn_ui as ui\ntrigger_btn = ui.button(text=\"Trigger Button\", key=\"trigger_btn\")\n\nui.alert_dialog(show=trigger_btn, title=\"Alert Dialog\", description=\"This is an alert dialog\", confirm_label=\"OK\", cancel_label=\"Cancel\", key=\"alert_dialog1\")\n\n```\n\n## Components\n\nCheck docs and compoenent examples in [![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://shadcn.streamlit.app/)\n\n+ [x] button\n+ [x] checkbox\n+ [x] select\n+ [x] tabs\n+ [x] card\n+ [x] avatar\n+ [x] date_picker\n+ [x] date_range_picker (date_picker with mode=\"range\")\n+ [x] table\n+ [x] input\n+ [x] slider\n+ [x] textarea\n+ [x] switch\n+ [x] radio_group\n+ [x] alert_dialog\n+ [x] hover_card\n+ [x] badges\n+ [x] link_button\n+ [x] accordtion\n+ [x] alert\n+ [x] aspect_ratio\n+ [x] calendar\n+ [x] carousel\n+ [x] checkbox\n+ [x] collapsible\n+ [x] command\n+ [x] dialog\n+ [x] dropdown_menu\n+ [x] input-OTP\n+ [x] metric_card\n+ [x] pagination\n+ [x] popover\n+ [x] progress\n+ [x] radio_group\n+ [x] resizable\n+ [x] scroll_area\n+ [x] separator\n+ [x] skeleton\n+ [x] toggle\n+ [x] toggle_group\n\n![streamlit card](https://github.com/ObservedObserver/streamlit-shadcn-ui/assets/22167673/799b9235-96a6-406e-b270-e685de9ba5fd)\n\n![streamlit date picker](https://github.com/ObservedObserver/streamlit-shadcn-ui/assets/22167673/8c32c4e0-8aaf-421d-b459-bceb63f1dd0a)\n\n![streamlit select](https://github.com/ObservedObserver/streamlit-shadcn-ui/assets/22167673/f5a6eb8d-163f-4a7b-b88b-9b962d32dc1b)\n\n\n\n## One more thing\nThere is a new component in testing, it will allows you to nest all streamlit-shadcn-ui components together.\nIt 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.\n\nexample ([live demo](https://shadcn.streamlit.app/Experiment(Cool))):\n```py\nwith ui.card(key=\"card1\"):\n    with ui.card(key=\"card2\"):\n        ui.element(\"input\", key=\"card2_input\")\n        ui.element(\"button\", key=\"card2_btn\", text=\"Nest Submmit\", variant=\"outline\")\n    ui.element(\"button\", key=\"card1_btn\", text=\"Hello World\")\n```\n\n![streamlit react_component](https://github.com/ObservedObserver/streamlit-shadcn-ui/assets/22167673/ab40ed25-cc41-4630-adc9-7d604e44d538)\n\n## Development Guide\n\nThere are several scripts in `scripts` folder to help you develop this project.\n\n```sh\n# For local development\n./scripts/frontend.sh # frontend dev server\n./scripts/dev.sh # streamlit dev server\n```\n\nThis repo follows the streamlit custom component structure.\n+ `./streamlit_shadcn_ui` is the python package\n    + `./streamlit_shadcn_ui/components` is the frontend mono repo\n        + `./streamlit_shadcn_ui/components/packages/frontend` is the custom components collection.\n        + `./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).\n    + `./streamlit_shadcn_ui/py_components` is the python level API for components.\n\n\n\n## Reference\n+ [streamlit-shadcn-ui examples and docs repo](https://github.com/ObservedObserver/steamlit-shadcn-ui-docs)\n+ [Streamlit](https://streamlit.io/)\n+ [shadcn-ui](https://ui.shadcn.com/)\n\n# License\nThis repo is under MIT license. See [LICENSE](LICENSE) for details.\n`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. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FObservedObserver%2Fstreamlit-shadcn-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FObservedObserver%2Fstreamlit-shadcn-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FObservedObserver%2Fstreamlit-shadcn-ui/lists"}