Introducing: Mint UI 🎉

Finally after months (and months) of work, I'm proud to present: Mint UI!

So that was a bit anticlimactic 😅 you probably don't know what the hell I am talking about so let me show you!

Mint UI is a component library written in Mint - a programming language specifically designed for Single Page Applications.

Keep on reading, to see some of it's features - in video!

Components Galore

Mint UI has 60+ components that you can use to build your next great application (or side project 🙂).

That was just a taste, you can play around with all the components on the website.

Seamless Sizing

The size of components are completely fluid, controlled by the font-size property - em is used everywhere - so you can make them as large or as small as you want! As a bonus any children will be sized accordingly as well!

Mobile Support

Most components adapt to the screen size by using media queries, but some change based on available space.

For example the table changes into a definition list if it's width goes below a defined number.

Keyboard Support

All interactive elements besides can be interacted with with mouse and keyboard.

Light and Dark modes

Mint UI supports light and dark modes and even has a component to toggle them built in!

Themeable with CSS variables

All components can be themed with design tokens by using CSS variables.

Currently only colors can be changed but in future versions there will be all kinds of tokens (paddings, spacing, etc...).

Powered by Mint

Mint UI is written in Mint and that means that you can't use in JavaScript projects (yet) only in Mint projects, but that's a good thing! Mint as everything you need to create production ready applications.

If you are looking to learn Mint, I have a series on it here https://dev.to/gdotdesign/series/836

---

License

Mint UI is hosted on Github and its source code is public but it's licensed differently than other open source projects: it is free (even for commercial use) for individuals and small companies but a paid license is required for bigger companies (4 or more employees).

With the release there is a special 25% discount for the first 50 companies who purchase using these links:
https://gum.co/mint-ui-license/u5bjba8
https://gum.co/mint-ui/dbspk6a

---

Let me know what do you think in the comments below!

Comments

[Sergey Samokhov]

Mint looks like a great batteries-included successor to Elm.

One thing I'm not sure about from reading the docs is: can you customize things like available sizes? I mean, it's a design system, after all.

[Szikszai Gusztáv]

Hi 👋

can you customize things like available sizes?

There are no fixed sizes like in other design systems. You can make any element any size by providing a prop:

<Ui.Button 
  label="I am a double size button!" 
  size={Ui.Size::Em(2)}/>

Since every component is using em this cascades down to child components as well.

Currently there are not much design tokens other than ones for the color but in the future I'll add them for spacing, padding, border radius etc...

Let me know if you have any questions! Happy to answer them 🙂