@omkarwarik1204/omkar-ui

A small collection of polished, animated React components — built with TypeScript and Tailwind CSS, shipped with full type declarations and zero runtime dependencies beyond React.

Currently includes:

• DynamicIslandNavbar — a floating, Apple-style navbar that stretches smoothly on hover
• FAQAccordion — an accessible, animated accordion for FAQs

Installation

npm install @omkarwarik1204/omkar-ui

Requires React 19+ in your project (it's a peer dependency — most React projects already have it).

Quick Start

1. Install

npm install @omkarwarik1204/omkar-ui

2. Import the components and the CSS

import { DynamicIslandNavbar, FAQAccordion } from '@omkarwarik1204/omkar-ui'
import '@omkarwarik1204/omkar-ui/style.css'

3. Use them

<DynamicIslandNavbar />
<FAQAccordion />

You don't need Tailwind installed in your own project — all styles are bundled into the CSS file above.

DynamicIslandNavbar

A fixed, centered navbar pill that smoothly stretches outward on hover.

<DynamicIslandNavbar
  brand="Omkar"
  links={[
    { label: 'Home', href: '#home' },
    { label: 'Projects', href: '#projects' },
  ]}
  ctaHref="https://github.com/omkarwarik02"
/>

Props

| Prop | Type | Default | Description | |-------------|---------------------------------------|----------------|-------------------------------------------------------| | brand | string | "Brand" | Text shown on the left of the pill (your name/logo). | | links | { label: string; href: string }[] | 4 sample links | The center navigation links. | | ctaHref | string | "#" | URL for the right-side action item. | | ctaLabel | React.ReactNode | </> | Content shown on the right (text, icon, etc.). | | className | string | "" | Extra classes merged onto the pill — use this to override background, text color, or any other style. |

Custom background / theming

The navbar ships with a dark pill by default. To match it to your own site's background, pass Tailwind (or any CSS) classes via className — they're appended after the built-in styles, so they can override them:

{/* Light navbar */}
<DynamicIslandNavbar className="bg-white text-black" />

{/* Brand color */}
<DynamicIslandNavbar className="bg-indigo-600" />

Note: overriding bg-* changes the pill's background, but link/text colors (text-white/80 etc.) are set on inner elements and won't automatically flip. For a fully custom palette, fork the component or target it with your own CSS selector.

FAQAccordion

An accordion where one item is open at a time, with a smooth height animation and full keyboard/screen-reader accessibility (aria-expanded, aria-controls).

<FAQAccordion
  items={[
    { question: 'Do you ship internationally?', answer: 'Yes, worldwide.' },
    { question: 'What is your return policy?', answer: '30-day returns.' },
  ]}
/>

Props

| Prop | Type | Default | Description | |-------------|----------------------------------------------------|----------------|------------------------------------------------| | items | { question: string; answer: React.ReactNode }[] | 3 sample items | The list of question/answer pairs. | | className | string | "" | Extra classes merged onto the container. |

Custom background / theming

{/* Dark mode FAQ */}
<FAQAccordion className="bg-gray-900 divide-gray-700" />

Note: like the navbar, text colors on individual questions/answers (text-gray-900, text-gray-500) are set internally. className covers the container background and divider color; for full color overrides, target the component with your own CSS or fork it.

Minimal usage (no props)

Both components work out of the box with sensible defaults:

<DynamicIslandNavbar />
<FAQAccordion />

TypeScript

Types are bundled — full autocomplete and type-checking out of the box, no @types package needed.

License

MIT © Omkar Warik