DotStyleb1.3

Introduction

Explore our collection of reusable UI components, build your own design systems, and create your own components.

How does it work

One of the issues with building components can be the design process itself. Designing from scratch, staying consistent and making sure the design is accessible can be tough. Furthermore, the translation of design systems to code, as well as creating custom components following a design pattern can be confusing. These are the issue we aim to solve.

In short, this app currently has 3 features:

  • React + Tailwind Component Library
    • For example: alerts, modals, toasts...You can browse our components from the left nav and copy their code to add them to your app. You can also ask AI for edits prior to copying.
  • Create Design Systems with basic components
    • Design systems contain input, buttons, cards, text variants, icons and badges and divs. Create your own styles and convert them into easy to use and familiar CSS classes.
  • Component Builder
    • Type code, use AI chat, or upload an image to create custom components in our build tool.The code can then be copied into your app. The build tool will also render any custom classes you have made in your design system.

    Our component library is free to use. However, we encourage you to create your own components using our CSS classes, your own CSS classes, or the builder.

    Why Tailwind?

    Tailwind CSS is a utility-first CSS framework designed to streamline and simplify the process of styling web applications. Tailwind CSS simplifies styling by providing a set of pre-defined utility classes that directly apply styles to HTML elements. Another bonus is the rather tiny CSS build size.

    While some may find it restrictive, the pre-defined classlist nature of Tailwind actually encourages a more consistent style throughout your app, rather that falling into the trap of having extremely specific or one-case CSS values that may occur with traditional CSS styling. It also permits quick implementation of mobile responsiveness, dark mode, and pseudo states.

    Always remember, a great website is one that is consistent throughout, easy for your users to view and navigate, and one which is accessible to all types of users. Tailwind helps you achieve this.

    FAQ

    Our component library is created with React and Tailwind, but our Design System tool uses pure Tailwind @apply styles, so it is not locked to any framework. The Build tool natively supports coding in React with Tailwind, but will render HTML with Tailwind as well.

    Nope! All our components, premium Blocks, AI generated components, and Themes are free to use in personal or commercial projects.

    As of now, all our premade components are written in JavaScript. We may add TypeScript versions in the future, given enough demand or support from the community. Saying this, conversion to TypeScript should be fairly easy, as our components are not complex.

    No! Unless you have a class with the same name, our styles will not clash with your CSS. If they do, consider adding a prefix to our classes. Please be careful when adding more classes on top of our classes, as you may have duplicated styles.