@pinax/ui
v1.2.0
Published
Pinax UI Library
Downloads
6
Keywords
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/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
- [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 build
Storybook
$ storybook build
$ storybook dev -p 6006
Testing
$ bun test