Links
Comment on page

Our components 💎

Combine these to create your own, it's a bit like having Lego pieces to play with. Save as Sketch Symbols and reuse locally or share with anyone in your team.

Grid & Layout Components

These are for setting up grids and layouts in Sketch. You create all of them in Sketch by creating Groups (⌘G) and renaming the groups accordingly.

{container}

Example of a {container} element
{container}
Creates a Bootstrap Container element. This is the outermost element in a Bootstrap grid.
Note: You can also have {container} elements inside of {col} elements (known as nesting).
Supports:
  • classes [ ]
  • Backgrounds {BG}
Since: v0.0.5

How to add in Sketch:

  1. 1.
    Create a text node (T)
  2. 2.
    Group that text node (⌘+G)
  3. 3.
    Rename group {container}
  4. 4.
    Delete text node or name it {text}

{container-fluid}

Example of a {container-fluid} element
{container-fluid}
Creates a Bootstrap Container-fluid element. This element (as opposed to {container}) always covers 100% of the available width (screensize or, if nested, the width of the parent {col} element)

Supports:

  • classes [ ]
  • Backgrounds {BG}
Since: v0.0.5

How to add in Sketch:

  1. 1.
    Create a text node (T)
  2. 2.
    Group that text node (⌘+G)
  3. 3.
    Rename group {container-fluid}
  4. 4.
    Delete text node or name it {text}

{row}

{row}
Creates a Bootstrap Row element. A {row} is a direct child to {container} or {container-fluid}. This element's height is always at least as high as the corresponding element in the Sketch document.

Supports:

  • classes [ ]
  • Backgrounds {BG}

Pro tip!

By adding the Bootstrap 4 class no-gutters you will remove gutters from child {col}.
Example:

{row} [no-gutters]

Since: v0.0.5

How to add in Sketch:

  1. 1.
    Create a text node (T)
  2. 2.
    Group that text node (⌘+G)
  3. 3.
    Rename group {row}
  4. 4.
    Delete text node or name it {text}

{col}

{col}
Creates a Bootstrap Column element. A {col} is a direct child to {row}. {col} can contain {container} or {container-fluid} elements (Known as nesting). It is within this element you place all your content.
Supports:
  • classes [ ]
  • Backgrounds {BG}
Since: v0.0.5

How to add in Sketch:

  1. 1.
    Create a text node (T)
  2. 2.
    Group that text node (⌘+G)
  3. 3.
    Rename group {col}
  4. 4.
    Delete text node or name it {text}

{group}

{group}
This is a structural component used as a helper to align it’s child-elements (vertically or horizontally). It supports classes, but not Sketch-styling.

Horizontally:

If you, within a {group} place X number of Sketch2React elements next to each other horizontally, {group} will make sure they end up horizontally in code. They will also be automatically centered vertically.
The remaining space (the difference/delta between the child-elements total width and the {group}’s own width) will be distributed evenly between the children.

Vertically:

If you, within a {group} place X number of Sketch2React elements stacked vertically in Sketch, {group} will make sure they end up vertically in code.
The remaining space (the difference/delta between the child-elements total height and the {group}’s own height) will be distributed evenly between the children.
Supports:
  • classes [ ]
Since: v0.6.0

{group-fixed}

{group-fixed}
This element is identical to {group} except that it always keeps the same width (taken from Sketch) even when you resize it’s parent component (e.g. a {col}).
Note! {group-fixed} is never wider that the size of it's parent element.
Supports:
  • classes [ ]
Since: v0.6.0

{div}

A generic component well suited for implementing things such as other grid systems (e.g. MaterialUI grid) or construct your own components!
Since: 1.6.4 pre-release

Basic Components

These are for common design tasks such as texts, images & backgrounds. You create all of them in Sketch by using the Shape Tools. Images you import.

{text}

{text}
The text-layers created in Sketch needs to be named {text} in order for the code app to find them and parse them properly. By default {text} generates an HTML paragraph tag.
You can set which kind of HTML element should be created by specifying e.g. {text.span}. Available types are:
{text.p} (same as default {text}) - This creates an HTML paragraph tag
{text.p}
{text.span} - This creates an HTML span tag
{text.span}
Supports: Text styles

{image}

{image}
Creates an image with a responsive size. It scales according to available width.
Supports:
  • classes [ ]
Since: v0.0.5
ProTip! Make sure to export/reimport your assets at the @2x resolution so that you don't get fuzzy edges on retina resolution screens.

{image-fixed}

{image-fixed}
Creates an image with fixed width and height (taken from Sketch).
Supports:
  • classes [ ]
Since: v0.0.5

{image-external}

{image-external}
Host images, GIFs and even animated SVGs externally. Download these .sketchfiles and grab the component
Supports:
  • classes [ ]
Since: v2021.2.7

{rectangle}

The {rectangle} component is perfect for quick wireframing
{rectangle}
Creates a HTML-div element that is 100% of it's parent elements height and 100% width of it's parent element. This element's height is always at least as high as the corresponding element in the Sketch document.
By adding the Bootstrap class [rounded-circle] to the {rectangle} you'll get a rounded circle.
{rectangle} [rounded-circle]
This is a Sketch "Rectangle"-Shape
Pro tip! This is an awesome way to create responsive wireframes 🎉
Supports:
  • classes [ ]
