First Steps

Here you will learn how to start using the library, along with some considerations for its implementation.

Quickstart

Let's import and implement a component from the library into your own components. Try to import any component from the library into your React component and add their necessary attributes.

In this example, we are importing the Button component, as well as an "Icon", which consist of an svg image. We are specifying the variant and the text of the button.

    
       
 import { Button } from "cloth-ui"; 
 import Icon from "./icon"; 
 
 export const QuickStart = () => { 

  return ( 

    <> 

      <Button variant="primary" text="Click Here" icon={Icon} /> 

    </> 

  ); 
 }; 
 
    
  

Considerations

This project uses Tailwind CSS on the back, with dark mode theme functionality. That means that it already has styles applied with their variants, and each of them detects if there is a "dark" class higher on the hierarchy. So whenever a "dark" class appears on the element containing the component from the library, it is gonna set the dark theme of the component.

You can add a small system or context to add and remove the "dark" class on the body element, for example.

Start building

You can now start using the components and providers that the library offers.