Ammy UI

Progressive ui tailwind based library.

Table of Contents

• Installation
• Usage
  • Card Examples
  • Button Examples
  • Form Component Examples
  • Modal Example
  • NavBar Example
  • Text Example

Installation

npm i @panditamey/ammyui

Card Examples

Basic Card

<Card
  content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
  title="Card Title"
/>

Featured Card

<Card
  content="This card is featured with additional information."
  featured
  title="Featured Card"
/>

Custom Image Card

<Card
  content="A card with a custom image."
  imageUrl="https://example.com/image.jpg"
  title="Image Card"
/>

Button Examples

Solid Button

<Button variant="solid">
  Button
</Button>

Outline Button

<Button variant="outline">
  Button
</Button>

Ghost Button

<Button variant="ghost">
  Button
</Button>

Form Component Examples

Text Input

<FormComponents
  placeholder="Insert text here"
  type="text"
/>

Password Input

<FormComponents
  placeholder="Password"
  type="password"
/>

Number Input

<FormComponents
  placeholder="Number"
  type="number"
/>

Date Input

<FormComponents
  placeholder="Date"
  type="date"
/>

Modal Example

Open Modal

<>
  <button
    className="bg-blue-500 text-white px-4 py-2"
    onClick={() => {}}
  >
    Open Modal
  </button>
  <Modal
    onClose={() => {}}
    title="Example Modal"
  >
    <p>
      This is the content of the modal.
    </p>
  </Modal>
</>

NavBar Example

My App NavBar

<NavBar
  links={[
    {
      href: '/',
      label: 'Home'
    },
    {
      href: '/about',
      label: 'About'
    },
    {
      href: '/contact',
      label: 'Contact'
    }
  ]}
  title="My App"
/>

Text Example

Custom Text Heading

<Text as="h1">
  lorum ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.
</Text>

TextBox

<TextBox
  onChange={() => {}}
  placeholder="Enter text..."
  value=""
/>