GenUI - Registry-based UI Infrastructure

Quickstart

Ensure the registry is set up in Installation.
Run the registry command:

npx shadcn@latest add https://gen-ui-eta-two.vercel.app/r/generic-renderer

Why Use Generic Renderer?

Formatting dates, currencies, and complex types repeatedly leads to UI inconsistency. Generic Renderer centralizes these formatting rules into a single schema-driven component.

Supported Types

Text

Number

Boolean

Date

DateTime

Time

Currency

Percentage

URL

Phone

Badge

Tag

Avatar

Image

Icon

Progress

Rating

Color

JSON

Code

Markdown

HTML

Custom

Usage

import { GenericRenderer } from "@/components/systems/generic-renderer/generic-renderer"

const user = {
  name: "John Doe",
  balance: 1250.5,
  joined: "2024-01-20T10:00:00Z",
  status: "active",
}

export function UserProfile() {
  return (
    <GenericRenderer
      data={user}
      schema={{
        name: { key: "name", type: "text", label: "Full Name" },
        balance: {
          key: "balance",
          type: "currency",
          label: "Balance",
          format: { currency: "EUR" },
        },
        joined: { key: "joined", type: "date", label: "Member Since" },
        status: { key: "status", type: "badge", label: "Status" },
      }}
      layout="grid"
      columns={2}
      showLabels
    />
  )
}

Custom Renderers

Provide renderers to override a field type with a custom component.

<GenericRenderer
  data={user}
  schema={{ status: { key: "status", type: "badge" } }}
  renderers={{
    badge: ({ value }) => (
      <span className={value === "active" ? "text-emerald-400" : "text-muted-foreground"}>
        {String(value)}
      </span>
    ),
  }}
/>

API Reference

Prop	Type	Notes
data	Record<string, unknown>	Input object
schema	RenderSchema	Field config map
layout	"inline" \| "stacked" \| "grid" \| "table"	Layout mode
columns	number	Grid column count
showLabels	boolean	Toggle labels
renderers	RendererMap	Override field types

← Previous: Generic Table Next: Generic Grid →