merakiui/merakiui

Tailwind CSS components that support RTL languages & fully responsive based on Flexbox & CSS Grid with elegant Dark Mode 🚀 ☄️.

Meraki UI

🎉 🚀 Free Tailwind CSS Components That Support RTL Languages & Fully Responsive Based On Flexbox & CSS Grid with elegant Dark Mode.

Resources

• Tailwind CSS
• Unsplash
• Freepik Stories
• AlpineJS
• Heroicons
• Coolicons

Credits

• Mosab Ibrahim
• Khatab Wedaa
• All Contributors

License

The MIT License (MIT). Please see License File for more information.

merakiui's Issues

Broken Link on Resources Page

Hey thanks for your awesome work.
On your Page:

merakiui/pages/resources.vue

Line 13 in 7fba81a

<a href="/components" target="_blank" class="text-blue-500 hover:underline">Meraki UI Components</a>

the link is broken and refers to "/components", which probably should refers to "/#main"
Cheers

merakiui.com is not responding.

Is merakiui.com is down for any reason?
last few days I actually visited but it's not working.

Update to Tailwindcss V2

When the global dark-mode is on the components dark-mode switcher doesn't work.

Upgrade to Vue 3

• Add vue 3 support
• Update all external libraries

Is the project alive ?

Why dont't we filter the row code from vue component ?

RFC

Instead of declaring repetitively, why dont't we filter the row code from vue component ?

Remove the repetitive code

SuccessPop.vue #L27

<script>
    export default {
        data() {
            return {
                name: 'Success Pop',
-                code: `
-        <div class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden">
-            <div class="flex justify-center items-center w-12 bg-green-500">
-                <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM16.6667 28.3333L8.33337 20L10.6834 17.65L16.6667 23.6166L29.3167 10.9666L31.6667 13.3333L16.6667 28.3333Z"/>
-               </svg>
-            </div>
            
-            <div class="-mx-3 py-2 px-4">
-               <div class="mx-3">
-                    <span class="text-green-500 font-semibold">Success</span>
-                    <p class="text-gray-600 text-sm">Your account was registered!</p>
-               </div>
-            </div>
-        </div>
-            `,
            }
        }
    }
</script>

Filter code from component file

Inspired by Turkyden/image-hover

const requireEffect = require.context('../effects', false, /\.vue$/);
const effectList = requireEffect.keys();

const effects = {};
const components = {};

for (const filename of effectList) {
  const name = filename.replace('./', '').replace('.vue', '');
  const type = name.substring(0, name.indexOf('-'));
  const raw = require(`!!raw-loader!@/effects/${name}`).default;
  const component = requireEffect(filename).default;

  const html = /<template>(.*?)<\/template>/g // find html between template tags
    .exec(JSON.stringify(raw))[0]
    .replace(/<\/?template>/g, '') // remove template tags
    .replace(/^\\n/, '') // remove leading linebreak
    .replace(/\\n/g, '\n') // replace escape characters
    .replace(/\\"/g, '"')
    .replace(/^\\r/, '')
    .replace(/\\r/g, '\r');

  const css = /<style scoped>(.*?)<\/style>/g // find css between style tags
    .exec(JSON.stringify(raw))[0]
    .replace(/<\/?style(?: scoped)?>/g, '') // remove style tags
    .replace(/^\\n/, '') // remove leading linebreak
    .replace(/\\n/g, '\n') // replace escape characters
    .replace(/\\"/g, '"')
    .replace(/^\\r/, '')
    .replace(/\\r/g, '\r');

  effects[name] = { name, type, html, css };
  components[name] = component;
}

export { effects, components };

Usage

import { components, effects } from "@/assets/effects.js";

devDependencies

"raw-loader": "^4.0.1",

Are you familiar with the 0BSD license?

Not long ago I worked with GitHub to add a new license which is perfect for projects where others are encouraged to copy-paste code—it's called the BSD Zero Clause. If you haven't yet, please consider it as it contains no requirement to carry the license when the code is copied whereas the MIT license does.

Keep up the great work!

simple pop when the user copy code

when the user click copy button get simple pop tell him the code is copied

Add RTL button

Adding a way to check the rtl version of the component(it will be great if it displayed in Arabic)

Support theme

WHAT

• Support theme as https://mertjf.github.io/tailblocks/

WHY

• Easy to migrate or integrate with different color

HOW

• TBD

Mobile menu doesn't expand collapse on clicking

I copied the code from Headers > Ecommerce one and pasted in CodePen. Added a reference to TailwindCSS, but when I resize the window to see the menu menu, the mobile menu is expanded by default and doesn't collapse/expand on clicking. Do I need some additional JS to make that work? If so, can that be included in the code available?

alpinejs in component or not

Hi there,

Just asking whether the AlpineJS interaction is included also?

Thanks
Eric Xin

Storage dark mood variable in browser

Question about usage

Hey there,
I have a question about the general usage: So far, I have only used Tailwind CSS from CDN without setting up a build with CLI or similar.
Since I wanted to give MerakiUI a go, I installed nodeJS on my Windows 10 PC and run the commands from the readme:
npm install npm run dev

In which folder/path is my index.html file now so I can get down to coding and using the MerakiUI snippets?
Or do I need to create an index.html file myself?
http://localhost:3000 (where npm hot-reloads for development) just shows a clone of the MerakiUI website but as localhost.

Re-phrasing: If I want to build a website using MerakiUI components do I actually need to clone&build this GitHub repo, or can I just setup a directy with a .html and .css file and import TailwindCSS via CDN and MerakiUI components will just work by default?
If I need to clone this repo and build it with npm to use MerakiUI components, where is the public facing folder in which I would have to create my index.html file?

Kind regards

closing tag missing

Forms section Newsletter component, missing closing tag for input

all navbars except simple have a horizontal overflow when on mobile screen and the direction is RTL

all Navbars except simple have a horizontal overflow when on mobile screen and the direction is RTL + categories Navbar menu button is visible on lg

mobile toggle dont working and always open

ok i found. sorry. delete pls

Finishing up the search and the categories links

Fixing code duplication on the components

is merakiui.com down?

i was opening merakiui.com today and i am getting this error today.

Blank site

The homepage is blank

Ask about section, Product with Side Link

Hi.
First, thank you for this wonderful UI so I can make a website faster with tailwindcss.
I want to ask about Product with Side Link, when I click the button the product not move to another category?
Wish you can make the js script with alpinejs too for that.
And I hope you can make more components with the latest tailwindcss 3.1.
Once again thank you very much and sorry for my bad English.

Prettier as git hook

Hey @Miaababikir any specific reason for this workflow: https://github.com/merakiui/merakiui/blob/master/.github/workflows/format_prettier.yml ?

As far as I understood it is there to format the code only, right? If so, how about using git hooks to do so and the workflow just to actually check if the code has been formatted (could be useful for tests as well)?

This way, every time you commit it will fire Prettier and every time a PR is opened the lint check will be fired.

Make component frame resizale

The idea is to build a resizable frame to see how components are like in the different screen size

Example