Reveal

import { Reveal } from "@grassroot/ui-react";
 
<Reveal>
  <div className="rounded-xs border bg-card px-4 py-3">
    Slides in once scrolled into view.
  </div>
</Reveal>

<script setup lang="ts">
import { Reveal } from "@grassroot/ui-vue";
</script>
 
<template>
  <Reveal
 
  >
    <div className="rounded-xs border bg-card px-4 py-3">
      Slides in once scrolled into view.
    </div>
  </Reveal>
</template>

import { Component } from "@angular/core";
import { GrassrootReveal } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootReveal],
  template: `
    <grassroot-reveal
 
    >
      <div className="rounded-xs border bg-card px-4 py-3">
        Slides in once scrolled into view.
      </div>
    </grassroot-reveal>
  `,
})
export class ExampleComponent {
}

<script lang="ts">
  import { Reveal } from "@grassroot/ui-svelte";
</script>
 
<Reveal
 
>
  <div className="rounded-xs border bg-card px-4 py-3">
    Slides in once scrolled into view.
  </div>
</Reveal>

import { Reveal } from "@grassroot/ui-solid";
 
export function Example() {
  return (
    <>
      <Reveal
 
      >
        <div className="rounded-xs border bg-card px-4 py-3">
          Slides in once scrolled into view.
        </div>
      </Reveal>
    </>
  );
}