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.

All the components are just good ol' HTML and CSS, but without the need of writing complex css rules thanks to Tailwind CSS. 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 about the different classes.

Features

• 100+ building blocks
• Choose your primary color from any of the 17 different Tailwind colors
• Fully responsive
• Export as HTML or JSX
• Dynamic light and dark themes
• All the icons and illustrations are open-sourced as well
• 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.

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 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
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