{"id":25572841,"url":"https://github.com/basicmachines-co/basic-components","last_synced_at":"2025-04-12T13:52:30.047Z","repository":{"id":258739088,"uuid":"871359345","full_name":"basicmachines-co/basic-components","owner":"basicmachines-co","description":"Server-side components for your Python web framework that you can copy and paste into your apps, based on shadcn/ui. Made with JinjaX, htmx, Alpine.js and Tailwind CSS. Open source.","archived":false,"fork":false,"pushed_at":"2024-11-19T16:01:52.000Z","size":7798,"stargazers_count":25,"open_issues_count":4,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-23T08:03:54.680Z","etag":null,"topics":["alpine-js","components","django","fastapi","flask","htmx","jinja","jinjax","python","server-side-rendering","tailwind-css"],"latest_commit_sha":null,"homepage":"https://components.basicmachines.co","language":"Jinja","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/basicmachines-co.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2024-10-11T19:49:26.000Z","updated_at":"2025-03-17T18:42:58.000Z","dependencies_parsed_at":"2024-11-19T16:23:59.258Z","dependency_job_id":"7f0fc909-fc57-4e82-93ee-b82e2d5f7c09","html_url":"https://github.com/basicmachines-co/basic-components","commit_stats":null,"previous_names":["basicmachines-co/basic-components"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basicmachines-co%2Fbasic-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basicmachines-co%2Fbasic-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basicmachines-co%2Fbasic-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basicmachines-co%2Fbasic-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/basicmachines-co","download_url":"https://codeload.github.com/basicmachines-co/basic-components/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248576205,"owners_count":21127343,"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":["alpine-js","components","django","fastapi","flask","htmx","jinja","jinjax","python","server-side-rendering","tailwind-css"],"created_at":"2025-02-21T01:18:04.907Z","updated_at":"2025-04-12T13:52:30.029Z","avatar_url":"https://github.com/basicmachines-co.png","language":"Jinja","readme":"# basic-components\n\nRe-usable server-side components based on shadcn/ui.\nBuilt with JinjaX, Alpine.js, and Tailwind CSS, with support for htmx.\n\n## Installation \u0026 Usage\n\n![demo](/docs/static/img/components-add-demo.gif)\n\n### Quick Start with `uvx`\n\nJinjaX is required.\n\n```bash\n# install jinjax\nuvx add jinjax\n````\n\nYou can use the CLI directly without installing the package.\n\n```bash\n# Add components\nuvx --from basic-components components add button\n```\n\nYou will also need to configure your project to load components into the `jinjax.Catalog` and add a global `cn` function\nto the Jinja environment. See [utilities](https://components.basicmachines.co/docs/utilities).\n\nHelpers for these are packed in the `basic-components[utils]` package. \n\n### Package Installation Options\n\nInstall only the utility functions for JinjaX and tailwind.\n\n```bash\n# With utility functions\nuv add \"basic-components[utils]\"\n```\n\nSetup instructions and examples:\n- [FastAPI](https://components.basicmachines.co/docs/fastapi)\n- [Flask](https://components.basicmachines.co/docs/flask)\n- [Django](https://components.basicmachines.co/docs/django)\n\n## Example\n\nUse components directly in your templates, similar to React. Use Tailwind CSS classes for styles, htmx friendly also!\n\n```html\n  \u003c!-- Card component example --\u003e\n  \u003cCard className=\"w-[350px] mb-4\"\u003e\n    \u003cCardHeader className=\"pb-3\"\u003e\n      \u003cCardTitle\u003eComponents!\u003c/CardTitle\u003e\n      \u003cCardDescription className=\"max-w-lg text-balance leading-relaxed\"\u003e\n        Using components is fun.\n      \u003c/CardDescription\u003e\n    \u003c/CardHeader\u003e\n    \u003cCardContent\u003e\n      The button below is enabled with htmx. Click to update it.\n    \u003c/CardContent\u003e\n    \u003cCardFooter\u003e\n      \u003c!-- use htmx --\u003e\n      \u003cButton\n        variant=\"outline\"\n        hx-get=\"/button\"\n        hx-trigger=\"click\"\n        hx-target=\"this\"\n        hx-swap=\"outerHTML\"\u003ehtmx is enabled\u003c/Button\u003e\n    \u003c/CardFooter\u003e\n  \u003c/Card\u003e\n\u003c/div\u003e\n```\n\nComponents are rendered on the server via JinjaX (a Jinja component library) and returned as html for the browser.\n\n![demo](/docs/static/img/htmx-demo.gif)\n\n## Installation Groups\n\n- `utils`: Utility functions for JinjaX setup and `cn()` tailwind class helper\n- `docs`: Requirements for the docs site\n- `dev`: Development tools for contributing\n- `full`: All features included\n\n## Documentation\n\nVisit [https://components.basicmachines.co](https://components.basicmachines.co) to view the documentation.\n\n## Contributing\n\nPlease read the [contributing guide](https://components.basicmachines.co/docs/contribution).\n\n## License\n\nLicensed under the [MIT license](https://github.com/shadcn/ui/blob/main/LICENSE.md).\n\n## Components\n\n19/48\n\n- [x] accordion\n- [x] alert\n- [x] alert-dialog \n- [ ] aspect-ratio\n- [ ] avatar\n- [x] badge\n- [ ] breadcrumb\n- [x] button\n- [ ] calendar\n- [x] card\n- [ ] carousel\n- [ ] chart\n- [x] checkbox\n- [ ] collapsible\n- [ ] command\n- [ ] context-menu\n- [x] dialog \n- [ ] drawer\n- [x] dropdown-menu\n- [x] form\n- [ ] hover-card\n- [ ] input-otp\n- [x] input\n- [x] label\n- [x] link\n- [ ] menubar\n- [ ] navigation-menu\n- [ ] pagination\n- [x] popover\n- [ ] progress\n- [x] radio-group\n- [ ] resizable\n- [ ] scroll-area\n- [x] select\n- [ ] separator\n- [x] sheet\n- [ ] sidebar\n- [ ] skeleton\n- [ ] slider\n- [ ] sonner\n- [ ] switch\n- [x] table\n- [x] tabs\n- [x] textarea\n- [x] toast\n- [ ] toaster\n- [ ] toggle-group\n- [ ] toggle\n- [ ] tooltip\n\nExtended\n- [ ] Prose ","funding_links":[],"categories":["Components \u0026 Libraries"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasicmachines-co%2Fbasic-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbasicmachines-co%2Fbasic-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasicmachines-co%2Fbasic-components/lists"}