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

---
title: Linedrawing
---

import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
import { ComponentDocs } from '@site/src/components/component-docs.js'
import * as jsdoc from '@site/prebuild/jsdoc/components.linedrawing.mjs'
import {
  AaronExample,
  AlbertExample,
  BeeExample,
  BellaExample,
  BenjaminExample,
  BentExample,
  BibiExample,
  BobExample,
  BreannaExample,
  BrianExample,
  BruceExample,
  CarlitaExample,
  CarltonExample,
  CathrinExample,
  CharlieExample,
  CorneliusExample,
  DianaExample,
  FlorenceExample,
  FlorentExample,
  GozerExample,
  HiExample,
  HolmesExample,
  HortensiaExample,
  HueyExample,
  HugoExample,
  JaneExample,
  LucyExample,
  LuminaExample,
  LumiraExample,
  LunetiusExample,
  NobleExample,
  SimonExample,
  TeaganExample,
  TristanExample,
  UmaExample,
  UmbraExample,
  WahidExample,
  AaronFrontExample,
  AlbertFrontExample,
  BeeFrontExample,
  BellaFrontExample,
  BenjaminFrontExample,
  BentFrontExample,
  BibiFrontExample,
  BobFrontExample,
  BreannaFrontExample,
  BrianFrontExample,
  BruceFrontExample,
  CarlitaFrontExample,
  CarltonFrontExample,
  CathrinFrontExample,
  CharlieFrontExample,
  CorneliusFrontExample,
  DianaFrontExample,
  FlorenceFrontExample,
  FlorentFrontExample,
  GozerFrontExample,
  HiFrontExample,
  HolmesFrontExample,
  HortensiaFrontExample,
  HueyFrontExample,
  HugoFrontExample,
  JaneFrontExample,
  LucyFrontExample,
  LuminaFrontExample,
  LumiraFrontExample,
  LunetiusFrontExample,
  NobleFrontExample,
  SimonFrontExample,
  TeaganFrontExample,
  TristanFrontExample,
  UmaFrontExample,
  UmbraFrontExample,
  WahidFrontExample,
  AaronBackExample,
  BellaBackExample,
  BentBackExample,
  BibiBackExample,
  BobBackExample,
  BreannaBackExample,
  BrianBackExample,
  BruceBackExample,
  CarlitaBackExample,
  CarltonBackExample,
  CathrinBackExample,
  CharlieBackExample,
  CorneliusBackExample,
  DianaBackExample,
  GozerBackExample,
  HueyBackExample,
  HugoBackExample,
  JaneBackExample,
  LuminaBackExample,
  LumiraBackExample,
  NobleBackExample,
  SimonBackExample,
  TeaganBackExample,
  TristanBackExample,
  UmaBackExample,
  UmbraBackExample,
  WahidBackExample,
} from './_examples.js'

<DocusaurusDoc>

:::tip
This component family also exports the following helper objects:

- `lineDrawings`: An object where the key is the design name and the value the full LineDrawing component
- `lineDrawingsBack`: An object where the key is the design name and the value the back LineDrawing component
- `lineDrawingsFront`: An object where the key is the design name and the value the front LineDrawing component
:::

:::warning
All FreeSewing designs SHOULD have the full and front line drawing component.
The back component is optional.

If there is no specific front component, the front component MUST be exported as a copy of the full component.
:::

