Sso Provider Card

SSO provider card with a name, description, Configured or Not set badge, an enable switch and a Configure button. A React block for SAML and OIDC settings.

src/registry/ui/sso-provider-card.tsx/r/sso-provider-card.json

Installation#

bash

npx shadcn@latest add @minidev/sso-provider-card

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/sso-provider-card.json

Usage#

tsx

import { SsoProviderCard } from "@/components/ui/sso-provider-card"

export function Example() {
  return (
    <SsoProviderCard name="SAML" description="Enterprise IdP" enabled={sso} configured onEnabledChange={setSso} />
  )
}

API reference#

SsoProviderCard props
Prop	Type	Default
`name*`	`string`	`-`
`description*`	`string`	`-`
`enabled`	`boolean`	`-`
`configured`	`boolean`	`-`
`onEnabledChange`	`(v: boolean) => void`	`-`
`onConfigure`	`() => void`	`-`
`className`	`string`	`-`

* required

Dependencies#

npm

React only

Built from

Button Status Badge Switch

Examples#

AdminOrg, SSO, quotas

Auth CardCentered Tailwind sign in card with a title, optional description, a slot for fields and providers, and a divided footer for sign up or reset links.Forgot Password FormA password reset request card with one email field and a full width Send reset email button, composed from AuthCard, FormField and Input in React.Join WorkspaceA centered card for joining a team workspace with an invite code: heading, helper text, a monospace code input and a full width Join button. Tailwind styled.Magic Link FormA passwordless sign in card with an email field and a Send link button that passes the address to onSend. Built from AuthCard, FormField and Input.Otp InputA React one time code input where one real input powers the slots, so paste, SMS autofill and screen readers work natively. Has groups, error shake and success.Reset Password FormReset password card with new password and confirm password fields and a full-width Update password button, built from AuthCard, FormField and Input in React.

All login and signup components