mithril-materialized

A Mithril.js component library inspired by materialize-css design principles, available on npm. This library provides you with ready-to-use Mithril components that follow Material Design guidelines, with no external JavaScript dependencies.

Documentation and releases

• Browse the interactive component documentation and examples.
• See the changelog for version-specific changes.
• Report issues or contribute at the GitHub repository.

✨ Key Features

• 🔥 Zero External JS Dependencies: No longer requires materialize-css JavaScript or material-icons fonts
• 📦 Smaller Bundle Size: Reduced package size by eliminating external dependencies
• 🎨 Custom SVG Icons: Built-in MaterialIcon component with custom SVG icons
• ⚡ Better Performance: Direct implementations without jQuery or other heavy dependencies
• 🛠️ Enhanced Components: Comprehensive component library with modern features
• 🌗 Dark Theme Support: Built-in light/dark theme system with CSS custom properties
• 📱 Modern Architecture: Factory components with proper TypeScript support, and clear separation between controlled and uncontrolled component state
• 🎯 CSS-Only Styling: Uses only CSS for styling - no JavaScript initialization needed

📦 Installation

npm install mithril mithril-materialized

Supported Components

Components marked with an * are not included in the original materialize-css library.

• Buttons
  • Button
  • FlatButton
  • RoundButton
  • SubmitButton
• Inputs
  • TextInput
  • TextArea
  • AutoComplete
  • UrlInput
  • EmailInput
  • NumberInput
  • ColorInput
  • RangeInput* (with vertical, double-thumb support, and smart tooltip display)
  • Chips
• Pickers
  • DatePicker (with optional week numbers and date range selection)*
  • TimePicker (with inline mode and switchable AM/PM/24h)*
• Selections
  • Select
  • SearchSelect*, a searchable select dropdown (supports async remote loading via loadOptions)
  • Options
  • RadioButtons (HTML labels/descriptions require explicit allowHtml: true)
  • Switch
  • Dropdown
  • ToggleButton* (single toggle button component)
• Collections
  • Basic, Link and Avatar Collections
  • Collapsible or accordion
• Theme & Upload
  • ThemeSwitcher* (light/dark/auto theme switching)
  • ThemeToggle* (simple light/dark toggle)
  • FileUpload* (drag-and-drop with validation and preview)
• Navigation
  • Sidenav (responsive navigation drawer)
  • Breadcrumb* (navigation path indicator)
  • Wizard/Stepper* (multi-step process guidance)
• Others
  • ModalPanel
  • MaterialBox
  • Carousel
  • Pagination
  • PaginationControls*
  • Parallax
• Layout & Display
  • Masonry* (Pinterest-style responsive grid layout)
  • ImageList* (responsive image galleries with various layouts)
  • Timeline* (vertical timeline with events and milestones)
• Rating*
  • RatingControl (Horizontal control, configurable range and step size, optionally with custom icons)
• Data & Tables
  • DataTable* (sorting, filtering, pagination, selection)
  • TreeView* (hierarchical data with expand/collapse, selection, and customizable icons)
• Additional
  • Label
  • HelperText
  • CodeBlock
  • Icon, a simple wrapper for creating icons using material-icons font
  • MaterialIcon, for creating the close/clear and caret as SVG

📖 Usage Instructions

Online flems examples: FlatButton and Select.

Quick Start

1. Install the package:

   npm install mithril mithril-materialized

2. Import the CSS (optional, for Material Design styling):

   import 'mithril-materialized/index.css';

