Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/microwawe/mamba-ui
Mamba UI is a free and open-sourced UI kit with 150+ Tailwind CSS components and templates.
https://github.com/microwawe/mamba-ui
angular component component-library dark-theme mamba-ui prismjs tailwind tailwindcss template ui-kit
Last synced: 3 days ago
JSON representation
Mamba UI is a free and open-sourced UI kit with 150+ Tailwind CSS components and templates.
- Host: GitHub
- URL: https://github.com/microwawe/mamba-ui
- Owner: Microwawe
- License: mit
- Created: 2020-11-07T16:02:20.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-04-03T19:48:41.000Z (10 months ago)
- Last Synced: 2025-01-19T12:04:33.856Z (3 days ago)
- Topics: angular, component, component-library, dark-theme, mamba-ui, prismjs, tailwind, tailwindcss, template, ui-kit
- Language: HTML
- Homepage: http://mambaui.com
- Size: 21 MB
- Stars: 1,128
- Watchers: 8
- Forks: 46
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://github.com/Microwawe/mamba-ui/blob/master/LICENSE.md)
[](https://github.com/Microwawe/mamba-ui/issues)
[](https://github.com/Microwawe/mamba-ui/stargazers)
# Mamba UI
Mamba UI is a free, open-source collection of beautiful UI elements based on Tailwind CSS that make it easy for anyone to build a website in minutes. Take a look at the kit at [www.mambaui.com](https://mambaui.com).
All the components are just good ol' HTML and CSS, but without the need of writing complex css rules thanks to [Tailwind CSS](https://tailwindcss.com/). Tailwind CSS is a utility-first CSS
framework so if one of our components doesn't fit your needs just right, you can modify
them easily by following the their [documentation](https://tailwindcss.com/docs) about the different classes.
## Features
- [x] 100+ building blocks
- [x] Choose your primary color from any of the 17 different Tailwind colors
- [x] Fully responsive
- [x] Export as HTML or JSX
- [x] Dynamic light and dark themes
- [x] All the icons and illustrations are open-sourced as well
- [x] Easy to customize with Tailwind CSS
## Upcoming features
If you want to know what we have planned for the near future, you can check out [our public roadmap](https://mambaui.com/docs/roadmap).
## Installation
There is no need to download or install anything from Mamba UI. Just copy-paste the components and templates to your project and they'll work out-of-the-box without any modifications as long as you have [TailwindCSS installed](https://tailwindcss.com/docs/installation) in your project.
NOTE: ~~Tailwind CSS doesn't have all the different colors enabled in the default configuration so here are all the possible colors mapped to their respective names.~~ Tailwind CSS 3.0 has all the different colors enabled by default.
```
module.exports = {
purge: [],
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
black: colors.black,
white: colors.white,
rose: colors.rose,
pink: colors.pink,
fuchsia: colors.fuchsia,
purple: colors.purple,
violet: colors.violet,
indigo: colors.indigo,
blue: colors.blue,
lightBlue: colors.lightBlue, // Only in Tailwind CSS <=v2.1
sky: colors.sky, // As of Tailwind CSS v2.2, `lightBlue` has been renamed to `sky`
cyan: colors.cyan,
teal: colors.teal,
emerald: colors.emerald,
green: colors.green,
lime: colors.lime,
yellow: colors.yellow,
amber: colors.amber,
orange: colors.orange,
red: colors.red,
warmGray: colors.warmGray, // Tailwind CSS 2.x
trueGray: colors.trueGray, // Tailwind CSS 2.x
blueGray: colors.blueGray, // Tailwind CSS 2.x
coolGray: colors.coolGray, // Tailwind CSS 2.x
gray: colors.gray,
slate: colors.slate, // Tailwind CSS 3.x
zinc: colors.zinc, // Tailwind CSS 3.x
neutral: colors.blueGray, // Tailwind CSS 3.x
stone: colors.stone, // Tailwind CSS 3.x
},
}
};
```
## Usage
How to use the components on your own websites?
1. Find a component, section or template that you like from the [Mamba UI website](https://mambaui.com)
2. Select the primary color from the available colors
3. Select the light or dark theme
4. View the HTML, Vue or React code for that element
5. Copy/paste the code into your project
6. Profit
## Contributing
Right now this is just a hobby project for me and there aren't a lot of users (if any) so I update and maintain the project as I have spare time.
If you want to help, pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
## Development
After you clone this repository to your desktop with `git clone https://github.com/Microwawe/mamba-ui.git`, go to its root directory and run `npm install` to install its dependencies.
Once the dependencies are installed, you can run `ng serve` to start the application. You will then be able to access it at `localhost:4200`
## License
[MIT](https://choosealicense.com/licenses/mit/)