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>

- [Components](#components)

## Components

The **Account** component family provides the following [components](#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>