freesewing/sites/dev/docs/reference/packages/react/components/account

---
title: Account
---

import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
import { ComponentDocs } from '@site/src/components/component-docs.js'
import { MiniNote } from '@freesewing/react/components/Mini'
import {
  jsdocAccountStatus as jsdocAccount,
  jsdocAccountStatus,
  jsdocApikeys,
  jsdocAvatar,
  jsdocBio,
  jsdocBookmarkButton,
  jsdocBookmarks,
  jsdocCompare,
  jsdocConsent,
  jsdocControl,
  jsdocEmail,
  jsdocEmailChangeConfirmation,
  jsdocExport,
  jsdocGithub,
  jsdocImportSet,
  jsdocInstagram,
  jsdocLinks,
  jsdocMastodon,
  jsdocMfa,
  jsdocMsetCard,
  jsdocNewSet,
  jsdocNewsletter,
  jsdocPassword,
  jsdocPattern,
  jsdocPatternCard,
  jsdocPatterns,
  jsdocReddit,
  jsdocReload,
  jsdocRemove,
  jsdocRestrict,
  jsdocSet,
  jsdocSets,
  jsdocTiktok,
  jsdocTwitch,
  jsdocUnits,
  jsdocUserId,
  jsdocUsername,
  jsdocUserRole,
  jsdocWebsite,
} from '@site/prebuild/jsdoc/components.account.mjs'
import {
  AccountStatusExample,
  ApikeysExample,
  AvatarExample,
  BioExample,
  BookmarkButtonExample,
  BookmarksExample,
  CompareExample,
  ConsentExample,
  ControlExample,
  EmailExample,
  EmailChangeConfirmationExample,
  ExportExample,
  GithubExample,
  ImportSetExample,
  InstagramExample,
  LinksExample,
  MastodonExample,
  MfaExample,
  MsetCardExample,
  NewSetExample,
  NewsletterExample,
  PasswordExample,
  PatternExample,
  PatternCardExample,
  PatternsExample,
  RedditExample,
  ReloadExample,
  RemoveExample,
  RestrictExample,
  SetExample,
  SetsExample,
  TiktokExample,
  TwitchExample,
  UnitsExample,
  UserIdExample,
  UsernameExample,
  UserRoleExample,
  WebsiteExample,
} from './_examples.js'

<DocusaurusDoc>

The **Account** component family provides the following components:

- [AccountStatus ](#accountstatus)
- [Apikeys ](#apikeys)
- [Avatar ](#avatar)
- [Bio ](#bio)
- [BookmarkButton ](#bookmarkbutton)
- [Bookmarks ](#bookmarks)
- [Compare ](#compare)
- [Consent ](#consent)
- [Control ](#control)
- [Email ](#email)
- [EmailChangeConfirmation](#emailchanfirmation)
- [Export ](#export)
- [Github ](#github)
- [ImportSet ](#importset)
- [Instagram ](#instagram)
- [Links ](#links)
- [Mastodon ](#mastodon)
- [Mfa ](#mfa)
- [MsetCard ](#msetcard)
- [NewSet ](#newset)
- [Newsletter ](#newslett)
- [Password ](#password)
- [Pattern ](#pattern)
- [PatternCard ](#patterncard)
- [Patterns ](#patterns)
- [Reddit ](#reddit)
- [Reload ](#reload)
- [Remove ](#remove)
- [Restrict ](#restrict)
- [Set ](#set)
- [Sets ](#sets)
- [Tiktok ](#tiktok)
- [Twitch ](#twitch)
- [Units ](#units)
- [UserId ](#userid)
- [Username ](#username)
- [UserRole ](#userrole)
- [Website ](#website)

## AccountStatus

<ComponentDocs docs={jsdocAccountStatus} example={AccountStatusExample} />

## Apikeys

<ComponentDocs docs={jsdocApikeys} example={ApikeysExample} />

## Avatar

<ComponentDocs docs={jsdocAvatar} example={AvatarExample} />

## Bio

<ComponentDocs docs={jsdocBio} example={BioExample} />

## BookmarkButton

<ComponentDocs docs={jsdocBookmarkButton} example={BookmarkButtonExample} />

## Bookmarks

<ComponentDocs docs={jsdocBookmarks} example={BookmarksExample} />

## Compare

<ComponentDocs docs={jsdocCompare} example={CompareExample} />

## Consent

<ComponentDocs docs={jsdocConsent} example={ConsentExample} />

## Control

<ComponentDocs docs={jsdocControl} example={ControlExample} />

## Email

<ComponentDocs docs={jsdocEmail} example={EmailExample} />

## EmailChangeConfirmation

<MiniNote>
  #### Requires a valid callback URL This component will not work without the proper <code>id</code>{' '}
  and <code>check</code> URL paramters that come from a email confirmation link sent out from the
  FreeSewing backend.
</MiniNote>

<ComponentDocs docs={jsdocEmailChangeConfirmation} example={EmailChangeConfirmationExample} />

## Export

<ComponentDocs docs={jsdocExport} example={ExportExample} />

## Github

<ComponentDocs docs={jsdocGithub} example={GithubExample} />

## ImportSet

<ComponentDocs docs={jsdocImportSet} example={ImportSetExample} />

## Instagram

<ComponentDocs docs={jsdocInstagram} example={InstagramExample} />

## Links

<ComponentDocs docs={jsdocLinks} example={LinksExample} />

## Mastodon

<ComponentDocs docs={jsdocMastodon} example={MastodonExample} />

## Mfa

<ComponentDocs docs={jsdocMfa} example={MfaExample} />

## MsetCard

<ComponentDocs docs={jsdocMsetCard} example={MsetCardExample} />

## NewSet

<ComponentDocs docs={jsdocNewSet} example={NewSetExample} />

## Newsletter

<ComponentDocs docs={jsdocNewsletter} example={NewsletterExample} />

## Password

<ComponentDocs docs={jsdocPassword} example={PasswordExample} />

## Pattern

<ComponentDocs docs={jsdocPattern} example={PatternExample} />

## PatternCard

<ComponentDocs docs={jsdocPatternCard} example={PatternCardExample} />

## Patterns

<ComponentDocs docs={jsdocPatterns} example={PatternsExample} />

## Reddit

<ComponentDocs docs={jsdocReddit} example={RedditExample} />

## Reload

<ComponentDocs docs={jsdocReload} example={ReloadExample} />

## Remove

<ComponentDocs docs={jsdocRemove} example={RemoveExample} />

## Restrict

<ComponentDocs docs={jsdocRestrict} example={RestrictExample} />

## Set

<ComponentDocs docs={jsdocSet} example={SetExample} />

## Sets

<ComponentDocs docs={jsdocSets} example={SetsExample} />

## Tiktok

<ComponentDocs docs={jsdocTiktok} example={TiktokExample} />

## Twitch

<ComponentDocs docs={jsdocTwitch} example={TwitchExample} />

## Units

<ComponentDocs docs={jsdocUnits} example={UnitsExample} />

## UserId

<ComponentDocs docs={jsdocUserId} example={UserIdExample} />

## Username

<ComponentDocs docs={jsdocUsername} example={UsernameExample} />

## UserRole

<ComponentDocs docs={jsdocUserRole} example={UserRoleExample} />

## Website

<ComponentDocs docs={jsdocWebsite} example={WebsiteExample} />

</DocusaurusDoc>