I created a new framework for React, and I'd love to know what you think about it 😀

Yes, yes, I know, yet another JS framework 😅

So what is it about? Well, first, it's a UI framework for React and React only.

And it's a CSS-IN-JS framework, much like MUI or Chakra UI for example.

So after a year of hard work, I'm happy to announce the release of Soperio UI and Valerya UI (wait, what? two frameworks? Well... yes 😅)

The story

Who cares? Right? Show us what it can do!

Alright... Here we go!

(you can still ready the story on the website if you're interested...)

So what does it do?

The main idea is to add CSSish properties to any HTML or React component.

So you can do something like this:

<div 
    bgColor="slate-100" 
    w="full"
    p="8"
    dflex
    flexRow
    placeContent="center"
>
    <div
        bgColor="white"
        rounded
        w="80"
        shadow
    >
        <img 
            src="/images/landscape.jpg" 
            w="full"
            h="40"
            objectFit="cover"
            roundedT
            alt="landscape"
        />
        <div
            py="4"
            px="5"
            fontWeight="400"
            textColor="slate-700"
        >
            <div 
                dflex
                flexRow
                flexWrap
                spaceX="2"
                mb="2"
            >
                <span rounded px="2" textColor="white" bgColor="blue-500">React</span>
                <span rounded px="2" textColor="white" bgColor="emerald-500">CSS-IN-JS</span>
                <span rounded px="2" textColor="white" bgColor="pink-500">UI</span>
            </div>

            <p>
                This is a sample card designed with <span textColor="sky-500" fontWeight="500">Soperio</span>. You can see that I'm applying design props <span fontWeight="500" textDecoration="underline">directly on the HTML tags</span>. 
            </p>

            <p mt="2">
                Properties like margin top, horizontal and vertical padding, flex box, rounded corners, width, height, font weight, shadow, text decoration, text and background color are easily defined without the need to write silly CSS.
            </p>
        </div>
     </div>
</div>

This will create a card like this:

Now, this is an example of what you can do with Soperio. It would have been better, of course, to use components like Card and others to create this. But again, this is an example.

As you can see, I can freely add properties like px (horizontal padding), textColor, rounded (border-radius), w (width), mt (margin-top) and others to directly style my html tags without the need to use the style property or to apply any CSS class names.

But you can also do the same with any component:

import { SoperioComponent, ParentComponent } from "@soperio/react"

// A very simple component
function MyCustomComponent( { children, ...props } : SoperioComponent & ParentComponent)
{
    return (
        <div {...props}>
            {children}
        </div>
    )
}


// Now you can use your custom component like this
<MyCustomComponent 
    px="3" 
    bgColor="sky-500" 
    textColor="white"
>   
    Easily work with custom components
</MyCustomComponent>

Now, styling components becomes much easier!

Theme values

You might have also noticed from the code earlier than I'm not using units such as px, em, pt, or even hexadecimal colors.

That's because the values from the example comes from a configuration theme file.

This theme, as well as the properties, have mostly been inspired by TailwindCSS. So if you're familiar with Tailwind, you should not be too surprised here.

It doesn't mean that you can't use a custom value like 24px or #FF0000 though. Soperio is flexible enough to let you do what you want.

Modern features

Soperio supports modern features like dark mode, RTL, theming, and responsive design.

And more

There's more to Soperio than this quick blog post can describe.

I invite you to check out the documentation at https://soperio-ui.com for more information.

Note that Soperio does not ship with any components (like buttons, cards, modals, avatars, etc...). That's why I created a separated framework, Valerya UI, that is built on top of Soperio.

Let me know what you think about Soperio! 😉