open-index/open-npm huggingface dataset:
npm package: @invertase/firebaseui-angular
Description: This package contains the Angular components for FirebaseUI.
Latest version: 0.0.17

# @invertase/firebaseui-angular

This package contains the Angular components for FirebaseUI.

## Installation

Install the package from NPM:

```bash
npm install @angular/fire @invertase/firebaseui-angular @invertase/firebaseui-core @invertase/firebaseui-styles @invertase/firebaseui-translations
```

## Development

This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.1.0.

## Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

```bash
ng generate component component-name
```

For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:

```bash
ng generate --help
```

## Building

To build the library, run:

```bash
ng build angular
```

This command will compile your project, and the build artifacts will be placed in the `dist/` directory.

### Publishing the Library

Once the project is built, you can publish your library by following these steps:

1. Navigate to the `dist` directory:

   ```bash
   cd dist/angular
   ```

2. Run the `npm publish` command to publish your library to the npm registry:
   ```bash
   npm publish
   ```

## Running unit tests

To execute unit tests with [Vitest](https://vitest.dev), use the following command:

```bash
pnpm test
```

## Running end-to-end tests

For end-to-end (e2e) testing, run:

```bash
ng e2e
```

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

## Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
npm package: @invertase/firebaseui-react
Description: This package contains the React components for the FirebaseUI.
Latest version: 0.0.11

# @invertase/firebaseui-react

This package contains the React components for the FirebaseUI.

## Installation

Install the package from NPM:

```bash
npm install @invertase/firebaseui-react
```

## Usage

### Importing styles

To use the components, you need to import the styles from the `@invertase/firebaseui-styles` package.

If using Tailwind CSS, you can import the styles directly into your project.

```css
@import "tailwindcss";
@import "@invertase/firebaseui-styles/src/base.css";
```

Alternatively, you can import the fully compiled CSS file into your project.

```tsx
import "@invertase/firebaseui-styles/dist.css";
```

### Initializing the UI

First, initalize the Firebase JS SDK:

```tsx
import { initializeApp } from "firebase/app";

const app = initializeApp({ ... });
```

Then, initialize the FirebaseUI with the configuration:

```tsx
import { initializeUI } from "@invertase/firebaseui-react";

const ui = initializeUI({
  app,
});
```

Finally, wrap your app in the `ConfigProvider` component:

```tsx
import { ConfigProvider } from "@invertase/firebaseui-react";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <ConfigProvider config={ui}>
      <App />
    </ConfigProvider>
  </StrictMode>
);
```

### Importing components

To use the components, you need to import the components from the `@invertase/firebaseui-react` package.

```tsx
import { SignInAuthScreen, GoogleSignInButton } from "@invertase/firebaseui-react";

function App() {
  return (
    <SignInAuthScreen>
      <GoogleSignInButton />
    </SignInAuthScreen>
  );
}
```
npm package: @invertase/firebaseui-shadcn
Description: > This package is private and not published to npm.
Latest version: 0.0.2


# Firebase UI for Web - Shadcn

> This package is private and not published to npm.

The shadcn package exposes React components via the [Shadcn Registy](https://ui.shadcn.com/docs/registry), allowing users
to take advantage of Firebase UI for Web logic but bringing their own UI via Shadcn.

To get started, add the `@firebase` registry [namespace](https://ui.shadcn.com/docs/registry/namespace) to your `components.json`:

```json
{
  // ...
  "registries": {
    "@firebase": "https://ui.firebase.com/{name}.json"
  }
}
```

Next install one of the registry components - this will automatically install the `@invertase/firebaseui-react` for you,
alongwith adding any additionally required components.

```bash
npx shadcn@latest add @firebase/sign-up-auth-screen
```

Before consuming a component, ensure you have initalized your Firebase UI application:

```tsx
import { initalizeUI } from '@invertase/firebaseui-core';
import { FirebaseUIProvider } from '@invertase/firebaseui-react';
import { SignInAuthScreen } from '@/components/sign-in-auth-screen';

const ui = initalizeUI(...);

function App() {
  return (
    <FirebaseUIProvider ui={ui}>
      <SignInAuthScreen />
    </FirebaseUIProvider>
  );
}
```

## Building the registry

To build the registry, run the `build` script:

```
pnpm build
```

Note, the script run (`build.ts`) expects a domain, which replaces the `{{ DOMAIN }}` field within the 
`registy-spec.json`. This enables building the registry for different domains without updating the domain
in the actual `registry.json` file Shadcn expects.
npm package: @invertase/firebaseui-styles
Description: This package contains the styles for the FirebaseUI components.
Latest version: 0.0.14

# @invertase/firebaseui-styles

This package contains the styles for the FirebaseUI components.

## Installation

### With tailwind

If you are using Tailwind CSS in your project, you can import the source files directly into your project.

```css
@import "tailwindcss";
@import "@invertase/firebaseui-styles/tailwind";
```

### With CSS

Alternatively, you can import fully compiled CSS files into your project. This output contains both the tailwind styles and the FirebaseUI styles.

```jsx
import "@invertase/firebaseui-styles";
```

## Themes

The packages also exports themes which overrides the CSS variables with preset colors. These can be imported from your CSS:

```css
@import "tailwindcss";
@import "@invertase/firebaseui-styles/tailwind";
@import "@invertase/firebaseui-styles/themes/brualist";
```

## Building

To build the styles into a single CSS file, run the following command:

```bash
pnpm build
```

This command will source the `src.css` file and output the compiled CSS to the `dist.css` file.