Components¶

All components are made with Tailwind CSS and DaisyUI.

Themes¶

To change or add themes:

Add/remove themes in app.css > @plugin "daisyui"

app.css

@import "tailwindcss";
@plugin "daisyui" {
    themes: light --default, dark --prefersdark, aqua;
};

Add the theme name to the <html> in base.html to activate it.
templates/base.html
```
<html data-theme="cupcake">

</html>
```

Here is a list of the 30+ available themes.

Custom Components¶

All custom-made components are inside the templates/components folder of your DjipFast repo. Each component is documented in detail in the code and in this documentation.

Example: This is a Hero component.

To include a custom component in your project, you can use the include tag in your template.

{% include 'components/component-name.html' %}

daisyUI components¶

DjipFast uses daisyUI as a UI kit for various components like buttons, inputs, tabs, etc. Here are all the daisyUI components.

Example: Add className: "btn btn-primary" to display this button:

Custom font¶

Add the font to a <style> tag in base.html <head> tag.

templates/base.html

<style>
    @import url('https://fonts.googleapis.com/css2?family=SUSE:[email protected]&display=swap');
    body {
        font-family: 'SUSE', sans-serif;
    }
</style>