Framework Examples

See how to annotate patterns and components in different frameworks.

React #

In React components, use standard JavaScript comments:

UserProfile.tsx

// uipool-pattern: user-profile
// uipool-component: avatar
export function UserProfile({ user }) {
  return (
    <div className="profile">
      <Avatar src={user.avatar} />
      <h1>{user.name}</h1>
    </div>
  );
}

Vue #

In Vue single-file components, you can use comments in both template and script sections:

Dashboard.vue

<template>
  <!-- uipool-pattern: dashboard -->
  <div class="dashboard">
    <!-- uipool-component: stats-widget -->
    <StatsWidget :data="stats" />
  </div>
</template>

<script setup>
// uipool-pattern: dashboard
import StatsWidget from "./StatsWidget.vue";
</script>

Angular #

In Angular templates, use HTML comments:

user-list.component.html

<!-- uipool-pattern: user-list -->
<div class="user-list">
  <!-- uipool-component: user-card -->
  <app-user-card *ngFor="let user of users" [user]="user" />
</div>

Svelte #

In Svelte components:

ProductCard.svelte

<!-- uipool-pattern: product-card -->
<script>
  // uipool-component: price-tag
  import PriceTag from './PriceTag.svelte';
  export let product;
</script>

<div class="product-card">
  <img src={product.image} alt={product.name} />
  <PriceTag price={product.price} />
</div>

Next.js #

Next.js pages and components work just like React:

app/checkout/page.tsx

// uipool-pattern: checkout-flow
export default function CheckoutPage() {
  return (
    <main>
      {/* uipool-component: cart-summary */}
      <CartSummary />
      
      {/* uipool-component: payment-form */}
      <PaymentForm />
    </main>
  );
}

Nuxt #

Nuxt pages and components work just like Vue:

pages/settings.vue

<template>
  <!-- uipool-pattern: settings-page -->
  <div class="settings">
    <!-- uipool-component: settings-form -->
    <SettingsForm :user="user" />
  </div>
</template>

<script setup>
// uipool-pattern: settings-page
const user = useUser();
</script>