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.

# install jinjax
uvx add jinjax

You can use the CLI directly without installing the package.

# 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.

Helpers for these are packed in the basic-components[utils] package.

Package Installation Options

Install only the utility functions for JinjaX and tailwind.

# With utility functions
uv add "basic-components[utils]"

Setup instructions and examples:

• FastAPI
• Flask
• Django

Example

Use components directly in your templates, similar to React. Use Tailwind CSS classes for styles, htmx friendly also!

  <!-- Card component example -->
  <Card className="w-[350px] mb-4">
    <CardHeader className="pb-3">
      <CardTitle>Components!</CardTitle>
      <CardDescription className="max-w-lg text-balance leading-relaxed">
        Using components is fun.
      </CardDescription>
    </CardHeader>
    <CardContent>
      The button below is enabled with htmx. Click to update it.
    </CardContent>
    <CardFooter>
      <!-- use htmx -->
      <Button
        variant="outline"
        hx-get="/button"
        hx-trigger="click"
        hx-target="this"
        hx-swap="outerHTML">htmx is enabled</Button>
    </CardFooter>
  </Card>
</div>

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 to view the documentation.

Contributing

Please read the contributing guide.

License

Licensed under the MIT license.

Components

19/48

• accordion
• alert
• alert-dialog
• aspect-ratio
• avatar
• badge
• breadcrumb
• button
• calendar
• card
• carousel
• chart
• checkbox
• collapsible
• command
• context-menu
• dialog
• drawer
• dropdown-menu
• form
• hover-card
• input-otp
• input
• label
• link
• menubar
• navigation-menu
• pagination
• popover
• progress
• radio-group
• resizable
• scroll-area
• select
• separator
• sheet
• sidebar
• skeleton
• slider
• sonner
• switch
• table
• tabs
• textarea
• toast
• toaster
• toggle-group
• toggle
• tooltip

Extended

• Prose