From ec5e52e712576ae69c189c8b166a09d04696fca9 Mon Sep 17 00:00:00 2001 From: TornadoJT Date: Fri, 24 Jul 2026 11:29:18 -0700 Subject: [PATCH] Update getting-started.mdx Title: Improve clarity, punctuation, and consistency in UIKit Getting Started documentation Description: This PR improves readability and consistency in the UIKit Getting Started documentation. Changes include: Added missing commas in compound sentences Improved clarity in several explanations Standardized capitalization in section headers Added context for Tailwind CSS requirements Impact: These changes improve onboarding clarity for developers adopting UIKit and ensure documentation consistency across the OpenZeppelin Docs site. --- content/tools/uikit/getting-started.mdx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/content/tools/uikit/getting-started.mdx b/content/tools/uikit/getting-started.mdx index d797e5b6..824d7d18 100644 --- a/content/tools/uikit/getting-started.mdx +++ b/content/tools/uikit/getting-started.mdx @@ -2,6 +2,11 @@ title: Getting Started --- +Why? +OpenZeppelin UIKit provides a modular, blockchain‑aware component system that simplifies building secure Web3 interfaces. It lets developers skip low‑level UI wiring and rely on tested components that handle forms, transactions, and runtime integration across multiple ecosystems. + + + This guide walks you through installing OpenZeppelin UIKit, configuring styles, and rendering your first blockchain transaction form. @@ -29,7 +34,7 @@ pnpm add @openzeppelin/ui-types @openzeppelin/ui-utils @openzeppelin/ui-componen ### Full Setup (With Rendering + React Integration) -For applications that need transaction form rendering and wallet integration: +For applications that need transaction form rendering and wallet integration, use: ```bash pnpm add @openzeppelin/ui-types @openzeppelin/ui-utils @openzeppelin/ui-styles \ @@ -63,7 +68,7 @@ pnpm add @openzeppelin/adapter-polkadot ## Step 1: Configure Tailwind CSS -UIKit uses Tailwind CSS 4 for styling. Components ship class names but **not** compiled CSS. Your application's Tailwind build must know where to find them. +UIKit uses Tailwind CSS 4 for styling. Components ship class names, but they do **not** include compiled CSS. Your application's Tailwind build must generate the final styles. ### Automated Setup (Recommended) @@ -101,7 +106,7 @@ A bare Tailwind import is not enough. Tailwind v4 must be told to scan the OpenZ ## Step 2: Use Components -UIKit components work with [react-hook-form](https://react-hook-form.com/) for form state management. Here is a simple form with an address field and a submit button: +UIKit components work with [react-hook-form](https://react-hook-form.com/) for form state management, providing a consistent way to handle form input. Here is a simple form with an address field and a submit button: ```tsx import { useForm } from 'react-hook-form'; @@ -136,7 +141,7 @@ function SimpleForm() { ## Step 3: Render a Transaction Form -The renderer package provides a declarative way to build transaction forms from a schema. The form fields, layout, and submission are all driven by data. +The renderer package provides a declarative way to build transaction forms from a schema. The form fields, layout, and submission are all defined declaritavely through the schema. ```tsx import { TransactionForm } from '@openzeppelin/ui-renderer'; @@ -219,4 +224,4 @@ For the full React integration guide, see [React Integration](/tools/uikit/react - [Components](/tools/uikit/components): Explore UI primitives and blockchain-aware form fields - [React Integration](/tools/uikit/react-integration): Deep dive into providers, hooks, and wallet state - [Theming & Styling](/tools/uikit/theming): Customize tokens, colors, and dark mode -- [Building an adapter](/ecosystem-adapters/building-an-adapter): Background on adapter packages and ecosystem integrations +- [Building an Adapter](/ecosystem-adapters/building-an-adapter): Background on adapter packages and ecosystem integrations