@pinax/ui
v1.2.0
Published
Pinax UI Library
Downloads
34
Readme
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/uiimport 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
- [x]
Accordion - [x]
Avatar - [x]
Backdrop - [x]
Badge - [x]
Button - [x]
Card - [x]
Checkbox - [x]
Chip - [x]
Code - [x]
CodeSnippet - [x]
Confetti - [x]
Container - [x]
Copyright - [x]
Divider - [x]
Dropdown - [ ]
Grid - [x]
Icon - [x]
Input - [x]
Link - [x]
Loading - [x]
Modal - [ ]
Pagination - [x]
Progress - [ ]
RadioGroup - [x]
Slider - [ ]
Snackbar - [x]
Switch - [x]
Table - [ ]
Tabs - [ ]
Tooltip - [ ]
User
Icons
- [x]
AnalyticsIcon - [x]
BillingIcon - [x]
BlogIcon - [x]
CaretDownIcon - [x]
CaretLeftIcon - [x]
CaretRightIcon - [x]
CaretUpIcon - [x]
CopyIcon - [x]
CoreIcon - [x]
DeleteIcon - [x]
DiscordIcon - [x]
DocsIcon - [x]
ExternalLinkIcon - [ ]
FirehoseIcon - [x]
FirstPageIcon - [x]
GatewayIcon - [x]
GithubIcon - [x]
GraphIcon - [x]
HamburgerIcon - [x]
HiddenIcon - [x]
InternalLinkIcon - [x]
LastPageIcon - [x]
LinkIcon - [x]
LinkedinIcon - [x]
MailIcon - [x]
NewIcon - [x]
NftIcon - [x]
PinaxIcon - [x]
RecentIcon - [ ]
SearchIcon - [x]
SortAscendingIcon - [x]
SortDescendingIcon - [x]
SortIcon - [x]
SubstreamsIcon - [x]
TimeseriesIcon - [x]
TokenIcon - [x]
TwitterIcon - [x]
UploadIcon - [x]
UserIcon - [x]
VideoIcon - [ ]
VisibleIcon - [x]
WebhookIcon - [x]
YoutubeIcon
Build
$ npm run buildStorybook
$ storybook build
$ storybook dev -p 6006Testing
$ bun test