Vora UI

Installation

How to install dependencies and structure your app.

Note: We have the exact same installation process as shadcn/ui, and Vora UI is listed in the shadcn registry directory.

  1. Create project

    Run the init command to create a new Next.js project or to set up an existing one:

    pnpm dlx shadcn@latest init

  2. Add components

    You can now start adding components to your project.

    pnpm dlx shadcn@latest add @voraui/trading-chart

  3. Import component

    The command above will add the TradingChart component to components/voraui/trading-chart/. You can then import it like this:

    app/page.tsx
    import { TradingChart } from "@/components/voraui/trading-chart"

export default function Home() {
  return <TradingChart />
}

Data out of the box

Every component ships with a hook that fetches free, keyless public APIs (alternative.me, CoinPaprika, Binance), so it renders real data immediately. For production you can pass your own data via props and the bundled fetcher is skipped.

Troubleshooting

If an older shadcn CLI does not resolve @voraui, add the namespace to the registries key of your components.json:

components.json
{
  "registries": {
    "@voraui": "https://voraui.vercel.app/r/{name}.json"
  }
}

Or skip the namespace and use the full URL form:

pnpm dlx shadcn@latest add https://voraui.vercel.app/r/trading-chart.json

Installed before components moved into per-component folders? Re-adding a component writes the new folder but leaves the old flat files in components/voraui/ behind: delete those and point your imports at the new folder.