@keslers/kui

A hyper-opinionated React component library built with Tailwind v4 and shadcn/ui.

Installation

npm install @keslers/kui

Usage

Import the stylesheet once in your entry file:

import "@keslers/kui/styles.css";

Then use components:

import { Layout, Header, Footer } from "@keslers/kui";

function App() {
  return (
    <Layout
      header={<Header logo="ACME" navItems={[{ label: "About", href: "/about" }]} />}
      footer={<Footer copyright={{ companyName: "ACME INC", companyUrl: "https://acme.com" }} />}
    >
      <main>Hello, World!</main>
    </Layout>
  );
}

Components

• Header — Sticky nav bar with logo, nav items, and a mobile drawer
• Footer — Bottom bar with links, social icons, copyright, and optional version
• Sidebar — Vertical nav with section titles, active states, and collapsible nesting
• Layout — Flex wrapper composing Header, content, and Footer
• IconWithBadge — Icon button with a numeric badge (e.g. cart)

See Storybook for full prop documentation and live examples.

Development

git clone https://github.com/keslertechnologies/kui.git
npm install
npm run storybook  # component explorer at localhost:6006

License

ISC