Getting Started

New Applications

Polkadot UI ships a CLI that bootstraps new apps and wires providers automatically. This page focuses on green‑field setups.

1) Initialize a project

npx polkadot-ui@latest init

What you get:

Next.js or Vite scaffolding with TypeScript
Preconfigured providers for PAPI and/or Dedot
Tailwind + shadcn/ui set up

2) Add your first component

npx polkadot-ui@latest add address-input

This installs the component, sets up types, and updates providers if needed.

3) Wrap your app with a provider (production setup)

import { PolkadotProvider } from "@/lib/providers/polkadot-provider.papi"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return <PolkadotProvider defaultChain="paseo">{children}</PolkadotProvider>
}

For Dedot/Typink based apps, use the Dedot provider:

import { PolkadotProvider } from "@/lib/providers/polkadot-provider.dedot"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return <PolkadotProvider defaultChain="paseo">{children}</PolkadotProvider>
}

4) Use the component

import { AddressInput } from "@/components/ui/address-input"
import { useState } from "react"

export default function Page() {
  const [value, setValue] = useState("")
  return (
    <div className="p-6">
      <AddressInput value={value} onChange={setValue} format="both" withIdentityLookup />
    </div>
  )
}

Notes

For demos only, each component also includes a WithProvider variant. Prefer a single, shared provider at the app root in production.
Both PAPI and Dedot variants are available where applicable; choose the one that matches your stack.