alexferl / flowbite-mithril

Flowbite components for Mithril

flowbite-mithril

Work in progress.

✅ = Fully implemented

🚧 = Partially implemented

❌ = Not implemented

Components

Name	Done	Notes
Accordion	✅
Alert	✅
Avatar	✅
Badge	✅
Breadcrumb	✅
Button	✅
Button group	✅
Card	✅
Carousel	❌
Datepicker	❌
Dropdown	✅
Footer	✅
KBD	✅
List group	✅
Modal	❌
Navbar	✅
Pagination	❌
Progress bar	❌
Rating	❌
Sidebar	❌
Spinner	✅
Table	🚧	Missing hover/striped
Tabs	❌
Timeline	❌
Toast	❌
Tooltip	❌

Forms

Name	Done	Notes
Checkbox	✅
File Input	🚧	Missing dropzone
Input	✅
Radio	✅
Range	✅
Select	✅
Textarea	✅
Toggle	✅

Typography

Name	Done	Notes
Blockquote	✅

Getting started

Learn how to get started with Flowbite Mithril.

Setup Tailwind CSS

Install Tailwind CSS:

npm i -D autoprefixer postcss tailwindcss
npx tailwindcss init -p

Point Tailwind CSS to files you have class="..." in:

module.exports = {
  content: ["./src/**/*.js"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Add Tailwind CSS to a CSS file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Install Flowbite Mithril

Install Flowbite and Flowbite Mithril:

npm i -D flowbite github:alexferl/flowbite-mithril

Add the Flowbite plugin to tailwind.config.js, and include content from flowbite-mithril:

module.exports = {
  content: ["./node_modules/flowbite-mithril/**/*.js"],
  plugins: [require("flowbite/plugin")],
};