@pbcomponents/react

NPM | Preview | @pbcomponents

Figma community | Behance

prosazhin basic components for react

UI component library for React with Typescript and Tailwind.

Installation

npm install @pbcomponents/react

Usage example

import { Button } from '@pbcomponents/react';

const Page = () => (
  <>
    <Button size='m' color='primary' theme='filled' onClick={() => {}}>
      Button
    </Button>
  </>
);

Components

| Component name | Import | Component preview and api | | :------------------- | :------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------- | | Button | import { Button } from '@pbcomponents/react'; | Link | | ButtonGroup | import { ButtonGroup } from '@pbcomponents/react'; | Link | | Badge | import { Badge } from '@pbcomponents/react'; | Link | | Tag | import { Tag } from '@pbcomponents/react'; | Link | | Checkbox | import { Checkbox } from '@pbcomponents/react'; | Link | | CheckboxGroup | import { CheckboxGroup } from '@pbcomponents/react'; | Link | | Switch | import { Switch } from '@pbcomponents/react'; | Link | | Radio | import { Radio } from '@pbcomponents/react'; | Link | | RadioGroup | import { RadioGroup } from '@pbcomponents/react'; | Link | | InlineRadio | import { InlineRadio } from '@pbcomponents/react'; | Link | | InlineRadioGroup | import { InlineRadioGroup } from '@pbcomponents/react'; | Link | | Input | import { Input } from '@pbcomponents/react'; | Link | | Textarea | import { Textarea } from '@pbcomponents/react'; | Link | | Select | import { Select } from '@pbcomponents/react'; | Link | | Search | import { Search } from '@pbcomponents/react'; | Link | | Field | import { Field } from '@pbcomponents/react'; | Link | | Dropdown | import { Dropdown } from '@pbcomponents/react'; | Link | | DropdownItem | import { DropdownItem } from '@pbcomponents/react'; | Link | | Tabs | import { Tabs } from '@pbcomponents/react'; | Link | | Tab | import { Tab } from '@pbcomponents/react'; | Link | | Collapse | import { Collapse } from '@pbcomponents/react'; | Link | | CollapseGroup | import { CollapseGroup } from '@pbcomponents/react'; | Link | | Alert | import { Alert } from '@pbcomponents/react'; | Link | | Dialog | import { Dialog } from '@pbcomponents/react'; | Link | | DialogProvider | import { DialogProvider } from '@pbcomponents/react'; | - | | useDialog | import { useDialog } from '@pbcomponents/react'; | - | | Notification | import { Notification } from '@pbcomponents/react'; | Link | | NotificationProvider | import { NotificationProvider } from '@pbcomponents/react'; | - | | useNotification | import { useNotification } from '@pbcomponents/react'; | - | | Headline | import { Headline } from '@pbcomponents/react'; | Link | | Container | import { Container } from '@pbcomponents/react'; | Link | | PBCProvider | import { PBCProvider } from '@pbcomponents/react'; | - |

Helpers

| Component name | Import | Component preview and api | | :------------- | :----------------------------------------------- | ------------------------------------------------------------------------------- | | Text | import { Text } from '@pbcomponents/react'; | Link | | Icon | import { Icon } from '@pbcomponents/react'; | Link | | Content | import { Content } from '@pbcomponents/react'; | Link |

Provider usage

This is a wrapper for the notification and dialog provider to avoid calling them separately.

import { PBCProvider } from '@pbcomponents/react';

const App = () => <PBCProvider notificationTop={48}>{children}</PBCProvider>;

Notification usage

import { NotificationProvider, PBCProvider } from '@pbcomponents/react';

const App = () => <NotificationProvider top={48}>{children}</NotificationProvider>;
// or
const App = () => <PBCProvider notificationTop={48}>{children}</PBCProvider>;

import { Button, useNotification } from '@pbcomponents/react';

const Component = () => {
  const { showNotification } = useNotification();

  return (
    <Button onClick={() => showNotification({ headline: 'Headline' }}>
      Button
    </Button>
  );
};

Dialog usage

import { DialogProvider, PBCProvider } from '@pbcomponents/react';

const App = () => <DialogProvider>{children}</DialogProvider>;
// or
const App = () => <PBCProvider>{children}</PBCProvider>;

import { Button, useDialog } from '@pbcomponents/react';

const Component = () => {
  const { showDialog } = useDialog();

  return (
    <Button onClick={() => showDialog({ children: <p>Dialog content</p> }}>
      Button
    </Button>
  );
};