Examples

To use augmented-ui, let’s create a div element. Notice the augmented-ui property attached to the element. These are meant to define the styling for the element.

<div class=”demo” augmented-ui=”tl-clip br-clip exe”></div>

Let’s give the div height and add some padding.

Notice the CSS variables we’re using here. The variables are provided by the augmented-ui library and are the core way of styling elements.

We should see the following appear on the screen:

Pretty neat. Let’s add a gradient border. Add the following styles to the element.

--aug-border-bg: linear-gradient(red, transparent), linear-gradient(to right, blue, transparent), black;

Here’s what we should see:

As you can see, it’s simple to build augmented style components with the library. I’m a big fan of cyberpunk, so I’m naturally excited to see what you can build with the library.