The Forge stack explained

Alloy builds on ForgeStack, a family of open libraries for React apps. Knowing what each one does makes the generated code easy to read and extend.

LibraryWhat it doesYou will see it as
BearUI components: buttons, cards, forms, modals, layout, 100+ more<Button>, <Card>, <TextField>
GridTableData tables with sorting, filters and paginationPrice lists, schedules, admin tables
CompassRouting for React (pages, params, links)<Link to="/about">, useParams()
SynapseLightweight state (nuclei) shared across componentsuseNucleus(store, selector)
Forge QueryData fetching with caching and retriesHooks that load and cache API data
Forge FormForms with validation and typed valuesBooking and contact forms with validation
LingoTranslations, plurals and right-to-leftconst { t } = useLingo()

Why Bear components everywhere

Alloy never writes raw <div> soup. Every visible element is a Bear component, so spacing, colors, dark mode and accessibility come from one place. Changing the theme changes the whole site.

A typical generated section

import { Card, Button } from '@forgedevstack/bear';
import { useLingo } from '@forgedevstack/lingo';

import { Stack, Heading, Text } from '@components/commons';

export const Services = () => {
  const { t } = useLingo();
  return (
    <Stack gap={4}>
      <Heading level={2}>{t('services.title')}</Heading>
      <Card padding="lg">
        <Text>{t('services.walk')}</Text>
        <Button variant="primary">{t('services.book')}</Button>
      </Card>
    </Stack>
  );
};

Learn more