Skip to content

Update getting-started.mdx #221

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
TornadoJT wants to merge 1 commit into from
Closed

Update getting-started.mdx #221

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 10 additions & 5 deletions content/tools/uikit/getting-started.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<Callout type="info">
Expand Down Expand Up @@ -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 \
Expand Down Expand Up @@ -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)

Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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
Loading