Sticker

import { Sticker } from "@grassroot/ui-react";
 
<Sticker tone="accent" rotate={-3}>What I build</Sticker>
<Sticker tone="neutral" rotate={2}>Boring tech</Sticker>
<Sticker tone="success" rotate={-1}>It just runs</Sticker>

<script setup lang="ts">
import { Sticker } from "@grassroot/ui-vue";
</script>
 
<template>
  <Sticker tone="accent" :rotate="-3">What I build</Sticker>
  <Sticker tone="neutral" :rotate="2">Boring tech</Sticker>
  <Sticker tone="success" :rotate="-1">It just runs</Sticker>
</template>

import { Component } from "@angular/core";
import { GrassrootSticker } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootSticker],
  template: `
    <grassroot-sticker tone="accent" [rotate]="-3">What I build</grassroot-sticker>
    <grassroot-sticker tone="neutral" [rotate]="2">Boring tech</grassroot-sticker>
    <grassroot-sticker tone="success" [rotate]="-1">It just runs</grassroot-sticker>
  `,
})
export class ExampleComponent {
}

<script lang="ts">
  import { Sticker } from "@grassroot/ui-svelte";
</script>
 
<Sticker tone="accent" rotate={-3}>What I build</Sticker>
<Sticker tone="neutral" rotate={2}>Boring tech</Sticker>
<Sticker tone="success" rotate={-1}>It just runs</Sticker>

import { Sticker } from "@grassroot/ui-solid";
 
export function Example() {
  return (
    <>
      <Sticker tone="accent" rotate={-3}>What I build</Sticker>
      <Sticker tone="neutral" rotate={2}>Boring tech</Sticker>
      <Sticker tone="success" rotate={-1}>It just runs</Sticker>
    </>
  );
}