Original Materialize
The original library brings Material Design to the web through a responsive grid, forms, cards, navigation, and interactive components.
Explore materializecss.com
Kmaterialize
Simple. Built on open source. The responsive front-end library based on Material Design from Google.
More ways to build with Materialize
Kmaterialize builds on the familiar Materialize foundation with template editors, spreadsheet reports, workflow components, and themed integrations. Explore the shared foundations, then try the live examples and APIs documented here.
Materialize Web
The community continuation develops the shared component foundation with vanilla JavaScript, TypeScript, and Material Design guidance.
Explore materializeweb.comKmaterialize
This project extends that foundation with editing workspaces, workflow components, expanded controls, themed integrations, and practical customization guides.
Start buildingBuild templates with live previews
Write HTML and Handlebars with Prism syntax highlighting. Drag nested data tokens into the code, see where they will land, and combine them with custom helper functions while the page preview updates.
Generate rows, download reports
Name your columns, then map each value using tokens and functions. Generate one kspreadsheet row per data item, preserve numbers and booleans, and download CSV or XLSX files with headers.
Reuse templates and connect data
Choose templates and data with searchable Tom Select controls, or load both from your backend. Each template keeps its edits and undo history; Ctrl/Cmd+Z and redo work across typing and token insertions.
Teams and task boards
Arrange people and groups on an organization chart, edit curved connections, and pan or zoom through large charts. Organize tasks in Kanban columns, with touch-friendly drag handles for moving cards on smaller screens.
Editable data, familiar controls
Use kspreadsheet with frozen columns, dropdowns, dates, and checkboxes. Keep its original grid colors or choose the Material variant, with themed editor and context menus.
Buttons, toolbars, and lists
Explore split buttons, connected groups, FAB menus, and flat toolbar actions. Add nested zoom controls with a percentage reset, build segmented lists with optional checklist progress, and use labeled or vertical dividers.
Layouts for application screens
Try documentation-style side navigation and a compact navigation rail. Use tabs that fill their container, with navigation positioned above or below the content.
A palette for any scope
Generate Material colors from a source color. Apply a theme to the whole page, a card, or a section, with live examples for light and dark modes and matching text colors.
Helpful feedback, consistent styling
Add animated Tippy tooltips, SweetAlert2 popups, alerts, and logo loading indicators. Each documentation page includes examples and the setup needed to use it.
bolt
Ultra Fast
Using VanillaJS and as less dependecies as possible to keep it fast and simple. We use TypeScript since it builds upon JavaScript and it enhances the type- and code safety.
integration_instructions
Quick integration
You dont have to learn or integrate any new or crappy stuff. Goal here is to stick to the roots. Just copy and paste from the documentation and you are good to go!
devices
Responsive and accessible
Most of the Features which work event without JavaScript. Components should be useable by mobile devices and easily accessible by keyboard too. Try it out!
design_services
Simple and clean Design
User centric approach with established design principles mainly from Googles Material guidelines. Our Components should work on nearly every device with a monitor.
groups
Awesome Community
User centric approach with many members all around the world, which help bring Kmaterialize forward and improve usability for everyone on the web. You can be a part too!
extension
Extensible
Component cutsomization should be possible by yourself. To help growing this project, you can join the community and ask for support or you can easily create an issue to move Kmaterialize forward.