Documentation
Components
React

React

Welcome to the React Components section of TailGrids documentation! Here, we'll explore everything you need to know about integrating and utilizing TailGrids React Components in your React projects.

Prepare to effortlessly integrate robust, pre-built TailGrids components into your React applications. Learn how to access, utilize, and customize them to expedite your development process.

react-banner

How to Access TailGrids React Components

To access TailGrids React Components:

Step #1: Visit the TailGrids Components Page (opens in a new tab).

Step #2: Browse through the available components or use the search functionality to find specific components.

Step #3: Choose the component to preview and click the React option to view code snippets.

react code

Step #4: Copy the React component code snippet to use.

How to Use TailGrids React Components

Using TailGrids React Components is straightforward:

  1. Paste: Paste the copied React component code snippet into your JSX file.
  2. Customize: Customize the component's attributes, classes, and content to fit your design.
  3. Save and Preview: Save your file and preview the changes in your web browser.

Let's get hands-on!

Example

In this example, we'll find a button component in TailGrids React components, copy its code, and integrate it into a React project.

  1. Search for "Button": On the TailGrids Components Page (opens in a new tab), use the search bar to find "button" components.
  2. Choose Your Button: Browse the results and select the button style that best suits your project's needs. Click on it to preview.
  3. Copy the Code: Ensure you have selected the "React" option and copy the provided React component code.
  4. Create a React Component: Continue after Step #5 of installing the React version; open a code editor and use the existing JSX component, or create a JSX file named Button.jsx (or any name you prefer).
import React from "react";
 
const DarkRoundedButton = () => {
  return (
    <button className="inline-flex items-center justify-center rounded-full border border-dark bg-dark px-7 py-3 text-center text-base font-medium text-white hover:border-body-color hover:bg-body-color disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5 dark:border-dark-2 dark:bg-dark-2">
      Get Started
    </button>
  );
};
 
export default DarkRoundedButton;
  1. Paste and Preview: Now**, p**aste the code you copied, and save the Button.jsx file. Then, import the button component into App.js, run the localhost (opens in a new tab) server, and open it in your web browser. Your button should be rendered on the page!

💡 Important Note: Ensure you've set up the TailGrids in your React project.

Customization: Now experiment by changing colors and text and using Tailwind CSS classes directly within the React component.

Let's create a stunning React project with TailGrids!

HTMLVue