Introducing Yumma UI

#ui #uidesign #webcomponents #yummacss

We've been hinting at it for a while, but today, we're finally introducing Yumma UI! A set of React components built on top of Yumma CSS and Base UI.

What's in the box?

You can check the components section to learn more about the available components, but anyway, here it is a list of the current components:

import { 
    Alert, 
    Avatar, 
    Badge, 
    Button, 
    Card, 
    Checkbox, 
    Input, 
    Radio, 
    Select, 
    Tabs 
} from "@yummacss/ui";

Typescript support

If you use Typescript, you can import the types from @yummacss/ui. You can also trigger intellisense for the props of each component in any code editor that supports it.

import type { ButtonProps } from "@yummacss/ui";

Tree shaking

All components in @yummacss/ui are tree-shakeable. It's kinda like the same principle as Yumma CSS, meaning you only ship the code you actually use.

import { Button } from "@yummacss/ui";
import { Button, Card, Input } from "@yummacss/ui";

Getting started

Yumma UI is available as a package on npm. You can install it using your favorite package manager:

Install Yumma UI
```
npm install @yummacss/ui
```

Import styles

Import the Yumma UI styles in your project.

import "@yummacss/ui/styles.css";
import "./globals.css";

Import components

That's pretty much it.

import { Button } from "@yummacss/ui";

export default function App() {
    return <Button variant="base">Login</Button>;
}

What's next?

This 0.1.0 release is just the beginning. It's very likely that we'll add 10 more components for each minor release, but we're also open to community feedback. So, if you have any ideas, please open an issue or send us a tweet.

More components: Combobox, Toast, Tooltip, Menubar, and much more
Theming component: Customize colors, typography, radii, and other design choices
Framework support: Support for other frameworks like Astro
And much more...

Closing thoughts

We can't wait to see what you build with Yumma UI! Remember, this is our first release and is currently only meant for React frameworks, but we're working on support for others.

DEV Community