Introducing Yumma UI

Why Yumma UI?

Yumma UI is a significant step forward for modern React apps. It's a set of accessible and mature React components built on top of Yumma CSS. With its foundation on top of Base UI.

It's also first component library built on top of Yumma CSS, and we're so happy to finally introduce it to the world. We hope you enjoy using it as much as we do! We're also excited to see what you build with it.

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:

1. 1

   Install Yumma UI

   pnpm add @yummacss/ui

2. 2

   Import styles

   Import the Yumma UI styles in your project.

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

3. 3

   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.