3. Use components in your app:

   import m from 'mithril';
   import { 
     TextInput, 
     Button, 
     RangeInput,
     DatePicker,
     DataTable,
     TreeView,
     ThemeToggle,
     FileUpload,
     Sidenav,
     Breadcrumb,
     Wizard,
     Masonry,
     Timeline,
     ImageList
   } from 'mithril-materialized';
   
   const MyComponent = () => ({
     view: () => m('.container', [
       // Theme toggle in header
       m('nav', [
         m('.nav-wrapper', [
           m('.right', m(ThemeToggle))
         ])
       ]),
          
       // Breadcrumb navigation
       m(Breadcrumb, {
         items: [
           { text: 'Home', href: '/' },
           { text: 'Products', href: '/products' },
           { text: 'Details', active: true }
         ]
       }),
          
       // Form inputs
       m(TextInput, {
         label: 'Your name',
         onchange: (value) => console.log(value)
       }),
          
       // Enhanced range sliders with smart tooltips
       m(RangeInput, {
         label: 'Volume',
         min: 0,
         max: 100,
         valueDisplay: 'auto', // Show tooltip on drag
         onchange: (value) => console.log('Volume:', value)
       }),
          
       m(RangeInput, {
         label: 'Price Range',
         min: 0,
         max: 1000,
         minmax: true,
         minValue: 100,
         maxValue: 500,
         valueDisplay: 'always', // Always show values
         onchange: (min, max) => console.log('Range:', min, '-', max)
       }),
          
       m(RangeInput, {
         label: 'Vertical Slider',
         min: 0,
         max: 100,
         vertical: true,
         height: '200px',
         valueDisplay: 'auto',
         tooltipPos: 'right',
         onchange: (value) => console.log('Vertical:', value)
       }),
          
       // Enhanced DatePicker with range selection
       m(DatePicker, {
         label: 'Event Date',
         helperText: 'Select a single date',
         format: 'mmmm d, yyyy',
         onchange: (value) => console.log('Date:', value)
       }),
          
       m(DatePicker, {
         dateRange: true,
         label: 'Project Timeline',
         helperText: 'Select start and end dates',
         format: 'mmmm d, yyyy',
         minDateRange: 1,
         maxDateRange: 30,
         onchange: (value) => console.log('Date range:', value)
       }),
          
       m(Button, { 
         label: 'Submit',
         onclick: () => alert('Hello!')
       }),
          
       // File upload
       m(FileUpload, {
         accept: 'image/*',
         multiple: true,
         onFilesSelected: (files) => console.log(files)
       }),
          
       // TreeView for hierarchical data
       m(TreeView, {
         data: [
           {
             id: 'root',
             label: 'Project Root',
             expanded: true,
             children: [
               { id: 'src', label: 'src/' },
               { id: 'docs', label: 'docs/' },
             ]
           }
         ],
         selectionMode: 'multiple',
         iconType: 'caret',
         showConnectors: true,
         onselection: (selectedIds) => console.log('Selected:', selectedIds)
       }),
          
       // Layout components
       m(Masonry, {
         items: [
           { id: 1, title: 'Card 1', content: 'Short content' },
           { id: 2, title: 'Card 2', content: 'Much longer content...' },
           { id: 3, title: 'Card 3', content: 'Medium content' }
         ],
         columnWidth: 250,
         gap: 16,
         renderItem: (item) => m('.card', [
           m('.card-content', [
             m('span.card-title', item.title),
             m('p', item.content)
           ])
         ])
       }),
          
       m(Timeline, {
         events: [
           {
             id: 1,
             title: 'Project Started',
             date: '2024-01-15',
             description: 'Initial project kickoff',
             type: 'milestone'
           },
           {
             id: 2,
             title: 'First Release',
             date: '2024-03-20',
             description: 'Released version 1.0',
             type: 'release'
           }
         ]
       }),
          
       m(ImageList, {
         images: [
           { src: '/image1.jpg', alt: 'Image 1' },
           { src: '/image2.jpg', alt: 'Image 2' },
           { src: '/image3.jpg', alt: 'Image 3' }
         ],
         layout: 'masonry', // 'grid' | 'masonry' | 'quilted'
         cols: 3
       })
     ])
   });

Integration with Build Tools

Webpack/Vite/Parcel: The library works out-of-the-box with modern bundlers.

CSS Framework Integration: You can use the components with any CSS framework. The included CSS provides Material Design styling, but you can override it with your own styles.

TypeScript: Full TypeScript support with comprehensive type definitions included.

See the live documentation for examples and component APIs.

Note: The date range picker is now fully implemented with comprehensive validation and formatting support.

