@statikly/funk

---

Unstyled, funktional components for React

📝 Table of Contents

• About
• Getting Started
• Usage

🧐 About

This project contains a set of unstyled, accessible components for React, designed to work with class-based style systems.

🏁 Getting Started

Installing

npm install @statikly/funk --save

Or

yarn add @statikly/funk

🎈 Usage

At the moment there is one component, TabGroup

Example

import { TabGroup } from '@statikly/funk';

function TabButton({ index, title }) {
  return (
    <TabGroup.Tab
      index={index}
      className="text-indigo-700 font-bold text-xs uppercase tracking-wider px-3 inline-block rounded-full mb-2 focus:outline-none focus:bg-indigo-200"
      activeClassName="bg-indigo-300"
      inactiveClassName="hover:bg-indigo-200"
    >
      {title}
    </TabGroup.Tab>
  );
}

export default function Vertical() {
  return (
    <TabGroup numTabs={2}>
      <div className="py-6 md:py-12 container mx-auto">
        <div className="p-8">
          <div className="text-center max-w-screen-md mx-auto">
            <h2 className="font-bold text-4xl lg:text-4xl leading-tight">
              A quick tour
            </h2>
            <p className="pt-4 text-gray-600 text-lg">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
              nec ex sed nulla.
            </p>
          </div>
          <TabGroup.TabList className="pt-8 grid grid-flow-col justify-center gap-3">
            <TabButton index={0} title="Copy &amp; paste" />

            <TabButton index={1} title="Casual fridays" />
          </TabGroup.TabList>

          <div className="pt-6 relative flex justify-center">
            <TabGroup.TabPanel
              index={0}
              as="img"
              className="absolute rounded shadow-xl transform transition-all duration-500"
              activeClassName="translate-y-0 opacity-1"
              inactiveClassName="opacity-0 translate-y-2"
              src="https://images.unsplash.com/photo-1583308148228-adac08432fc1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&h=450&q=80"
            />
            <TabGroup.TabPanel
              index={1}
              as="img"
              className="absolute rounded shadow-xl transform transition-all duration-500"
              activeClassName="translate-y-0 opacity-1"
              inactiveClassName="opacity-0 translate-y-2"
              src="https://images.unsplash.com/photo-1588769557939-76552854025b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&h=450&q=80"
            />
          </div>
        </div>
      </div>
    </TabGroup>
  );
}