FoundationWeb

FoundationWeb (Roblox/foundation-web, formerly known as Portal) is Roblox's Tailwind CSS-based UI library for web, wrapping and restyling Radix UI primitives with Roblox's design system. It's owned by Creator Resources Foundation.

Roblox Foundation design tokens and utilities for Tailwind CSS.

@rbx/foundation-tailwind is a Tailwind CSS v3 preset that maps Foundation design tokens to semantic utilities for layout, color, typography, spacing, borders, responsive breakpoints, and icons. It also includes generated TypeScript class-name unions for code that builds class names dynamically.

pnpm add @rbx/foundation-tailwind tailwindcss

See packages/foundation-tailwind/README.md for the full setup guide, feature list, and API reference.

Roblox Foundation React UI framework.

@rbx/foundation-ui is the React component library for web, built on Radix UI and styled with Foundation design tokens and the utilities from @rbx/foundation-tailwind.

Notice: This documentation came from a tree-shaken source and may not include all available components.

pnpm add @rbx/foundation-ui @rbx/foundation-tailwind tailwindcss react

See packages/foundation-ui/README.md for component usage, accessibility guidance, and package-specific conventions.

• Repo: github.rbx.com/Roblox/foundation-web
• CODEOWNERS: github.rbx.com/Roblox/foundation-web/blob/master/CODEOWNERS
• Jira: FNDN, CREATOR
• Confluence: Creator Success
• Figma:
  • Foundation Design Kit
  • Foundation Design Tokens

git clone github.rbx.com/Roblox/foundation-web
cd foundation-web
pnpm install

See CONTRIBUTING.md for branch naming, commit format, and the PR workflow.

pnpm build         # build all packages
pnpm build:clean   # remove all packages' dist/
pnpm lint          # lint all packages
pnpm test          # test all packages
pnpm changeset     # record a change for release notes/versioning

• packages/foundation-tailwind — Tailwind preset, generated CSS, typed class definitions, and build scripts.
• packages/foundation-ui — React component library built on Radix UI and Foundation design tokens.
• scripts — repository tooling and validation helpers.

The repository uses pnpm workspaces. To work on the packages locally:

pnpm install
pnpm --filter @rbx/foundation-tailwind build
pnpm --filter @rbx/foundation-ui build

Each package README includes the package-specific build commands and usage examples.