🤝 Contributing

We welcome contributions! Priority areas for community involvement:

1. Usage: Accessibility improvements, performance optimizations
2. Documentation: Examples, guides, API documentation
3. Testing: Unit tests, visual regression tests, browser compatibility

See our contributing guide for detailed information.

Button semantics

Button, LargeButton, SmallButton, and FlatButton render native <button> elements for actions. Use href when the component represents navigation; it then renders an <a> without a button type.

m(Button, { label: 'Save', onclick: save });
m(Button, { label: 'Read the docs', href: '/docs' });

Migration: If you relied on the previous anchor markup for navigation, add href. Action buttons now correctly use native button semantics.

Async SearchSelect

Use loadOptions(query) to retrieve options remotely. The component displays loading, empty, and error states; i18n customizes their messages.

m(SearchSelect<number>, {
  label: 'Remote search',
  checkedId: selectedIds,
  options: [],
  loadOptions: (query) => fetchOptions(query),
  onchange: (ids) => {
    selectedIds = ids;
  },
});

SearchSelect uses combobox/listbox ARIA roles and supports ArrowDown, ArrowUp, Enter/Space, and Escape.

Build instructions

This repository consists of two packages, combined using lerna: the lib package that is published to npm, as well as an example project which uses this library to display the Mithril components that it contains.

To install the dependencies, you can use npm i, or, alternatively, use pnpm m i (assuming you have installed pnpm as alternative package manager using npm i -g pnpm) to perform a multi-repository install. Next, build everything using npm start and visit the documentation page on http://localhost:1234 in case port 1234 is not occupied already.

🎨 Styling & CSS

CSS Usage

The library includes carefully crafted CSS that provides Material Design styling without external dependencies. You can import the ready-to-use CSS:

import 'mithril-materialized/index.css';

Important: The CSS styling is completely independent of the original materialize-css. This means:

• ✅ No conflicting styles from materialize-css
• ✅ Smaller CSS bundle size
• ✅ Custom optimizations for better performance
• ✅ No external font dependencies

🔥 NEW: Modular CSS Architecture

Tree-shakable CSS modules for optimal bundle sizes! Import only the CSS you need:

// Option 1: Import everything (64KB total)
import 'mithril-materialized/index.css';

// Option 2: Import only what you need (modular approach)
import 'mithril-materialized/core.css';      // Essential styles (18KB)
import 'mithril-materialized/forms.css';     // Form components only
import 'mithril-materialized/components.css'; // Interactive components

// Option 3: Advanced components only when needed
import 'mithril-materialized/pickers.css';   // Date/Time pickers
import 'mithril-materialized/advanced.css';  // Carousel, sidenav, etc.
import 'mithril-materialized/utilities.css'; // Badges, icons, cards

CSS Modules Available:

• core.css (18KB) - Essential foundation (normalize, grid, typography, variables)
• components.css - Interactive components (buttons, dropdowns, modals, tabs)
• forms.css - All form components (inputs, selects, switches, file upload)
• pickers.css - Date and time picker components
• advanced.css - Specialized components (carousel, sidenav, navbar, preloader)
• utilities.css - Visual utilities (badges, cards, icons, toast, chips)

Bundle Size Optimization:

• Full bundle: 64KB gzipped (44KB JS + 20KB CSS)
• Modular approach can reduce CSS by 30-50%
• Use only core.css + specific modules for your use case

🌓 Dark Theme Support

Built-in dark theme support with CSS custom properties:

import { ThemeManager, ThemeSwitcher } from 'mithril-materialized';

// Programmatic theme control
ThemeManager.setTheme('dark');    // 'light' | 'dark' | 'auto'
ThemeManager.toggle();            // Toggle between light/dark
ThemeManager.getTheme();          // Get current theme

// UI Components
m(ThemeSwitcher, {
  onThemeChange: (theme) => console.log('Theme:', theme)
});

m(ThemeToggle); // Simple toggle button

CSS Custom Properties: All colors use CSS variables for runtime theme switching:

