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

---
title: React Components
---

The React components provided by the
[@freesewing/react](/reference/packages/react/) package are grouped by
_component family_.

For each family, the import structure is the same:

```js
import { Component } from '@freesewing/react/components/Family'
```

Click on any component family to see which components they provide:

<ReadMore />

- [components/Account](/reference/packages/react/components/account/)
- [components/Admin](/reference/packages/react/components/admin/)
- [components/Breadcrumbs](/reference/packages/react/components/breadcrumbs/)
- [components/Button](/reference/packages/react/components/button/)
- [components/Collection](/reference/packages/react/components/collection/)
- [components/Control](/reference/packages/react/components/control/)
- [components/CopyToClipboardButton](/reference/packages/react/components/copytoclipboardbutton/)
- [components/CuratedSet](/reference/packages/react/components/curatedset/)
- [components/Design](/reference/packages/react/components/design/)
- [components/DiffViewer](/reference/packages/react/components/diffviewer/)
- [components/Docusaurus](/reference/packages/react/components/docusaurus/)
- [components/Echart](/reference/packages/react/components/echart/)
- [components/Editor](/reference/packages/react/components/editor/)
- [components/Heading](/reference/packages/react/components/heading/)
- [components/Highlight](/reference/packages/react/components/highlight/)
- [components/Icon](/reference/packages/react/components/icon/)
- [components/Input](/reference/packages/react/components/input/)
- [components/Json](/reference/packages/react/components/json/)
- [components/KeyVal](/reference/packages/react/components/keyval/)
- [components/Layout](/reference/packages/react/components/layout/)
- [components/LineDrawing](/reference/packages/react/components/linedrawing/)
- [components/Link](/reference/packages/react/components/link/)
- [components/Logo](/reference/packages/react/components/logo/)
- [components/Markdown](/reference/packages/react/components/markdown/)
- [components/Mini](/reference/packages/react/components/mini/)
- [components/Modal](/reference/packages/react/components/modal/)
- [components/New](/reference/packages/react/components/new/)
- [components/Newsletter](/reference/packages/react/components/newsletter/)
- [components/Null](/reference/packages/react/components/null/)
- [components/Number](/reference/packages/react/components/number/)
- [components/Pattern](/reference/packages/react/components/pattern/)
- [components/Patrons](/reference/packages/react/components/patrons/)
- [components/Popout](/reference/packages/react/components/popout/)
- [components/Profile](/reference/packages/react/components/profile/)
- [components/Role](/reference/packages/react/components/role/)
- [components/SignIn](/reference/packages/react/components/signin/)
- [components/SignUp](/reference/packages/react/components/signup/)
- [components/Spinner](/reference/packages/react/components/spinner/)
- [components/Stats](/reference/packages/react/components/stats/)
- [components/Tab](/reference/packages/react/components/tab/)
- [components/Table](/reference/packages/react/components/table/)
- [components/Time](/reference/packages/react/components/time/)
- [components/Uuid](/reference/packages/react/components/uuid/)
- [components/Ux](/reference/packages/react/components/ux/)
- [components/Yaml](/reference/packages/react/components/yaml/)
- [components/Xray](/reference/packages/react/components/xray/)

## Context

- context/LoadingStatus](/reference/packages/react": "./context/LoadingStatus/index.mjs",

## Names exports

- linedrawings](/reference/packages/react": "./src/linedrawings/index.mjs",
- pattern](/reference/packages/react": "./src/pattern/index.mjs",
- xray](/reference/packages/react": "./src/pattern-xray/index.mjs",