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