Beautypy Components

{% Section title="Introduction" css_class="mb-5" tag_id="intro" %}

Beautypy is a Django UI component library powered by Bootstrap 5. Use simple template tags to build modern, responsive interfaces fast.

{% endSection %} {% Section title="Installation" css_class="mb-5" tag_id="installation" %}

Install

pip install -i https://test.pypi.org/simple/ beautypy

Django Setup

Add beautypy to INSTALLED_APPS
Load tags with {% raw %}{% load Components %}{% endraw %}
Include CSS and JS using {% raw %}{% LoadBeautypyCSS %}{% endraw %} and {% raw %}{% LoadBeautypyJS %}{% endraw %}

{% endSection %} {% Section title="Components" css_class="mb-5" tag_id="components" %}

Buttons

{% Button label="Primary" variant="primary" %} {% Button label="Secondary" variant="secondary" %} {% Button label="Success" variant="success" %} {% Button label="Danger" variant="danger" %} {% Button label="Warning" variant="warning" %} {% Button label="Info" variant="info" %}

Links

{% Link url="#" label="Link (btn-link)" css_class="btn btn-link" %} {% Link url="#" label="Primary Link" css_class="btn btn-primary" %}

Alerts

{% Alert message="Info alert message." alert_type="info" %} {% Alert message="Success message!" alert_type="success" %} {% Alert message="Warning notice!" alert_type="warning" %} {% Alert message="Error occurred!" alert_type="error" %}

Form Controls

Email {% InputField name="email" input_type="email" css_class="form-control" tag_id="email" %}

Name {% InputField name="name" input_type="text" css_class="form-control" tag_id="name" %}

Tooltip

{% Tooltip title="Helpful info!" css_class="d-inline-block" %} {% endTooltip %}

Toast

{% Toast message="This is a toast message" toast_type="success" tag_id="demoToast" %}

Accordion

{% Accordion title="Click to Expand" css_class="mb-3" tag_id="docsAccordion" %}

This is hidden content inside the accordion.

{% endAccordion %}

Container

{% Container css_class="my-3 p-3 bg-white border rounded" tag_id="demo-container" %}

This content is wrapped in a Bootstrap container.

{% endContainer %} {% endSection %} {% Section title="Example" css_class="mb-5" tag_id="example" %}

Starter template example:

{% load Components %}


  
    {% LoadBeautypyCSS %}
  
  
    {% Navbar css_class="navbar navbar-expand-lg navbar-dark bg-primary" %}
      
    {% endNav %}

    {% Footer css_class="text-center text-muted py-3" %}
      © 2025 Beautypy
    {% endFooter %}

    {% LoadBeautypyJS %}
  
{% endverbatim %}