{"id":17241452,"url":"https://github.com/curtis-allan/Shad4Fasthtml","last_synced_at":"2025-02-24T15:31:07.581Z","repository":{"id":252094556,"uuid":"839218736","full_name":"curtis-allan/Shad4Fasthtml","owner":"curtis-allan","description":"Porting Shadcn-ui components to python/js for use with fasthtml","archived":false,"fork":false,"pushed_at":"2024-11-06T21:52:52.000Z","size":781,"stargazers_count":113,"open_issues_count":0,"forks_count":7,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-06T22:34:53.108Z","etag":null,"topics":["fasthtml","htmx","javascript","python","tailwindcss"],"latest_commit_sha":null,"homepage":"https://shad4fasthtml.com","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/curtis-allan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"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},"funding":{"github":["curtis-allan"]}},"created_at":"2024-08-07T07:17:37.000Z","updated_at":"2024-11-06T21:52:56.000Z","dependencies_parsed_at":"2024-08-16T02:27:27.138Z","dependency_job_id":"d615da18-26e1-4259-a43c-4a4eae1307ea","html_url":"https://github.com/curtis-allan/Shad4Fasthtml","commit_stats":null,"previous_names":["curtis-allan/shadcn-fasthtml-framework","curtis-allan/shad4fasthtml"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/curtis-allan%2FShad4Fasthtml","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/curtis-allan%2FShad4Fasthtml/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/curtis-allan%2FShad4Fasthtml/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/curtis-allan%2FShad4Fasthtml/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/curtis-allan","download_url":"https://codeload.github.com/curtis-allan/Shad4Fasthtml/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240503560,"owners_count":19812021,"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":["fasthtml","htmx","javascript","python","tailwindcss"],"created_at":"2024-10-15T06:09:34.104Z","updated_at":"2025-02-24T15:31:07.576Z","avatar_url":"https://github.com/curtis-allan.png","language":"Python","funding_links":["https://github.com/sponsors/curtis-allan"],"categories":["GitHub","Ports \u0026 Implementations"],"sub_categories":[],"readme":"_This documentation is a work in progress. I appreciate your patience and feedback as I continue to build upon the repo. All credits go to \u003ca href=\"https://x.com/shadcn\" target=\"_blank\"\u003e@Shadcn\u003c/a\u003e for the component styles and \u003ca href=\"https://x.com/jeremyphoward\" target=\"_blank\"\u003e@JeremyPHoward\u003c/a\u003e for the fastHtml framework._\n\n[![PyPI - Version](https://img.shields.io/pypi/v/shad4fast.svg)](https://pypi.org/project/shad4fast)\n[![PyPI - Python Version](https://img.shields.io/pypi/pyversions/shad4fast.svg)](https://pypi.org/project/shad4fast)\n\n## Quick Start Guide\n\n### Setup \u0026 Installation\n\nGetting started with Shad4FastHtml is quick and easy. Once you have a Python environment ready (I recommend using a `venv` environment of some sort), follow these steps to set up your project:\n\n1. Install the `Shad4Fast` pip package. This can be used to initialize a new project too, all dependencies (including FastHtml) will be installed:\n\n```zsh\npip install shad4fast\n```\n\n2. If you haven't already, create a new file that will act as the root of your FastHtml application (such as `main.py`). If you are not familiar with FastHtml, I recommend reading the \u003ca href=\"https://docs.fastht.ml/\" target=\"_blank\"\u003eFastHtml Documentation\u003c/a\u003e to get a better understanding of how FastHtml works.\n\n3. Add the following import statements to the top of the file:\n\n```python\nfrom fasthtml.common import *\nfrom shad4fast import * # Or individual components: Button, Input etc.\n```\n\n\u003e [!NOTE]\n\u003e If importing components individually, make sure to also import the `ShadHead()` function.\n\n3. Include `ShadHead()` in your FastHTML headers and disable the default Pico.css header, as shown below:\n\n```python\napp, rt = fast_app(\n    pico=False,\n    hdrs=(ShadHead(),),\n)\n```\n\n4. That's it! You're now ready to start using the UI components in your app. Heres how a basic FastHtml app using Shad4Fast might look:\n\n```python\nfrom fasthtml.common import *\nfrom shad4fast import *\n\napp, rt = fast_app(pico=False, hdrs=(ShadHead(tw_cdn=True),))\n\n@rt(\"/\")\ndef get():\n    return Titled(\"Hello World!\", Alert(title=\"Shad4Fast\", description=\"You're all set up!\"))\n\nserve()\n```\n\n## Configuration\n\n### Tailwind Configuration\n\nAs with Shadcn-ui components, Shad4Fast uses the `TailwindCSS` library for styling by default. This can be setup in two ways: via a cdn script or the tailwind \u003ca href=\"https://tailwindcss.com/blog/standalone-cli\" target=\"_blank\"\u003estandalone package\u003c/a\u003e.\n\nShad4Fast provides in-built functionality for both of these use cases. For a detailed documentation, refer to the \u003ca target=\"_blank\" href=\"https://shad4fasthtml.com/getting-started/tailwind-setup\"\u003eTailwind Setup\u003c/a\u003e guide.\n\nThe easiest way to get started is to simply set the `tw_cdn` option within the ShadHead function to `True`:\n\n```python\napp, rt = fast_app(\n    pico=False,\n    hdrs=(ShadHead(tw_cdn=True),),\n)\n```\n\n### Theme Handling\n\nIncluded in the Shad4Fast package is a script to streamline the use of light/dark themes within your FastHtml application. This can be used by setting the `theme_handle` attribute to `True` as shown below:\n\n```python\napp, rt = fast_app(\n    pico=False,\n    hdrs=(ShadHead(tw_cdn=True, theme_handle=True),),\n)\n```\n\nSetting this to `True` includes a script in the headers that allows for toggling of the current theme based on standard light/ dark mode determination. For a full guide on how this works and setting up a theme toggle button, see the \u003ca href=\"https://shad4fasthtml.com/getting-started/theme-configuration\" target=\"_blank\"\u003eTheme Configuration\u003c/a\u003e guide.\n\n\u003e [!IMPORTANT]\n\u003e This project is still in its youth. If you encounter any bugs or issues, please open an issue on the GitHub repository.\n\n## Using Components\n\nTo implement Shadcn UI components in your codebase, refer to the relevant component documentation. Each component has its own set of properties and usage guidelines.\n\n## Lucide Icons\n\nShad4FastHtml relies on \u003ca href=\"https://lucide.dev/icons/\" target=\"_blank\"\u003eLucide Icons\u003c/a\u003e as a dependency. This was optional in the previous versions, however certain components require Lucide icons to accurately portray their Shadcn counterpart.\n\nTo improve the usage of these icons within FastHtml, I create a pip package called `lucide-fasthtml` to improve the rendering and configuration of the icons. This is set as a dependency for `Shad4Fast` and will be automatically installed and setup upon installing Shad4Fast, however the package can be used purely with FastHtml alone.\n\nAs a general overview, the `lucide-fasthtml` package provides a `Lucide` component that takes a valid lucide icon name and renders the icon. A set of background functions handle the fetching of the svg data and save it to an `icons.py` file generated at the root of your project.\n\nFor a full reference on the package and its usage, refer to the github repo \u003ca href=\"https://github.com/curtis-allan/lucide-fasthtml\" target=\"_blank\"\u003ehere.\u003c/a\u003e\n\n## Roadmap\n\n- **IN PROGRESS**: Documentation fixing and cleaning up.\n\n- Implement all existing Shadcn-ui components.\n\n- Add type assertions for all component attributes, with proper error handling and documentation.\n\n- Complete aria attributes for all components. Enhance and optimize the JS implementation.\n\n- Future plan:\n  - Streamline the use of V0 with the framework to allow for fully-generative UI frameworks for FastHtml.\n\n## Need Help?\n\nIf you encounter any issues or have questions, please reach out either through the \u003ca href=\"https://github.com/curtis-allan/shadcn-fasthtml-framework\" target=\"_blank\"\u003eGithub\u003c/a\u003e repo or send me a dm on \u003ca href=\"https://x.com/CurtisJAllan\" target=\"_blank\"\u003eX aka twitter\u003c/a\u003e and either myself or a member of the community will try to help out.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcurtis-allan%2FShad4Fasthtml","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcurtis-allan%2FShad4Fasthtml","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcurtis-allan%2FShad4Fasthtml/lists"}