@pinax/ui v1.2.0

Pinax UI Library

This is a library of React components that are used in the PINAX ecosystem. It's built on top of multiple frameworks & tools.

The goal of the library is to be strict in its design and implementation, while also being flexible enough to be used in a variety of projects. It leverages conventions from major UI libraries such as MUI, while removing a lot of boilerplate and complexity. Effectively trading off some flexibility for simplicity, while remaining familiar.

Quickstart

$ npm install @pinax/ui

import React from "react";
import { Button } from "@pinax/ui";
import { BlogIcon } from "@pinax/ui/icons";

function handleClick() {
  console.log("Clicked!");
}

export default () => (
  <Button onClick={handleClick} startIcon={<BlogIcon />}>
    Click Me
  </Button>
);

Components

• Accordion
• Avatar
• Backdrop
• Badge
• Button
• Card
• Checkbox
• Chip
• Code
• CodeSnippet
• Confetti
• Container
• Copyright
• Divider
• Dropdown
• Grid
• Icon
• Input
• Link
• Loading
• Modal
• Pagination
• Progress
• RadioGroup
• Slider
• Snackbar
• Switch
• Table
• Tabs
• Tooltip
• User

Icons

• AnalyticsIcon
• BillingIcon
• BlogIcon
• CaretDownIcon
• CaretLeftIcon
• CaretRightIcon
• CaretUpIcon
• CopyIcon
• CoreIcon
• DeleteIcon
• DiscordIcon
• DocsIcon
• ExternalLinkIcon
• FirehoseIcon
• FirstPageIcon
• GatewayIcon
• GithubIcon
• GraphIcon
• HamburgerIcon
• HiddenIcon
• InternalLinkIcon
• LastPageIcon
• LinkIcon
• LinkedinIcon
• MailIcon
• NewIcon
• NftIcon
• PinaxIcon
• RecentIcon
• SearchIcon
• SortAscendingIcon
• SortDescendingIcon
• SortIcon
• SubstreamsIcon
• TimeseriesIcon
• TokenIcon
• TwitterIcon
• UploadIcon
• UserIcon
• VideoIcon
• VisibleIcon
• WebhookIcon
• YoutubeIcon

Build

$ npm run build

Storybook

$ storybook build
$ storybook dev -p 6006

Testing

$ bun test