Package Exports

polymorphui/_commonjsHelpers-CXUWDbkB
polymorphui/accordion
polymorphui/arrow-right-0qHF4dFO
polymorphui/badge
polymorphui/breadcrumbs
polymorphui/button
polymorphui/check-CtX5BhSk
polymorphui/checkbox
polymorphui/context-menu
polymorphui/date-picker
polymorphui/dialog
polymorphui/input
polymorphui/input-helpers
polymorphui/pagination
polymorphui/polymorphui-provider
polymorphui/popup
polymorphui/radio-group
polymorphui/select
polymorphui/spinner
polymorphui/switch
polymorphui/tabs
polymorphui/text
polymorphui/textarea
polymorphui/tooltip
polymorphui/types
polymorphui/use-query-param
polymorphui/use-query-params
polymorphui/utils
polymorphui/variant

Readme

PolymorphUI

pol·y·morph (noun) An organism, inorganic object or material which takes various forms.

PolymorphUI is a collection of variant-based UI components built using TailwindCSS. The component variants are TailwindCSS class strings that you can customize, then use in your code.

Installation

Install the PolymorphUI components and CLI using the following command:

# NPM
npm install --save-dev polymorphui
# Yarn
yarn add --dev polymorphui

Getting Started

Getting started with PolymorphUI is the simplest thing ever:

Define the component variants and wrap your app with the PolymorphUiProvider

import App from "./app";
import { PolymorphUiProvider } from "polymorphui/polymorphui-provider";
import type { ComponentVariants } from "polymorphui/variant";
import { createRoot } from "react-dom/client";

const variants: ComponentVariants = {
  text: {
    replaceDefault: "text-gray-600 tracking-wide",
    heading: "text-5xl font-medium text-black",
    small: "text-sm",
    /* Other text variants (As many as you want) */
  },
  button: {
    secondary: "bg-orange-500 hover:opacity-85",
    /* Other button variants (As many as you want) */
  },
  /* Other component variants */
};

createRoot(document.getElementById("root")!).render(
  <BrowserRouter>
    <PolymorphUiProvider variants={variants}>
      <App />
    </PolymorphUiProvider>
  </BrowserRouter>,
);

Use the replaceDefault key to replace the default class names (essentially, start styling from scratch)

Use the appendDefault key to add class names to the default class names

Usage

import { Text } from "polymorphui/text";

<Text>Default text variant</Text>;
<Text variant="heading">Heading text variant</Text>;
<Text variant="small">Small text variant</Text>;

Components

PolymorphUI exports the following components:

Component	Description	Docs
`Accordion`	A component which shows and hides sections of related content on a page	View docs
`Badge`	A component which displays a badge next to an anchor element/component	View docs
`Breadcrumbs`	A component which displays the current navigation using a hierarchy of links	View docs
`Button`	A control component which triggers an action	View docs
`Checkbox`	An input component which toggles between two states	View docs
`ContextMenu`	A component which displays action buttons related to a component	View docs
`DatePicker`	An input component which allows entry or selection of a date	View docs
`Dialog`	A component which displays content over the primary window	View docs
`Input`	Base user input component	View docs
`Pagination`	A component which displays pagination buttons for a list of items	View docs
`Popup`	A component which displays popup content when the trigger is activated	View docs
`RadioGroup`	An input component which allows a single selection from a list of options	View docs
`Select`	An input component which allows a single or multiple selections from a list of options	View docs
`Spinner`	A component which indicates that an operation is in progress	View docs
`Switch`	An input component which toggles between two states	View docs
`Tabs`	A component which displays a single tab panel based on the active tab	View docs
`Text`	A component to display standardized text	View docs
`TextArea`	Textarea component with auto-resize capability	View docs
`Tooltip`	A component which displays text info about another component when hovered	View docs

Hooks

PolymorphUI exports the following hooks:

Hook	Description	Docs
`useQueryParam`	A hook which monitors and updates a single query parameter	View docs
`useQueryParams`	A hook which monitors and updates multiple query parameters	View docs

Contributors

Kwame Opare Asiedu (Author)

Changelog

0.13.1
- Fixed initial value resolution bug in useQueryParams hook
0.13.0
- Added optional itemsClassName prop to Select component
- Added useQueryParams hook
0.12.0
- Added disabled prop to Tooltip component to disable popup
- Added disabled prop to Badge component to disable popup
0.11.0
- Added DatePicker component
- Added polymorphism to <DialogContent> component in Dialog through the as prop
0.10.0
- Added Breadcrumbs component
- Fixed bug causing <SelectItem> with empty string value not to be highlighted when Select's value is an empty string
- Fixed type of children prop of Select component
0.9.0
- Fixed bug causing incorrect dropdown placement in Select component when used in a dialog
0.7.0
- Added Pagination component
- Added useQueryParam hook
- Replaced default key in component variants objects with replaceDefault and appendDefault which replace and addon to the default class names respectively
- Fixed z-index class names for Dialog and Select components
0.6.0
- Refactored library to use provider pattern for component variants
0.5.0
- Added Badge component
- Named all forwardRef components to identify components in React devtools
0.3.1
- Added Accordion component