Documentation

  • Building your first component
  • Managing design tokens
  • Version Control
  • Using Visly components in code
  • Styling layers
  • Designing Primitives
  • Interactive components
  • Props
  • Variants
  • Composition
  • Responsive design

Tutorials

  • Building stateful components
  • Migrating components from code
  • Integrate Visly with Next.js
  • Building an Avatar component
  • Using slots for dynamic content
  • Using variants to customize layout
  • Stacking layers in z-index

Documentation

Styling layers

Layers in Visly are the smallest building blocks for creating components. Layers can be added to a component and styled by selecting the layer and using the different controls in the right sidebar. Different layers may have different styling options available.

Text Layer, for example, can be used to insert some text to a component. The text layer has specific styles for changing the color, text style and text content.

Styling interactive states

For building components that are interactive, a component can be styled for each available interactive state. To style any of these states, first select that state in the dropdown and then apply styles. Interactive components.

Layers with props

The text layer also allows exposing its content as a prop. This can be done by clicking the diamond icon for the Text section. Props.

The root layer

All components have a top-level layer that correlates to the outermost container of the component. In order to build flexible, reusable components, it's encouraged to pass layout styles to the root layer of a component. This is easily done by configuring the style prop of any component. By exposing style in all Visly components, we also support css-in-JS libraries such as styled-components.

import { MyComponent } from 'visly'

<MyComponent style={{ flex: 1 }} />

// With styled-components
const StyledComponent = styled(MyComponent)`
	flex: 1;
`
<StyledComponent />

Row

A simple flex container that layouts its children in a row direction (Can be changed to a Column by changing the Layout style).

Column

A simple flex container that layouts its children in a column direction (Can be changed to a Row by changing the Layout style).

Spacer

A layer for creating space between other layers. This is what you want to use to create margins. Margin is not available as a style in Visly, instead Spacers should always be used.

Icon

A layer for displaying icons such as svg or png images that have been added as Managing design tokens. It supports exposing a prop for setting the icon source through code.

Image

A layer for displaying an image. The image layer always has a prop (defaults to imageSrc) that allows you to set the content to display through code.

Overlay

A container layer that can overlay other layers. It's useful when you want to show something on top of something else, or for example absolute position an icon within a parent layer.

Slot

A slot layer can be used to pass in other components through code. It always exposes a prop with the same name as the layer. Composition.

<MyComponent title="card title">
  <OtherComponent/>
</MyComponent>

Inner component

A layer that adds an inner component. Composition.

Imported component

Through the layer popover, in addition to layers, you can also import another component from your library. Composition.