Getting Started

Install and start using Looply components in minutes.

Install

Install the package via npm:

SHELL

npm install looply-comp-lib

Or with yarn:

SHELL

yarn add looply-comp-lib

Setup

1. Import the Looply stylesheet in your root layout (e.g. app/layout.tsx):

TSX

import "looply-comp-lib/styles.css";

2. Add the Tailwind source in your globals.css so Tailwind generates the utility classes used by the components:

CSS

@import "tailwindcss";
@source "../node_modules/looply-comp-lib/dist";

Both lines are required for components to render correctly.

Basic Usage

Import any component and use it directly:

TSX

import { Card, Buttons, Chat } from "looply-comp-lib";

export default function MyPage() {
  return (
    <div>
      <Card
        cards={[{
          cardStyle: "neu-pressed",
          headerText: "Hello",
          subHeaderText: "World",
          descriptionText: "My first Looply card.",
          buttons: [{ label: "Click me" }],
        }]}
      />

      <Buttons
        buttonObj={[
          { buttonText: "Flat", buttonType: "neu-flat" },
          { buttonText: "Raised", buttonType: "neu-raised" },
        ]}
      />

      <Chat
        title="My Bot"
        img="/bot.png"
        propt="Say hello"
        endpoint="/api/my-chat"
      />
    </div>
  );
}

Available Components

Card

Content cards with multiple styles

Buttons

Flat, raised, and pressed buttons

Chat

AI chat widget with custom endpoints

BarChart

Neumorphic bar charts

Calendar

Interactive date picker

Accordion

Collapsible content sections

Carousel

Image/text slider

Drawer

Drawing canvas component

DropDown

Dropdown menus

CalloutCard

Highlighted CTA cards

Toggle

On/off switch with three styles and sizes

Table

Data tables with neumorphic styling

TextArea

Multi-line text input with resize control

Recommended Project Structure

my-app/
├── app/
│   ├── globals.css        ← add @source here
│   ├── layout.tsx         ← import styles.css here
│   └── page.tsx           ← use components here
├── public/
├── .env.local             ← API keys go here
└── package.json

Environment Variables

If you're using the Chat component with your own API, store your keys in .env.local:

ENV

# .env.local
OPENAI_API_KEY=sk-your-key-here
# or
HF_TOKEN=hf_your-huggingface-token

Then reference them in your API route with process.env.OPENAI_API_KEY. Never expose secret keys to the client.