:root {
  --mm-primary-color: #26a69a;
  --mm-background-color: #ffffff;
  --mm-text-primary: rgba(0, 0, 0, 0.87);
}

[data-theme="dark"] {
  --mm-primary-color: #80cbc4;
  --mm-background-color: #121212;
  --mm-text-primary: rgba(255, 255, 255, 0.87);
}

SASS Usage

For advanced customization, you can use the SASS source files directly:

// Import all SASS components
@import 'mithril-materialized/sass/materialize.scss';

// Or import individual components
@import 'mithril-materialized/sass/components/buttons';
@import 'mithril-materialized/sass/components/forms';
@import 'mithril-materialized/sass/components/grid';

SASS Variables: You can customize colors, spacing, and other design tokens by overriding SASS variables before importing:

// Customize Material Design variables
$primary-color: #2196F3;
$secondary-color: #FF9800;

// Then import the library
@import 'mithril-materialized/sass/materialize.scss';

Custom Styles

ModalPanel overrides

ModalPanel now exposes stable slot classes and --mm-modal-* tokens so you can override styles without relying on broad selectors.

Slot classes:

• .mm-modal-overlay
• .mm-modal-surface
• .mm-modal-close-button
• .mm-modal-content
• .mm-modal-content-with-close
• .mm-modal-title
• .mm-modal-footer

Common tokens:

:root {
  --mm-modal-overlay-background: rgba(0, 0, 0, 0.5);
  --mm-modal-overlay-z-index: 1002;
  --mm-modal-z-index: 1003;

  --mm-modal-width: 75%;
  --mm-modal-max-width: 75%;
  --mm-modal-max-height: 85%;
  --mm-modal-border-radius: 4px;
  --mm-modal-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14),
    0 9px 46px 8px rgba(0, 0, 0, 0.12),
    0 11px 15px -7px rgba(0, 0, 0, 0.2);

  --mm-modal-content-padding: 24px;
  --mm-modal-content-padding-top-with-close: 48px;
  --mm-modal-title-margin: 0 0 20px 0;

  --mm-modal-footer-padding: 4px 6px;
  --mm-modal-footer-border-top: 1px solid var(--mm-border-color, rgba(160, 160, 160, 0.2));

  --mm-modal-close-top: 8px;
  --mm-modal-close-right: 8px;
  --mm-modal-close-padding: 8px;
  --mm-modal-close-z-index: 2;

  --mm-modal-bottom-sheet-max-height: var(--mm-modal-max-height, 85%);
  --mm-modal-bottom-sheet-border-radius: 8px 8px 0 0;
}

Backward compatibility note:

• Existing .modal and .modal-* classes are retained.
• Existing className usage on ModalPanel still works.
• If you previously used !important to beat inline styles, prefer these slot classes and tokens first.

The library includes these additional styles for enhanced functionality:

/* For the switch */
.clear,
.clear-10,
.clear-15 {
  clear: both;
  /* overflow: hidden; Precaution pour IE 7 */
}
.clear-10 {
  margin-bottom: 10px;
}
.clear-15 {
  margin-bottom: 15px;
}

span.mandatory {
  margin-left: 5px;
  color: red;
}

label+.switch {
  margin-top: 1rem;
}

/* For the color input */
input[type='color']:not(.browser-default) {
  margin: 0px 0 8px 0;
  /** Copied from input[type=number] */
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #9e9e9e;
  border-radius: 0;
  outline: none;
  height: 3rem;
  width: 100%;
  font-size: 16px;
  padding: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-transition: border 0.3s, -webkit-box-shadow 0.3s;
  transition: border 0.3s, -webkit-box-shadow 0.3s;
  transition: box-shadow 0.3s, border 0.3s;
  transition: box-shadow 0.3s, border 0.3s, -webkit-box-shadow 0.3s;
}

/* For the options' label */
.input-field.options > label {
  top: -2.5rem;
}

/* For the code block */
.codeblock {
  margin: 1.5rem 0 2.5rem 0;
}
.codeblock > div {
  margin-bottom: 1rem;
}
.codeblock > label {
  display: inline-block;
}