SatoriUI

Logo cloud

A strip of four proof points, each a muted icon, a name and one line, split by hairline dividers: backs the page up without competing with it.

  • Lightning Fast

    Blazing fast edge performance.

  • Secure by Design

    Security by design, zero config.

  • Real-time Sync

    Real-time sync across devices.

  • Global Scale

    Instant global deployment.

Installation

  1. 1. Install a design system if the project does not have one yet: Cueit, Skita or Folio.

  2. 2. Add the block. It installs to components/satori-ui/blocks/ with the shadcn/ui primitives it uses.

    npx shadcn@latest add @satoriui/logo-cloud-01

  3. 3. Render it inside the system's scope. With the scope class on <html> there is nothing more to do. To try another system, change the class.

    app/page.tsx
    import { LogoCloud01 } from "@/components/satori-ui/blocks/logo-cloud-01";
    export default function Page() {
      return <LogoCloud01 />;
    }

How it adapts

For what shadcn has no name for, it uses 2 of the shared contract utilities. Every system defines them identically and sets the variables they read.

ds-text
Body copy
ds-small
Secondary copy
Next blockFeatures