https://github.com/basicmachines-co/basic-components
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.
https://github.com/basicmachines-co/basic-components
alpine-js components django fastapi flask htmx jinja jinjax python server-side-rendering tailwind-css
Last synced: 16 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/basicmachines-co/basic-components
- Owner: basicmachines-co
- License: mit
- Created: 2024-10-11T19:49:26.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-11-19T16:01:52.000Z (5 months ago)
- Last Synced: 2025-03-23T08:03:54.680Z (about 1 month ago)
- Topics: alpine-js, components, django, fastapi, flask, htmx, jinja, jinjax, python, server-side-rendering, tailwind-css
- Language: Jinja
- Homepage: https://components.basicmachines.co
- Size: 7.44 MB
- Stars: 25
- Watchers: 3
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# basic-components
Re-usable server-side components based on shadcn/ui.
Built with JinjaX, Alpine.js, and Tailwind CSS, with support for htmx.
## Installation & Usage
### Quick Start with `uvx`
JinjaX is required.
```bash
# install jinjax
uvx add jinjax
````
You can use the CLI directly without installing the package.
```bash
# Add components
uvx --from basic-components components add button
```
You will also need to configure your project to load components into the `jinjax.Catalog` and add a global `cn` function
to the Jinja environment. See [utilities](https://components.basicmachines.co/docs/utilities).
Helpers for these are packed in the `basic-components[utils]` package.
### Package Installation Options
Install only the utility functions for JinjaX and tailwind.
```bash
# With utility functions
uv add "basic-components[utils]"
```
Setup instructions and examples:
- [FastAPI](https://components.basicmachines.co/docs/fastapi)
- [Flask](https://components.basicmachines.co/docs/flask)
- [Django](https://components.basicmachines.co/docs/django)
## Example
Use components directly in your templates, similar to React. Use Tailwind CSS classes for styles, htmx friendly also!
```html
Components!
Using components is fun.
The button below is enabled with htmx. Click to update it.
htmx is enabled
```
Components are rendered on the server via JinjaX (a Jinja component library) and returned as html for the browser.
## Installation Groups
- `utils`: Utility functions for JinjaX setup and `cn()` tailwind class helper
- `docs`: Requirements for the docs site
- `dev`: Development tools for contributing
- `full`: All features included
## Documentation
Visit [https://components.basicmachines.co](https://components.basicmachines.co) to view the documentation.
## Contributing
Please read the [contributing guide](https://components.basicmachines.co/docs/contribution).
## License
Licensed under the [MIT license](https://github.com/shadcn/ui/blob/main/LICENSE.md).
## Components
19/48
- [x] accordion
- [x] alert
- [x] alert-dialog
- [ ] aspect-ratio
- [ ] avatar
- [x] badge
- [ ] breadcrumb
- [x] button
- [ ] calendar
- [x] card
- [ ] carousel
- [ ] chart
- [x] checkbox
- [ ] collapsible
- [ ] command
- [ ] context-menu
- [x] dialog
- [ ] drawer
- [x] dropdown-menu
- [x] form
- [ ] hover-card
- [ ] input-otp
- [x] input
- [x] label
- [x] link
- [ ] menubar
- [ ] navigation-menu
- [ ] pagination
- [x] popover
- [ ] progress
- [x] radio-group
- [ ] resizable
- [ ] scroll-area
- [x] select
- [ ] separator
- [x] sheet
- [ ] sidebar
- [ ] skeleton
- [ ] slider
- [ ] sonner
- [ ] switch
- [x] table
- [x] tabs
- [x] textarea
- [x] toast
- [ ] toaster
- [ ] toggle-group
- [ ] toggle
- [ ] tooltip
Extended
- [ ] Prose