Building Blocks for AI User Interfaces

Clean, modern, and advanced AI building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever.

A complex component showing hooks, libs and components.
complex-component
Files
app/pokemon/page.tsx
import { cache } from 'react';

import { PokemonCard } from '@/components/pokemon-card';
import { getPokemonList } from '@/lib/pokemon';

const getCachedPokemonList = cache(getPokemonList);

export default async function Page() {
  const pokemons = await getCachedPokemonList({ limit: 12 });

  if (!pokemons) {
    return null;
  }

  return (
    <div className="mx-auto w-full max-w-2xl px-4">
      <div className="grid grid-cols-2 gap-4 py-10 sm:grid-cols-3 md:grid-cols-4">
        {pokemons.results.map((p) => (
          <PokemonCard key={p.name} name={p.name} />
        ))}
      </div>
    </div>
  );
}