Skip to Content
We're rolling out the first batch of Game UIs right now, and it might take a few days to fully wrap up. If you're already testing the UI comps, we'd love to hear any feedback you've got! 🙏

Base Grid Usage

import { h } from "preact" import { Grid, GridCol } from "@/comps/echo/grid" import { Skeleton } from "@/comps/echo/core" function makeChild(cls: string) { return ({ text }: { text: string }) => ( <Skeleton class={`w-full bold ${cls}`} height={50} radius={6} animate={false} >{text}</Skeleton> ) } const Child1 = makeChild("bg-blue-200 text-blue-500") const Child2 = makeChild("bg-green-200 text-green-500") const Child3 = makeChild("bg-red-200 text-red-500") const Child4 = makeChild("bg-orange-200 text-orange-500") export function GridDemo() { return <Grid class="w-[360px]"> <GridCol span={{ base: 12, xs: 4 }}><Child1 text="1" /></GridCol> <GridCol span={{ base: 12, xs: 4 }}><Child1 text="2" /></GridCol> <GridCol span={{ base: 12, xs: 4 }}><Child1 text="3" /></GridCol> <GridCol span={4}><Child2 text="A" /></GridCol> <GridCol span={4}><Child2 text="B" /></GridCol> <GridCol span={4}><Child2 text="C" /></GridCol> <GridCol span={6}><Child3 text="Left" /></GridCol> <GridCol span={6}><Child3 text="Right" /></GridCol> <GridCol span={3}><Child4 text="1" /></GridCol> <GridCol span={3}><Child4 text="2" /></GridCol> <GridCol span={3} offset={3}><Child4 text="3" /></GridCol> </Grid> }

SimpleGrid Usage

import { h } from "preact" import { SimpleGrid } from "@/comps/echo/grid" export function SimpleGridDemo() { return <div class="w-[360px] flex flex-col p-4"> <SimpleGrid cols={4} spacing={4} class="w-full mb-4"> <div class="bg-red-500 text-white p-4">Item 1</div> <div class="bg-red-500 text-white p-4">Item 2</div> <div class="bg-red-500 text-white p-4">Item 3</div> <div class="bg-red-500 text-white p-4">Item 4</div> <div class="bg-red-500 text-white p-4">Item 5</div> <div class="bg-red-500 text-white p-4">Item 6</div> </SimpleGrid> <SimpleGrid cols={3} spacing={8} class="w-full"> <div class="bg-purple-500 text-white p-4">Item A</div> <div class="bg-purple-500 text-white p-4">Item B</div> <div class="bg-purple-500 text-white p-4">Item C</div> <div class="bg-purple-500 text-white p-4">Item D</div> </SimpleGrid> </div> }

Stack Usage

import { h } from "preact" import { Stack } from "@/comps/echo/grid" export function StackDemo() { return <div class="w-[360px] flex flex-col gap-4 p-8 bg-gray-200"> <Stack class="mb-4"> <div class="bg-blue-500 text-white p-2">Item 1</div> <div class="bg-blue-500 text-white p-2">Item 2</div> <div class="bg-blue-500 text-white p-2">Item 3</div> </Stack> <Stack vertical={false} spacing={16}> <div class="bg-green-500 text-white p-2">Item A</div> <div class="bg-green-500 text-white p-2">Item B</div> <div class="bg-green-500 text-white p-2">Item C</div> </Stack> </div> }