freesewing/sites/dev/docs/reference/packages/react/components/account/readme.mdx

---
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,
} 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,
} 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

## Pattern

## PatternCard

## Patterns

## Reddit

## Reload

## Remove

## Restrict

## Set

## Sets

## Tiktok

## Twitch

## Units

## UserId

## Username

## UserRole

## Website

</DocusaurusDoc>