docs: add OpenZeppelin UIKit documentation (7 pages, navigation, screenshots)#6
Open
docs: add OpenZeppelin UIKit documentation (7 pages, navigation, screenshots)#6
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>
Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
…rflow in layout Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
…nd nav entry Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
The previous commit reduced the information shown to users (e.g. 'EcosystemRuntir' truncated to fit narrow LR nodes). Restored full descriptive text using bold provider names with descriptions on separate lines, increased node spacing, and set useMaxWidth:false to prevent truncation. Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
LR layout with subgraph truncates descriptive text. TD layout without subgraph wrapper allows full-width nodes that display all information. Matches the clean node style used by other UIKit diagrams. Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Add wrappingWidth:400 and classDef width:350px to prevent Mermaid from truncating descriptive text in Provider Tree nodes. Use classDef for cleaner style definitions matching other UIKit diagram patterns. Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
…untimeForNetwork return Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
… examples Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
…ateCrudHook, createLiveQueryHook, createJsonFileIO) Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
…ents page Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
|
You have used all of your free Bugbot PR reviews. To receive reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial. |
… for provider tree diagram Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
docs(uikit): add "Why Use the Storage Plugin?" section with real-world examples
…gram-05ec docs(uikit): fix Provider Tree diagram text truncation in React Integration
cursor
bot
changed the title
Replace invalid ecosystem adapter routes with links that exist in this docs site so link validation passes in CI.
Co-authored-by: Aleksandr Pasevin <aleksandr.pasevin@openzeppelin.com>
Place UIKit nav item directly below Role Manager
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 complete documentation for OpenZeppelin UIKit — the modular React component library for building blockchain transaction interfaces. This PR introduces 7 new documentation pages, sidebar navigation, and supporting screenshots.
New Pages
/tools/uikit/tools/uikit/getting-started/tools/uikit/architecture/tools/uikit/components/tools/uikit/react-integration/tools/uikit/theming/tools/uikit/storageNavigation
Added a UIKit folder to the Ethereum & EVM sidebar with all 7 pages.
Screenshots
form-renderer.pngcontract-state-widget.pngaddress-book-widget.pngstorage-account-alias-plugin.pngexample-app-overview.pngType of Change
Checklist
pnpm run buildpnpm run checkAdditional Notes
This is the combined result of the stacked PRs (#7, #8) that have been merged into this branch. Content was sourced from the openzeppelin-ui package source code and validated against real-world usage in UI Builder and Role Manager.