Leaves UI Web

Leaves UI Web is a collection of reusable UI components designed to be used in web applications. This package provides a set of well-crafted, ready-to-use components that can be easily integrated into your projects.

Installation

To install the leaves-ui-web package, run the following command:

npm install leaves-ui-web

or, if you prefer using Yarn:

yarn add leaves-ui-web

Configure Tailwind

Update tailwind.config.js:

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './node_modules/leaves-ui-web/src/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Usage

You can import and use the components in your project as follows:

javascript

import React from 'react';
import { Button, Navbar, Footer } from 'leaves-ui-web';

const App = () => (
  <div>
    <Navbar />
    <Button onClick={() => alert('Button clicked!')}>Click Me</Button>
    <Footer />
  </div>
);

export default App;

Available Components

Here's a list of all the components available in the leaves-ui-web package:

Button:

A customizable button component.

ArticleCards:

Displays articles in a card format.

ContributeGuidelinesSection:

A section to display contribution guidelines.

HeroBannerUseCases:

A banner for highlighting use cases.

CustomFilter:

A filter component with customizable options.

HeroContributeSection:

A section that encourages contributions.

LlmHeroSection:

A hero section designed for LLM content.

DataPoint:

Displays a key data point.

Navbar:

A navigation bar component.

DetailComponent:

A detailed view component.

DiscordSection:

A section for Discord community integration.

Cards:

A component for displaying link cards.

DropDown:

A dropdown menu component.

Carousel:

A carousel for displaying images or content.

ErrorPageBannerImage:

An image banner for error pages.

CassandraLinkSection:

A section highlighting Cassandra links.

EventCard:

A card component for events.

CommunitySection:

A section for community content.

Footer:

A footer component.

ToolsSocialLinks:

A section for displaying social media links related to tools.

ContactForm:

A customizable contact form.

Header:

A header component for the top of your pages.

ContactUsBanner:

A banner section for contact information.

TrainingSection:

A section highlighting training opportunities.

UseCaseCard:

A card component for showcasing use cases.

YoutubeSection:

A section for embedding YouTube content.

NewsLetterBox:

A subscription box for newsletters.

BuildingTeam:

A section to highlight team-building content.

ListingCards:

A component for listing items in a card format.

License

This package is licensed under the MIT License. See the LICENSE file for more details.

Contributing

Contributions are welcome! Please open an issue or submit a pull request if you have any ideas, improvements, or bug fixes.

for more detailED documentation please refer to the storybook