The __LineDrawing__ component family provides the following components:

  - [AaronBack](#aaronback)
  - [AaronFront](#aaronfront)
  - [Aaron](#aaron)
  - [AlbertFront](#albertfront)
  - [Albert](#albert)
  - [BeeFront](#beefront)
  - [Bee](#bee)
  - [BellaBack](#bellaback)
  - [BellaFront](#bellafront)
  - [Bella](#bella)
  - [BenjaminFront](#benjaminfront)
  - [Benjamin](#benjamin)
  - [BentBack](#bentback)
  - [BentFront](#bentfront)
  - [Bent](#bent)
  - [BibiBack](#bibiback)
  - [BibiFront](#bibifront)
  - [Bibi](#bibi)
  - [BobBack](#bobback)
  - [BobFront](#bobfront)
  - [Bob](#bob)
  - [BreannaBack](#breannaback)
  - [BreannaFront](#breannafront)
  - [Breanna](#breanna)
  - [BrianBack](#brianback)
  - [BrianFront](#brianfront)
  - [Brian](#brian)
  - [BruceBack](#bruceback)
  - [BruceFront](#brucefront)
  - [Bruce](#bruce)
  - [CarlitaBack](#carlitaback)
  - [CarlitaFront](#carlitafront)
  - [Carlita](#carlita)
  - [CarltonBack](#carltonback)
  - [CarltonFront](#carltonfront)
  - [Carlton](#carlton)
  - [CathrinBack](#cathrinback)
  - [CathrinFront](#cathrinfront)
  - [Cathrin](#cathrin)
  - [CharlieBack](#charlieback)
  - [CharlieFront](#charliefront)
  - [Charlie](#charlie)
  - [CorneliusBack](#corneliusback)
  - [CorneliusFront](#corneliusfront)
  - [Cornelius](#cornelius)
  - [DianaBack](#dianaback)
  - [DianaFront](#dianafront)
  - [Diana](#diana)
  - [FlorenceFront](#florencefront)
  - [Florence](#florence)
  - [FlorentFront](#florentfront)
  - [Florent](#florent)
  - [GozerBack](#gozerback)
  - [GozerFront](#gozerfront)
  - [Gozer](#gozer)
  - [HiFront](#hifront)
  - [Hi](#hi)
  - [HolmesFront](#holmesfront)
  - [Holmes](#holmes)
  - [HortensiaFront](#hortensiafront)
  - [Hortensia](#hortensia)
  - [HueyBack](#hueyback)
  - [HueyFront](#hueyfront)
  - [Huey](#huey)
  - [HugoBack](#hugoback)
  - [HugoFront](#hugofront)
  - [Hugo](#hugo)
  - [JaneBack](#janeback)
  - [JaneFront](#janefront)
  - [Jane](#jane)
  - [LucyFront](#lucyfront)
  - [Lucy](#lucy)
  - [LuminaBack](#luminaback)
  - [LuminaFront](#luminafront)
  - [Lumina](#lumina)
  - [LumiraBack](#lumiraback)
  - [LumiraFront](#lumirafront)
  - [Lumira](#lumira)
  - [LunetiusFront](#lunetiusfront)
  - [Lunetius](#lunetius)
  - [NobleBack](#nobleback)
  - [NobleFront](#noblefront)
  - [Noble](#noble)
  - [SimonBack](#simonback)
  - [SimonFront](#simonfront)
  - [Simon](#simon)
  - [TeaganBack](#teaganback)
  - [TeaganFront](#teaganfront)
  - [Teagan](#teagan)
  - [TristanBack](#tristanback)
  - [TristanFront](#tristanfront)
  - [Tristan](#tristan)
  - [UmaBack](#umaback)
  - [UmaFront](#umafront)
  - [Uma](#uma)
  - [UmbraBack](#umbraback)
  - [UmbraFront](#umbrafront)
  - [Umbra](#umbra)
  - [WahidBack](#wahidback)
  - [WahidFront](#wahidfront)
  - [Wahid](#wahid)



## Aaron
<ComponentDocs docs={jsdoc.jsdocAaron} example={AaronExample} />

## AaronBack
<ComponentDocs docs={jsdoc.jsdocAaronBack} example={AaronBackExample} />

## AaronFront
<ComponentDocs docs={jsdoc.jsdocAaronFront} example={AaronFrontExample} />

## Albert
<ComponentDocs docs={jsdoc.jsdocAlbert} example={AlbertExample} />

## AlbertFront
<ComponentDocs docs={jsdoc.jsdocAlbertFront} example={AlbertFrontExample} />

## Bee
<ComponentDocs docs={jsdoc.jsdocBee} example={BeeExample} />

## BeeFront
<ComponentDocs docs={jsdoc.jsdocBeeFront} example={BeeFrontExample} />

## Bella
<ComponentDocs docs={jsdoc.jsdocBella} example={BellaExample} />

## BellaBack
<ComponentDocs docs={jsdoc.jsdocBellaBack} example={BellaBackExample} />

## BellaFront
<ComponentDocs docs={jsdoc.jsdocBellaFront} example={BellaFrontExample} />

## Benjamin
<ComponentDocs docs={jsdoc.jsdocBenjamin} example={BenjaminExample} />

## BenjaminFront
<ComponentDocs docs={jsdoc.jsdocBenjaminFront} example={BenjaminFrontExample} />

## Bent
<ComponentDocs docs={jsdoc.jsdocBent} example={BentExample} />

## BentBack
<ComponentDocs docs={jsdoc.jsdocBentBack} example={BentBackExample} />

## BentFront
<ComponentDocs docs={jsdoc.jsdocBentFront} example={BentFrontExample} />

## Bibi
<ComponentDocs docs={jsdoc.jsdocBibi} example={BibiExample} />

## BibiBack
<ComponentDocs docs={jsdoc.jsdocBibiBack} example={BibiBackExample} />

## BibiFront
<ComponentDocs docs={jsdoc.jsdocBibiFront} example={BibiFrontExample} />

## Bob
<ComponentDocs docs={jsdoc.jsdocBob} example={BobExample} />

## BobBack
<ComponentDocs docs={jsdoc.jsdocBobBack} example={BobBackExample} />

## BobFront
<ComponentDocs docs={jsdoc.jsdocBobFront} example={BobFrontExample} />

## Breanna
<ComponentDocs docs={jsdoc.jsdocBreanna} example={BreannaExample} />

## BreannaBack
<ComponentDocs docs={jsdoc.jsdocBreannaBack} example={BreannaBackExample} />

## BreannaFront
<ComponentDocs docs={jsdoc.jsdocBreannaFront} example={BreannaFrontExample} />

## Brian
<ComponentDocs docs={jsdoc.jsdocBrian} example={BrianExample} />

## BrianBack
<ComponentDocs docs={jsdoc.jsdocBrianBack} example={BrianBackExample} />

## BrianFront
<ComponentDocs docs={jsdoc.jsdocBrianFront} example={BrianFrontExample} />

## Bruce
<ComponentDocs docs={jsdoc.jsdocBruce} example={BruceExample} />

## BruceBack
<ComponentDocs docs={jsdoc.jsdocBruceBack} example={BruceBackExample} />

## BruceFront
<ComponentDocs docs={jsdoc.jsdocBruceFront} example={BruceFrontExample} />

## Carlita
<ComponentDocs docs={jsdoc.jsdocCarlita} example={CarlitaExample} />

## CarlitaBack
<ComponentDocs docs={jsdoc.jsdocCarlitaBack} example={CarlitaBackExample} />

## CarlitaFront
<ComponentDocs docs={jsdoc.jsdocCarlitaFront} example={CarlitaFrontExample} />

## Carlton
<ComponentDocs docs={jsdoc.jsdocCarlton} example={CarltonExample} />

## CarltonBack
<ComponentDocs docs={jsdoc.jsdocCarltonBack} example={CarltonBackExample} />

## CarltonFront
<ComponentDocs docs={jsdoc.jsdocCarltonFront} example={CarltonFrontExample} />

## Cathrin
<ComponentDocs docs={jsdoc.jsdocCathrin} example={CathrinExample} />

## CathrinBack
<ComponentDocs docs={jsdoc.jsdocCathrinBack} example={CathrinBackExample} />

## CathrinFront
<ComponentDocs docs={jsdoc.jsdocCathrinFront} example={CathrinFrontExample} />

## Charlie
<ComponentDocs docs={jsdoc.jsdocCharlie} example={CharlieExample} />

## CharlieBack
<ComponentDocs docs={jsdoc.jsdocCharlieBack} example={CharlieBackExample} />

## CharlieFront
<ComponentDocs docs={jsdoc.jsdocCharlieFront} example={CharlieFrontExample} />

## Cornelius
<ComponentDocs docs={jsdoc.jsdocCornelius} example={CorneliusExample} />

## CorneliusBack
<ComponentDocs docs={jsdoc.jsdocCorneliusBack} example={CorneliusBackExample} />

## CorneliusFront
<ComponentDocs docs={jsdoc.jsdocCorneliusFront} example={CorneliusFrontExample} />

## Diana
<ComponentDocs docs={jsdoc.jsdocDiana} example={DianaExample} />

## DianaBack
<ComponentDocs docs={jsdoc.jsdocDianaBack} example={DianaBackExample} />

## DianaFront
<ComponentDocs docs={jsdoc.jsdocDianaFront} example={DianaFrontExample} />

## Florence
<ComponentDocs docs={jsdoc.jsdocFlorence} example={FlorenceExample} />

## FlorenceFront
<ComponentDocs docs={jsdoc.jsdocFlorenceFront} example={FlorenceFrontExample} />

## Florent
<ComponentDocs docs={jsdoc.jsdocFlorent} example={FlorentExample} />

## FlorentFront
<ComponentDocs docs={jsdoc.jsdocFlorentFront} example={FlorentFrontExample} />

## Gozer
<ComponentDocs docs={jsdoc.jsdocGozer} example={GozerExample} />

## GozerBack
<ComponentDocs docs={jsdoc.jsdocGozerBack} example={GozerBackExample} />

## GozerFront
<ComponentDocs docs={jsdoc.jsdocGozerFront} example={GozerFrontExample} />

## Hi
<ComponentDocs docs={jsdoc.jsdocHi} example={HiExample} />

## HiFront
<ComponentDocs docs={jsdoc.jsdocHiFront} example={HiFrontExample} />

## Holmes
<ComponentDocs docs={jsdoc.jsdocHolmes} example={HolmesExample} />

## HolmesFront
<ComponentDocs docs={jsdoc.jsdocHolmesFront} example={HolmesFrontExample} />

## Hortensia
<ComponentDocs docs={jsdoc.jsdocHortensia} example={HortensiaExample} />

## HortensiaFront
<ComponentDocs docs={jsdoc.jsdocHortensiaFront} example={HortensiaFrontExample} />

## Huey
<ComponentDocs docs={jsdoc.jsdocHuey} example={HueyExample} />

## HueyBack
<ComponentDocs docs={jsdoc.jsdocHueyBack} example={HueyBackExample} />

## HueyFront
<ComponentDocs docs={jsdoc.jsdocHueyFront} example={HueyFrontExample} />

## Hugo
<ComponentDocs docs={jsdoc.jsdocHugo} example={HugoExample} />

## HugoBack
<ComponentDocs docs={jsdoc.jsdocHugoBack} example={HugoBackExample} />

## HugoFront
<ComponentDocs docs={jsdoc.jsdocHugoFront} example={HugoFrontExample} />

## Jane
<ComponentDocs docs={jsdoc.jsdocJane} example={JaneExample} />

## JaneBack
<ComponentDocs docs={jsdoc.jsdocJaneBack} example={JaneBackExample} />

## JaneFront
<ComponentDocs docs={jsdoc.jsdocJaneFront} example={JaneFrontExample} />

## Lucy
<ComponentDocs docs={jsdoc.jsdocLucy} example={LucyExample} />

## LucyFront
<ComponentDocs docs={jsdoc.jsdocLucyFront} example={LucyFrontExample} />

## Lumina
<ComponentDocs docs={jsdoc.jsdocLumina} example={LuminaExample} />

## LuminaBack
<ComponentDocs docs={jsdoc.jsdocLuminaBack} example={LuminaBackExample} />

## LuminaFront
<ComponentDocs docs={jsdoc.jsdocLuminaFront} example={LuminaFrontExample} />

## Lumira
<ComponentDocs docs={jsdoc.jsdocLumira} example={LumiraExample} />

## LumiraBack
<ComponentDocs docs={jsdoc.jsdocLumiraBack} example={LumiraBackExample} />

## LumiraFront
<ComponentDocs docs={jsdoc.jsdocLumiraFront} example={LumiraFrontExample} />

## Lunetius
<ComponentDocs docs={jsdoc.jsdocLunetius} example={LunetiusExample} />

## LunetiusFront
<ComponentDocs docs={jsdoc.jsdocLunetiusFront} example={LunetiusFrontExample} />

## Noble
<ComponentDocs docs={jsdoc.jsdocNoble} example={NobleExample} />

## NobleBack
<ComponentDocs docs={jsdoc.jsdocNobleBack} example={NobleBackExample} />

## NobleFront
<ComponentDocs docs={jsdoc.jsdocNobleFront} example={NobleFrontExample} />

## Simon
<ComponentDocs docs={jsdoc.jsdocSimon} example={SimonExample} />

## SimonBack
<ComponentDocs docs={jsdoc.jsdocSimonBack} example={SimonBackExample} />

## SimonFront
<ComponentDocs docs={jsdoc.jsdocSimonFront} example={SimonFrontExample} />

## Teagan
<ComponentDocs docs={jsdoc.jsdocTeagan} example={TeaganExample} />

## TeaganBack
<ComponentDocs docs={jsdoc.jsdocTeaganBack} example={TeaganBackExample} />

## TeaganFront
<ComponentDocs docs={jsdoc.jsdocTeaganFront} example={TeaganFrontExample} />

## Tristan
<ComponentDocs docs={jsdoc.jsdocTristan} example={TristanExample} />

## TristanBack
<ComponentDocs docs={jsdoc.jsdocTristanBack} example={TristanBackExample} />

## TristanFront
<ComponentDocs docs={jsdoc.jsdocTristanFront} example={TristanFrontExample} />

## Uma
<ComponentDocs docs={jsdoc.jsdocUma} example={UmaExample} />

## UmaBack
<ComponentDocs docs={jsdoc.jsdocUmaBack} example={UmaBackExample} />

## UmaFront
<ComponentDocs docs={jsdoc.jsdocUmaFront} example={UmaFrontExample} />

## Umbra
<ComponentDocs docs={jsdoc.jsdocUmbra} example={UmbraExample} />

## UmbraBack
<ComponentDocs docs={jsdoc.jsdocUmbraBack} example={UmbraBackExample} />

## UmbraFront
<ComponentDocs docs={jsdoc.jsdocUmbraFront} example={UmbraFrontExample} />

## Wahid
<ComponentDocs docs={jsdoc.jsdocWahid} example={WahidExample} />

## WahidBack
<ComponentDocs docs={jsdoc.jsdocWahidBack} example={WahidBackExample} />

## WahidFront
<ComponentDocs docs={jsdoc.jsdocWahidFront} example={WahidFrontExample} />

</DocusaurusDoc>