{"id":13440082,"url":"https://github.com/mdbootstrap/mdb-vue-ui-kit","last_synced_at":"2025-05-15T02:09:26.235Z","repository":{"id":44439980,"uuid":"111784243","full_name":"mdbootstrap/mdb-vue-ui-kit","owner":"mdbootstrap","description":"Vue 3 \u0026 Bootstrap 5 \u0026 Material Design 2.0 UI KIT","archived":false,"fork":false,"pushed_at":"2024-09-16T07:23:30.000Z","size":20234,"stargazers_count":964,"open_issues_count":0,"forks_count":190,"subscribers_count":28,"default_branch":"master","last_synced_at":"2025-05-05T20:04:11.572Z","etag":null,"topics":["bootstrap","bootstrap5","material-design","uikit","vue"],"latest_commit_sha":null,"homepage":"https://mdbootstrap.com/docs/b5/vue/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mdbootstrap.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-23T08:38:21.000Z","updated_at":"2025-05-02T23:41:39.000Z","dependencies_parsed_at":"2024-06-06T14:31:32.613Z","dependency_job_id":"bff1de54-e3ec-4028-ab96-5c3b52fed152","html_url":"https://github.com/mdbootstrap/mdb-vue-ui-kit","commit_stats":{"total_commits":140,"total_committers":18,"mean_commits":7.777777777777778,"dds":0.8142857142857143,"last_synced_commit":"89ee40ecbd55fb3c3fa878b193cb5bf6543d230d"},"previous_names":["mdbootstrap/vue-bootstrap-with-material-design"],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Fmdb-vue-ui-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Fmdb-vue-ui-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Fmdb-vue-ui-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Fmdb-vue-ui-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mdbootstrap","download_url":"https://codeload.github.com/mdbootstrap/mdb-vue-ui-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253685217,"owners_count":21947306,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","bootstrap5","material-design","uikit","vue"],"created_at":"2024-07-31T03:01:19.629Z","updated_at":"2025-05-15T02:09:26.215Z","avatar_url":"https://github.com/mdbootstrap.png","language":"SCSS","funding_links":[],"categories":["HarmonyOS"],"sub_categories":["Windows Manager"],"readme":"Bootstrap 5 \u0026 Vue 3 UI KIT - 700+ components, MIT license, simple installation.\n\nMDB is a collection of free Bootstrap templates, themes, design tools \u0026 resources.\n\n---\n\n# Get started\n\n### [\u003e\u003e Get Started in 1 minute](https://mdbootstrap.com/docs/b5/vue/getting-started/installation/)\nSimple installation via .zip, npm or cdnjs.\n \n### [\u003e\u003e Install with MDBGO](https://mdbgo.com/) \n Free Hosting, WordPress support, custom domains, SSL support, free database, frontend \u0026 backend templates, webpack starter included, git repostiory, FTP \u0026 jenkins support.\n \n### [\u003e\u003e Install with MDBGO + e-commerce shop integration](https://mdbgo.com/wordpress-shop/)\nOne click setup! MDB GO allows you to create a WordPress page with a single click.\nRegardless whether you want to create a Travel Blog or an e-commerce shop to sell your product you can easily do that. You can even combine both into single page.\n\n\n## About Material Design for Bootstrap 5 \u0026 Vue 3\n\n\u003cp\u003eCreated by \u003ca href=\"https://mdbootstrap.com\"\u003e\u003cimg height=\"30\" src=\"https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-vue-r.png\"\u003e\u003c/a\u003e  \n\u003ca href=\"https://npmcharts.com/compare/mdbvue?minimal=true\"\u003e \u003cimg src=\"https://img.shields.io/npm/dm/mdbootstrap.svg?label=NPM%20Downloads\" alt=\"Downloads\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/mdbootstrap/mdb-vue-ui-kit/blob/master/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-green.svg\" alt=\"License\"\u003e\u003c/a\u003e\n\u003ca href=\"https://x.com/intent/post?text=Thanks+%40mdbootstrap+for+creating+amazing+and+free+Material+Design+for+Bootstrap+5+UI+KIT+https%3A%2F%2Fmdbootstrap.com%2Fdocs%2Fjquery%2F\u0026hashtags=javascript%2Ccode%2Cwebdesign%2Cbootstrap\"\u003e\u003cimg src=\"https://img.shields.io/twitter/url/http/shields.io.svg?style=social\u0026label=Let%20us%20know%20you%20were%20here%21\u0026\"\u003e\u003c/a\u003e\n\u003ca href=\"https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/\"\u003e\n  \u003cimg src=\"https://img.shields.io/static/v1?label=MDBootstrap\u0026message=Tutorial\u0026labelColor=007bff\u0026color=ffffff\u0026logoColor=007bff\u0026textColor=000000\" alt=\"MDBootstrap tutorial\"\u003e\n\u003c/a\u003e\u003c/p\u003e\n\nTrusted by \u003cb\u003e3 000 000+\u003c/b\u003e developers \u0026 designers. Used by companies \u0026 institutions like\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003cimg width=\"300\" src=\"https://mdbootstrap.com/img/logo/brands/nasa.png\"\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/nike.png\"\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/amazon.png\"\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/sony.png\"\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/samsung.png\"\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/airbus.png\"\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/yahoo.png\"\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/deloitte.png\"\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/ge.png\"\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/kpmg.png\"\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/unity.png\"\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/ikea.png\"\u003e\n      \u003ctd\u003e\u003cimg src=\"https://mdbootstrap.com/img/logo/brands/aegon.png\"\u003e\n    \u003c/tr\u003e\n   \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n          \u003ca href=\"https://mdbootstrap.com/docs/b5/vue/\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n          \t\t\u003cimg src=\"https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/vue/about/assets/mdb5-vue.jpg\"\u003e\n          \u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003cul\u003e\n        \u003cli\u003e\u003cb\u003e\u003ca href=\"https://mdbootstrap.com/docs/b5/vue/\"\u003e700+ UI components\u003c/a\u003e\u003c/b\u003e\u003c/li\u003e          \n         \u003cli\u003eSuper simple, 1 minute installation\u003c/li\u003e\n         \u003cli\u003eDetailed docs \u0026 practical examples\u003c/li\u003e\n         \u003cli\u003eLots of tutorials\u003c/li\u003e\n         \u003cli\u003eHuge and active community\u003c/li\u003e\n         \u003cli\u003e\u003cb\u003eMIT license - free for personal \u0026 commercial use\u003c/b\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n   \u003c/tbody\u003e\n\u003c/table\u003e\n\n___\n\n# Bootstrap 5 tutorial\n\n**[\u003e\u003e Learn more about Bootstrap 5](https://mdbootstrap.com/docs/standard/)**\n\n\n**[\u003e\u003e Bootstrap 5 Tutorial](https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/)**\n\n**[\u003e\u003e Subscribe to our YouTube channel with dozens of Bootstrap tutorials](https://www.youtube.com/c/Mdbootstrap)**\n\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\n         \u003ca href=\"https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/\" alt=\"Bootstrap Tutorials\" rel=\"dofollow\"\u003e\n          \t\t\u003cimg src=\"https://mdbootstrap.com/wp-content/uploads/2020/12/learnmore-1.png\"\u003e\n          \u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n          \u003ca href=\"https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/#section-beginner\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n          \t\t\u003cimg src=\"https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/assets/featured-image.png\"\u003e\n          \u003c/a\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n     \u003ctr\u003e\n        \u003ctd align=\"center\"\u003e\n          \u003cp align=\"center\"\u003e\u003cb\u003eStart learning from Basics\u003c/b\u003e\u003c/p\u003e\n          \u003ca href=\"https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n          \t\t\u003cimg src=\"https://mdbootstrap.com/wp-content/uploads/2020/12/Screenshot_26.png\"\u003e\n          \u003c/a\u003e\n         \u003c/td\u003e\n        \u003ctd align=\"center\"\u003e\n          \u003cp align=\"center\"\u003e\u003cb\u003eLearn Bootstrap 5 | Crash Course for Beginners in 1.5H\u003c/b\u003e\u003c/p\u003e\n          \u003ca href=\"https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/#section-beginner\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n          \t\t\u003cimg src=\"https://mdbootstrap.com/wp-content/uploads/2020/12/Screenshot_26.png\"\u003e\n          \u003c/a\u003e\n         \u003c/td\u003e\n      \u003c/tr\u003e\n   \u003c/tbody\u003e\n\u003c/table\u003e\n\n---\n\n# Demo\n\n#### Simplicity and ease of use are key features of MDB 5 Vue UI Kit. You need only one minute to install and run it.\n\n### Buttons\n\n\u003cp\u003eUse MDB custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.\u003c/p\u003e\n\n\u003ca href=\"https://mdbootstrap.com/docs/b5/vue/components/buttons/\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://mdbootstrap.com/img/Marketing/campaigns/demo-buttons.gif\"\u003e\n  \u003c/p\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://mdbootstrap.com/docs/b5/vue/components/buttons/\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://mdbootstrap.com/img/Marketing/campaigns/demo-social-buttons.png\"\u003e\n  \u003c/p\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://mdbootstrap.com/docs/b5/vue/components/buttons/\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://mdbootstrap.com/img/Marketing/campaigns/demo-buttons2.png\"\u003e\n  \u003c/p\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://mdbootstrap.com/docs/b5/vue/components/buttons/\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://mdbootstrap.com/img/Marketing/campaigns/demo-buttons-outline.gif\"\u003e\n  \u003c/p\u003e\n\u003c/a\u003e\n\n### Spinners\n\n\u003cp\u003eIndicate the loading state of a component or page with MDB spinners, built entirely with HTML, CSS, and no JavaScript.\u003c/p\u003e\n\n\u003ca href=\"https://mdbootstrap.com/docs/b5/vue/components/spinners/\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://mdbootstrap.com/img/Marketing/campaigns/demo-loader.gif\"\u003e\n  \u003c/p\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://mdbootstrap.com/docs/b5/vue/components/spinners/\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://mdbootstrap.com/img/Marketing/campaigns/demo-color-spinners.gif\"\u003e\n  \u003c/p\u003e\n\u003c/a\u003e\n\n### Cards\n\n\u003cp\u003eA card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.\u003c/p\u003e\n\n\u003ca href=\"https://mdbootstrap.com/docs/b5/vue/components/cards/\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://mdbootstrap.com/img/Marketing/campaigns/demo-cards.png\"\u003e\n  \u003c/p\u003e\n\u003c/a\u003e\n\n### Footer\n\n\u003cp\u003eA footer is an additional navigation component. It can hold links, buttons, company info, copyrights, forms, and many other elements.\u003c/p\u003e\n\n\u003ca href=\"https://mdbootstrap.com/docs/b5/vue/navigation/footer/\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://mdbootstrap.com/img/Marketing/campaigns/demo-footer.png\"\u003e\n  \u003c/p\u003e\n\u003c/a\u003e\n\n### Hover\n\n\u003cp\u003eMDB hover effect appears when the user positions the computer cursor over an element without activating it. Hover effects make a website more interactive.\u003c/p\u003e\n\n\u003ca href=\"https://mdbootstrap.com/docs/b5/vue/content-styles/hover-effects/\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://mdbootstrap.com/img/Marketing/campaigns/demo-hover.gif\"\u003e\n  \u003c/p\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://mdbootstrap.com/docs/b5/vue/content-styles/hover-effects/\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://mdbootstrap.com/img/Marketing/campaigns/demo-hover2.png\"\u003e\n  \u003c/p\u003e\n\u003c/a\u003e\n\n### Notes\n\n\u003cp\u003eNotes are small components very helpful in inserting an additional piece of information.\u003c/p\u003e\n\n\u003ca href=\"https://mdbootstrap.com/docs/b5/vue/content-styles/typography/\" alt=\"Bootstrap 5\" rel=\"dofollow\"\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://mdbootstrap.com/img/Marketing/campaigns/demo-alerts.png\"\u003e\n  \u003c/p\u003e\n\u003c/a\u003e\n\n\u003c/table\u003e\n\n___\n\n# Extended documentation\n\n\u003cul\u003e\n\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/vue/extended/code/\"\u003eBootstrap Vue Code Blocks\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/vue/extended/gallery/\"\u003eBootstrap Vue Gallery\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/vue/extended/hamburger-menu/\"\u003eBootstrap Vue Hamburger Menu\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/vue/extended/jumbotron/\"\u003eBootstrap Vue Jumbotron\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/vue/extended/maps/\"\u003eBootstrap Vue Maps\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/vue/extended/media-object/\"\u003eBootstrap Vue Media Object\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/vue/extended/mega-menu/\"\u003eBootstrap Vue Mega Menu\u003c/a\u003e\u003c/li\u003e \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/vue/extended/multiselect/\"\u003eBootstrap Vue Multiselect\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/vue/extended/social-media/\"\u003eBootstrap Vue Social Media Icons \u0026 Buttons\u003c/a\u003e\u003c/li\u003e    \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/vue/extended/textarea/\"\u003eBootstrap Vue Textarea\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/vue/extended/table-search/\"\u003eBootstrap Vue Table Search\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/vue/extended/table-scroll/\"\u003eBootstrap Vue Table Scroll\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/vue/extended/table-responsive/\"\u003eBootstrap Vue Table Responsive\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/vue/extended/table-sort/\"\u003eBootstrap Vue Table Sort\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/vue/extended/panels/\"\u003eBootstrap Vue Panels\u003c/a\u003e\u003c/li\u003e \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/vue/extended/masonry/\"\u003eBootstrap Vue Masonry\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/vue/extended/contact/\"\u003eBootstrap Vue Contact\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/vue/extended/gradients/\"\u003eBootstrap Vue Gradients\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/vue/extended/pagination/\"\u003eBootstrap Vue Pagination\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/vue/extended/search/\"\u003eBootstrap Vue Search\u003c/a\u003e\u003c/li\u003e  \n\n\u003c/ul\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdbootstrap%2Fmdb-vue-ui-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmdbootstrap%2Fmdb-vue-ui-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdbootstrap%2Fmdb-vue-ui-kit/lists"}