Generate an Angular admin from your Supabase schema.

Pidrang is an open-source, headless framework designed to eliminate boilerplate code when building Angular administration panels, dashboards, and internal tools. Inspired by the architecture of Refine, it brings data providers, authentication management, and state tracking to the Angular ecosystem.

Website: pidrang.dev

Pidrang is pre-1.0: the public API may change between minor versions.

Features

• Headless architecture: decoupled from the UI. Use Angular Material or Tailwind today, or build your own layer on the same contracts.
• Signal-first: built on Angular Signals and the native resource() API for fine-grained reactivity.
• Data providers: first-class Supabase support, with a small DataProvider contract for any other backend.
• Auth provider: sign-in, sign-out and a signal-based session, with the same pluggable design.
• Schema-driven UI: ResourceTable and ResourceForm render from a Resource definition instead of hand-written markup per table.
• CLI: npx pidrang init introspects a Supabase schema and scaffolds Resource definitions and Angular Material CRUD pages into an existing Angular app.

Packages

Package	Description
@pidrang/core	Contracts, providePidrang and signal-based state. Depends on @angular/core only.
@pidrang/supabase	DataProvider and AuthProvider backed by Supabase.
@pidrang/material	ResourceTable and ResourceForm on Angular Material and Signal Forms.
@pidrang/tailwind	The same components styled with Tailwind utility classes.
pidrang	The CLI: npx pidrang init scaffolds resources and CRUD pages from a Supabase schema.

Install

In an Angular 22.1+ standalone app:

npm install @pidrang/core @pidrang/supabase @pidrang/material @supabase/supabase-js
ng add @angular/material
npx pidrang init

pidrang init generates the resources and pages, then wires them into the app: it edits app.config.ts, app.routes.ts and app.html, and creates the environment files (with their angular.json file replacement) when the app has none. On a new ng new app, it also opens / on the first generated list and can add a navigation layout (header, sign in and out, a menu of the resources). Step by step: Getting started.

Quick look

import { providePidrang } from '@pidrang/core';
import { provideSupabaseDataProvider } from '@pidrang/supabase';
import { createClient } from '@supabase/supabase-js';

const client = createClient(SUPABASE_URL, SUPABASE_PUBLISHABLE_KEY);

export const appConfig = {
  providers: [
    providePidrang({
      dataProvider: provideSupabaseDataProvider({ client }),
      resources: [
        {
          name: 'products',
          fields: [
            { name: 'id', type: 'text' },
            { name: 'name', type: 'text' },
            { name: 'price', type: 'number' },
          ],
        },
      ],
    }),
  ],
};

<pidrang-material-resource-table [fields]="fields()" [data]="list.value()?.data ?? []" />

The full walkthrough, from a new Angular app to a working list, create and edit flow, is in docs/getting-started.md.

Documentation

• Getting started
• Architecture
• Design notes
• Writing a data provider
• Roadmap
• Changelog

Demos

apps/demo-material and apps/demo-tailwind show the same three resources (users, products, orders) with two different UI layers, both backed by the public pidrang Supabase project. Everything they share (Supabase wiring, resources, routes, helpers) lives once in the internal, unpublished libs/demo-shared; each demo keeps only its own pages and theme.

Development

pnpm install
pnpm exec nx run-many -t lint test build
pnpm exec nx serve demo-material

See CONTRIBUTING.md for the branching and commit conventions.

Security

Pidrang performs no authorization of its own: access control comes from the Row Level Security policies on your Supabase project. To report a vulnerability, see SECURITY.md.

License

MIT, see LICENSE.