DotStyleb1.3

Component Builder

Create your own components with images and chat.

How does it work?

1. Sending Messages / Images

Type your message in chat, then click send.

To upload an image, first click select image, then press the upload arrow.

When uploading an image, your whole code will be reset. Image processing functionality is designed to give you a head start on the UI, and not build upon existing UIs. Therefore, the best workflow is usually to upload an image first, if the starting code is desirable, continue to build it with your own code or chat.

2. Using own classes

If you are currently working on a design system, you can type the CSS class names you have created into the className for the required element, and the styles will be applied! To 'set' the current active design system, simply pressing the edit code button for it from the My Designs page will activate it.

3. Dark mode and responsive design

Switch between dark and light mode with the moon button in our header or footer.

To activate mobile and full screen views, press the icons in the button right corner of the component preview. You can create responsive designs with Tailwind's breakpoint prefixes. Learn More.

Rendering your React component

You can render react components for preview with the export default function notation:

export default function MyComponent () {
    return (
        <div>
        ...your code here...
        </div>
    )
}

If you wanted to render with props, use only function instead and add a JSX tag with the component name and props.

function MyComponent ({prop1, prop2}) {
    return (
        <div>
        {prop1} and {prop2}
        </div>
    )
}
<MyComponent prop1="value1" prop2="value2"   />

You may also use the const notation:

const MyComponent = ({prop1}) => {
    return (
        <div>
            {prop1}
        </div>
    )
}
<MyComponent prop1='value1'/>

Coding in HTML

While we do not natively support HTML, you can still write in HTML and view the preview. However be aware that the chat may attempt to convert it into a React component, and may use className instead of the HTML class attribute.

How to best use chat

Chat works well when you iterate small and concisely. You can ask it to edit anything, but being clear will give you better results.

Your questions could be like this:

  • "Create a subscription modal with send button".
  • "Add dark mode colors to this component. Use zinc colors."
  • "Make this component responsive"
  • "Change the color of the send button to blue"
  • "Add a black border to the modal card"

This app is a component builder, not a website page builder. Asking to create whole page layouts will produce unexpected results, especially given the small window to work with, which may make things cumbersome when having to switch to full screen view all the time.

If you find that chat has made a mistake, you can always hit ctrl+z to undo.

DotStyle Blocks

Blocks can be accessed by clicking Blocks in the top right of the navbar.

This is a premium feature. It contains many prebuilt UI blocks, complete with responsive design and dark mode colors. They are great for you to get a head start in your designs.

Blocks can be edited with code or AI to suit your style. They do not use our CSS class names and are pure Tailwind, providing absolute control over the styling.

Helpful Features

1. ctrl+z to undo and ctrl+y to redo code edits.

2. The editor (monaco editor) is very similar to VS code, in fact it is what VS code is built upon. You have a lot of the familiar actions like formatting code, refactoring multiple lines, autocomplete etc...

3. View all your components by clicking My Components on the left of the top navbar.

4. Change font size with the S and L buttons on the top navbar.