Since: v0.0.55

{BG}

{BG}
Can be a rectangle or an image.
Pro tip! Fill the {BG} with a nice linear gradient for really nice website backgrounds that are super lightweight in size. Use {container-fluid} and put the {BG} like below:
Since: v0.0.5
Supports: Layer styles

{oval}

{oval}
Using the O inside of Sketch you can create an oval element.
Supports:
  • classes [ ]
Since: v0.60

Interactive Components

These are all of our interactive components like buttons, navigation, forms. These are a bit more complex but still use only native Sketch tools. Please refer to our many demo files and study our interactive components.

{button-primary} (Symbol)

{button-primary}
Creates a Bootstrap primary button element. You need to use the symbol Primary-button from the Sketch demo-document!
Supports:
  • classes [ ]
  • Backgrounds {BG}
Since: v0.0.5

{button-secondary} (Symbol)

{button-secondary}
Creates a Bootstrap secondary button element. You need to use the symbol Secondary-button from the Sketch demo-document!
Supports:
  • classes [ ]
  • Backgrounds {BG}
Since: v0.0.5

{button-submit} (Symbol)

{button-submit}
Creates a Bootstrap-style submit button. This is used for {form}.
Supports:
  • classes [ ]
  • Backgrounds {BG}
Since: v0.0.55

Form (Symbol)

Creates an HTML-form. Use the Form-symbol from the demo-document as reference.
Since: v0.0.55

{form}

Use the Form-symbol from the demo-document as reference.
contains: {button-submit}, {form-group}, {attribute.action}, {attribute.method}
{form}
Since: v0.0.55

{form-group}

Use the Form-symbol from the demo-document as reference.
contains: {text}, {input}
{form-group}
Since: v0.0.55

{input} (Symbol)

Creates an HTML text-input field.
Supports:
  • classes [ ]
  • Backgrounds {BG}
Since: v0.0.55
{navbar-light}
Creates a Bootstrap Navbar element.
contains: {nav}
Supports:
  • classes [ ]
  • Backgrounds {BG}
  • Breakpoints (xs, sm, md, lg, xl) See cheetsheet for details.
Since: v0.0.5
Updates: v0.0.55 - Now possible to style
{navbar-dark}
Creates a Bootstrap Navbar element.
contains: {nav}
Supports:
  • classes [ ]
  • Backgrounds {BG}
  • Breakpoints (xs, sm, md, lg, xl) See cheetsheet for details.
Since: v0.0.5
Updates: v0.0.55 - Now possible to style
{nav}
Creates a Bootstrap Nav element. Contains one or more {nav-item} and {nav-item-active} elements.
contains: {nav-item}, {nav-item-active}
Supports:
  • classes [ ]
  • Backgrounds {BG}
Since: v0.0.5
Updates: v0.0.55 - Now possible to style
{nav-item}
Creates a navigation-link (HTML [a] tag). You need to use the symbol nav-item from the Sketch demo-document!
Since: v0.0.5
Updates: v0.0.55 - Now possible to style
{nav-item-active}
Creates an active-style navigation-link (HTML [a] tag). You need to use the symbol nav-item-active from the Sketch demo-document!
Since: v0.0.5
Updates: v0.0.55 - Now possible to style
{link} is awesome! Link anything to anywhere 👍🎆
{link}
Link component that give you the ability to link anything to anywhere.
Since: v1.6.3 pre-release

Animation Components

These are all of our animation components that really expands what you can do with our framework in forms of interactivity.

{Haiku} (Symbol)

Enables the ability to add interactive animations made with Haiku Animator to Sketch2React.
Since: v1.5

{Lottie} (Symbol)

Enables the ability to add interactive animations made in the Lottie animation format.
Since: v1.5

Other

Here's those that are hard to categorise 😸🌵

{externalasset.css}

{externalasset.css}
Links to external assets such as fonts or your own custom style-sheets.

How to add in Sketch:

  1. 1.
    Create a text node (T)
  2. 2.
    Rename text node in the Layer List to {externalasset.css}
  3. 3.
    In the text node itself, enter the url to the external asset
  4. 4.
    Copy+paste this to each page that uses the external assets
When in doubt, use the demo document as a reference :)
Since: v0.0.5

{externalasset.js}

It is now possible to add your own javascript-files to your HTML-exports. This adds a new dimension of interactivity to your HTML-exports!
Since: v1.6.3 pre-release

Fluid fonts

Pro tip! By adding the class js-font-fluid-12 you will have fluid font-size. The last part (12) refers to the number of px the font will span between. This is also dependent of the artboard size.

First example

  • You have a mobile-size artboard (576px wide).
  • You have a {text} with font-size 18px.
  • You have a {text} with the class js-font-fluid-10
{text} [js-font-fluid-10]
The font-size will then flow between 18px at the smallest screen-size and 28px at the largest screen-size.

Second example

  • You have a desktop-size artboard (>576px wide).
  • You have a {text} with front-size 18px.
  • You have a {text} with the class js-font-fluid-12
{text} [js-font-fluid-12]
The font-size will then flow between 6px at the smallest screen-size and 18px at the largest screen-size.
Supports:
  • classes [ ]
Since: v0.0.5
Updates: v0.0.55 - Fluid font support