Components
Components
Prebuilt React UI components from @avnology/id-elements.
Components
@avnology/id-elements ships production-ready React components for every auth surface: sign-in, sign-up, MFA, account management, organization switching, consent, and more. Every component is Carbon-styled out of the box via @avnology/design-system and fully themeable.
Install
npm install @avnology/id-elements @avnology/design-systemWrap your app in <AvnologyIdProvider>:
Auth UI
| Component | Purpose |
|---|---|
| SignIn | Drop-in sign-in form -- password, passkey, social, magic link |
| SignUp | Registration form |
| UserButton | Avatar + menu for signed-in users |
| UserProfile | Full account settings panel |
| LoginWidget | Standalone widget (non-React apps) |
Organizations
| Component | Purpose |
|---|---|
| OrganizationSwitcher | Drop-down to switch active org |
| OrganizationList | Browse orgs you belong to (v1.1 -- stub) |
| OrganizationProfile | Org settings surface (v1.1 -- stub) |
| CreateOrganization | Org creation flow (v1.1 -- stub) |
| InvitationAcceptor | Accept an emailed invitation (v1.1 -- stub) |
Access control
| Component | Purpose |
|---|---|
| Protect | Permission-gated children |
| SignedIn | Render only when authenticated |
| SignedOut | Render only when unauthenticated |
Developer
| Component | Purpose |
|---|---|
| ApiKeyManager | User-facing API key management (v1.1 -- stub) |
| AuditLogViewer | Org-scoped audit feed (v1.1 -- stub) |
| ConsentScreen | Custom OAuth consent UI (v1.1 -- stub) |
| DeviceFlowCode | Show user_code during device flow (v1.1 -- stub) |
Theming & accessibility
- Theming -- design-system tokens, dark mode.
- Accessibility -- WCAG 2.2 AA conformance.