Horizon UI Tailwind CSS React

To set up a local development environment with Horizon UI, ensure you have the NodeJS LTS version installed. Follow these steps to clone the repository, install dependencies, and launch the local development server.

1. Clone the repository
2. Install dependencies using npm
3. Start the local server

git clone https://github.com/horizon-ui/horizon-tailwind-react.git
npm install
npm start

The Auth layout uses a filtering mechanism to determine which routes to render. For a route to be included within the Auth layout's <Routes> block, its configuration object must have the layout property set to "/auth".

Example route configuration structure:

{ 
  path: 'sign-in', 
  component: <SignInPage />, 
  layout: '/auth' 
}

To ensure Tailwind CSS classes are automatically sorted and formatted according to best practices, configure Prettier to use the prettier-plugin-tailwindcss plugin. This is done by creating a prettier.config.js or .prettierrc.js file in the project root and adding the plugin to the plugins array.

module.exports = {
  plugins: [require("prettier-plugin-tailwindcss")],
};

The Progress component accepts the following props:

The Dropdown component is a wrapper used to create selection menus. It manages its own open/closed state and includes built-in logic to close the menu when a user clicks outside of the component's container.

It requires a button prop (the trigger element) and children (the menu content). You can also pass classNames for custom styling of the dropdown menu and an animation string to override the default transition behavior.

import Dropdown from "@horizon-ui/components/Dropdown";

<Dropdown
  button={<button>Click Me</button>}
  classNames="bg-white shadow-lg p-4"
  animation="transition-opacity duration-200"
>
  <ul>
    <li>Option 1</li>
    <li>Option 2</li>
  </ul>
</Dropdown>

The NftCard component is used to display individual NFT items. It accepts the following props:

• bidders: An array of image URLs representing the avatars of recent bidders.
• title: The name/title of the NFT.
• author: The name of the creator/author.
• price: The price of the NFT as a string.
• image: The main image URL for the NFT.

<NftCard
  bidders={[avatar1, avatar2, avatar3]}
  title="Abstract Colors"
  author="Esthera Jackson"
  price="0.91"
  image={NFt3}
/>

The TopCreatorTable component (imported as TopCreatorTable within the Marketplace view) is used to display a list of top creators. It requires two primary props:

• tableData: An array of objects containing the creator data (sourced from views/admin/marketplace/variables/tableDataTopCreators.json).
• columnsData: An object or array defining the table columns (sourced from views/admin/marketplace/variables/tableColumnsTopCreators).
• extra: A string for additional CSS classes (e.g., "mb-5").

import TopCreatorTable from "./components/TableTopCreators";
import tableDataTopCreators from "views/admin/marketplace/variables/tableDataTopCreators.json";
import { tableColumnsTopCreators } from "views/admin/marketplace/variables/tableColumnsTopCreators";

<TopCreatorTable
  extra="mb-5"
  tableData={tableDataTopCreators}
  columnsData={tableColumnsTopCreators}
/>

The Dashboard component serves as the default entry point for the Right-to-Left (RTL) version of the admin dashboard. It orchestrates several specialized components to create a comprehensive overview, including summary widgets, charts, tables, and task management tools.

Key sub-components used in this view include:

• Widget: Displays summary metrics with an icon, title, and subtitle.
• TotalSpent & WeeklyRevenue: Data visualization components for financial tracking.
• CheckTable: A simplified data table component.
• ComplexTable: A more detailed data table component.
• DailyTraffic & PieChartCard: Visual representations of traffic and distribution data.
• TaskCard & MiniCalendar: Task management and scheduling components.

import Dashboard from "src/views/rtl/default";

// Usage within an RTL layout
const App = () => {
  return <Dashboard />;
};

The Navbar component provides a sticky top navigation bar for the application. It includes a search input, notification dropdowns, dark mode toggling, and a profile dropdown.

To use it, you must provide the onOpenSidenav function (to handle mobile menu visibility) and the brandText string (to display the application name/breadcrumb).

import Navbar from "components/navbar";

// Inside your layout or page component
<Navbar 
  onOpenSidenav={() => console.log("Open Sidenav")}
  brandText="My Dashboard"
/>

The RTL component is a layout wrapper designed for Right-to-Left (RTL) language support. It automatically sets the document direction to rtl (document.documentElement.dir = 'rtl') and renders a layout containing an RTL-specific Sidebar, Navbar, and Footer.

It manages responsive sidebar visibility based on window width (closing the sidebar when width is below 1200px) and dynamically determines the active route name and secondary navbar visibility based on the provided routes configuration.

To use it, import the component and wrap your application routes. It accepts standard React props which are passed down to the Navbar component via {...rest}.

import RTL from "src/layouts/rtl";

// Usage within your router setup
function App() {
  return (
    <RTL>
      {/* Your application content or additional providers */}
    </RTL>
  );
}