BETA
Getting Started Create a component

Create a component

Go in the editor page to create a new component.

How the editor works

The editor consists of 4 resizable panels:

  • The code editor, which lets you develop a React component with JavaScript or TypeScript and TailwindCSS
  • The controls panel, which lets you play with the default exported component props
  • Visual rendering of the component
  • The console to view errors, warnings, logs, etc.

Code editor

The code editor is where you write your React component code. It supports JavaScript and TypeScript with TailwindCSS.

Structure of a component

The component need to start with an import statement for React. The editor can contain several components, but the one displayed will be the one exported by default.

For example, the following code will render a Button component:

import React from 'react';
 
const Button = ({ children }) => {
  return (
    <button className="bg-blue-500 text-white px-4 py-2 rounded">
      {children}
    </button>
  );
};
 
export default Button;

Make a demo of a component

Sometimes, you'll need to create a demo of a component that will only be used in uilabs. To do this, you can surround your component with comments containing @demo-only-start and @demo-only-end.

For example:

import React from 'react';
 
const Button = ({ children }) => {
  return (
    <button className="bg-blue-500 text-white px-4 py-2 rounded">
      {children}
    </button>
  );
};
 
export { Button };
 
// @demo-only-start
const Demo = () => {
  return (
    <Button>Click me</Button>
  );
};
 
export default Demo;
// @demo-only-end

You can also use the @demo-only comment to hide a line of code in the demo.

For example:

import React from 'react';
 
const Button = ({ children }) => {
  return (
    <button className="bg-blue-500 text-white px-4 py-2 rounded">
      {children}
    </button>
  );
};
 
export { Button };
 
// @demo-only
export default Button;

Header buttons

Click on the Format button to format the code with Prettier in the editor. (only visible when you are the component's author)

Click on the Settings button to display the settings panel. In the settings panel you can configure your language (JavaScript or TypeScript), add an npm library or configure your tabs size. (only visible when you are the component's author)

Click on the Copy code button to copy the code in the editor.

Click on the Maximize button to make the editor full screen.

NPM libraries

You can add NPM libraries to your component by clicking on the Settings button and then on the Add library button.

Controls

The controls panel lets you play with the default exported component props.

Props are recognized automatically, but you can add new props by clicking on the Add props button.

Component rendering

The component rendering panel displays the visual representation of the component.

Toolbar

The toolbar lets you:

  • Toggle between light and dark mode (dark mode add a dark class to the body tag)
  • Pick a color to change the background color of the component rendering panel (the color is theme-specific and saved)
  • Select a position to change the position of the component rendering panel
  • Toggle between Auto width and Full width to change the width of the container of the component

Console

The console panel displays errors, warnings, logs, etc.

CLINext