docs(uikit): add comprehensive OpenZeppelin UIKit documentation#5
Closed
docs(uikit): add comprehensive OpenZeppelin UIKit documentation#5
Conversation
Add 6 new documentation pages for OpenZeppelin UIKit: - Overview: package map, architecture diagram, design principles - Getting Started: installation, Tailwind setup, first form - Architecture: package layers, capability tiers, runtime lifecycle - Components: UI primitives, form fields, renderer widgets - React Integration: providers, hooks, wallet state, multi-ecosystem - Theming & Styling: Tailwind v4 tokens, dark mode, customization All pages include Mermaid diagrams and cross-link to Ecosystem Adapters docs. Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Register UIKit docs under Open Source Tools in the sidebar navigation with links to all 6 documentation pages. Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Place the GitHub repository link in an info Callout at the top of the overview page, matching the pattern used in the Ecosystem Adapters docs. Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Replace nested subgraph diagrams with flat color-coded flowcharts. Eliminates overlapping labels and tangled arrows by using: - Individual styled nodes instead of subgraph containers - Minimal dependency arrows (table covers full details) - Stadium-shaped nodes with color legend - Init config for tighter spacing Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Consolidate 13 individual capability nodes into 3 tier blocks that list their capabilities inline. Avoids the squished side-by-side subgraph layout and renders at full readable size. Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
- Remove 'replaces the legacy pattern' sentence - Merge three per-tier tables into a single reference table - Add cross-link to Ecosystem Adapters for full capability deep-dive - Keep diagram, tier summary, and Capability Bundles section (UIKit-specific) Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Multisig is not yet implemented — only EOA and Relayer are available. Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Capture and embed screenshots from https://openzeppelin-ui.vercel.app/: - Overview: contract interaction UI as hero image - Components: Form Renderer and ContractStateWidget - React Integration: wallet connection UI with network selector Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Remove contract-interactions and contract-state-widget screenshots that showed RPC errors. Replace overview hero with clean form-renderer screenshot. Re-capture wallet-connect screenshot. Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
The deployed example app at openzeppelin-ui.vercel.app has a missing app.config.json which prevents runtime initialization. This blocks Contract State Widget and Wallet pages from loading. Keep only the screenshots that render without a runtime: - example-app-overview.png (landing page with ecosystem switcher) - form-renderer.png (schema-driven TransactionForm) Remove broken screenshots: wallet-connect, architecture-example, form-renderer-scroll. Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Add animated GIF showing the ContractStateWidget querying live view functions on Sepolia. Displayed in a flex layout with the GIF on the left and description + code example on the right. Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Documentation Pull Request
Summary
Adds a new 6-page documentation section for OpenZeppelin UIKit — the modular React component library for building blockchain transaction interfaces.
Pages added:
/tools/uikit/tools/uikit/getting-started/tools/uikit/architecture/tools/uikit/components/tools/uikit/react-integration/tools/uikit/themingScreenshots from the live example app:
Diagrams: Package dependency graph, capability tiers, runtime lifecycle sequence, execution strategies, multi-ecosystem switching, provider tree, full app composition.
Cross-links to Ecosystem Adapters docs (PR OpenZeppelin#142) for adapter architecture, profiles, and getting started guides.
UIKit Overview with hero screenshot
Components page with Form Renderer screenshot
ContractStateWidget screenshot in docs
Wallet components with screenshot
Type of Change
Related Issues
Relates to OpenZeppelin#142 (Ecosystem Adapters documentation)
Checklist
pnpm run buildpnpm run check(link checker flags/ecosystem-adapters/*cross-references which will resolve when PR docs(ecosystem-adapters): add comprehensive documentation for OpenZeppelin Ecosystem Adapters OpenZeppelin/docs#142 merges)Additional Notes
/tools/uikitand appear in the Ethereum & EVM sidebar under "Open Source Tools"./ecosystem-adapters/*will resolve once PR docs(ecosystem-adapters): add comprehensive documentation for OpenZeppelin Ecosystem Adapters OpenZeppelin/docs#142 is merged.To show artifacts inline, enable in settings.