Live demo Storybook 🔎

Installment

npm install react-primer

yarn add react-primer

Components

Icons 😎

Usage

import { Icons } from "react-primer";
import * as Icons from "react-primer/icons";
import { Icn } from "react-primer/icons";

Components

Octicons

<Icons.IcnLogoGithub height="64" color="#28A745" />;

Navigation 🔮

Usage

import { Navigation } from "react-primer";
import Navigation from "react-primer/navigation";
import { NavigationType } from "react-primer/navigation";

Components

Menu

<Navigation.Menu>
    <Navigation.MenuItem href="#">
        <Icons.IcnCalendar />
        {"This"}
    </Navigation.MenuItem>
    <Navigation.MenuItem href="#">{"is"}</Navigation.MenuItem>
    <Navigation.MenuItem href="#">
        <Icons.IcnCode />
        {"a"}
    </Navigation.MenuItem>
    <Navigation.MenuItem href="#" current>
        <Icons.IcnCloudDownload />
        {"menu"}
    </Navigation.MenuItem>
</Navigation.Menu>;

Underline

<Navigation.Underline>
    <Navigation.UnderlineItem href="#">{"This"}</Navigation.UnderlineItem>
    <Navigation.UnderlineItem href="#">{"is"}</Navigation.UnderlineItem>
    <Navigation.UnderlineItem href="#">{"an"}</Navigation.UnderlineItem>
    <Navigation.UnderlineItem href="#" current>
        <Icons.IcnCode height="14" />
        {"underline"}
        <Counter count="13" />
    </Navigation.UnderlineItem>
    <Navigation.UnderlineActionGroup>
        <ButtonLink.Default text="Action" />
    </Navigation.UnderlineActionGroup>
</Navigation.Underline>;

Tabs

<Navigation.Tabs>
    <Navigation.TabItem href="#">{"Some"}</Navigation.TabItem>
    <Navigation.TabItem href="#" current>
        {"tabs"}
        <Counter count="6" />
    </Navigation.TabItem>
</Navigation.Tabs>;

Alerts ⚠️

Usage

import { Alert } from "react-primer";
import Alert from "react-primer/alert";
import { AlertType } from "react-primer/navigation";

Components

Success

<Alert.Success description="This is a success alert!" />;

Warning

<Alert.Warning description="This is a warning alert!" />;

Error

<Alert.Error description="This is an error alert!" />;

Avatars 🙋🏻

Usage

import { Avatar } from "react-primer";
import Avatar from "react-primer/avatar";
import { AvatarType } from "react-primer/avatar";

Components

Square

<Avatar.Square
    src="https://avatars3.githubusercontent.com/u/9919?v=3&s=144"
    width="42"
/>;

Square with Child

<Avatar.Square
    src="https://avatars3.githubusercontent.com/u/9919?v=3&s=144"
    child="https://avatars3.githubusercontent.com/u/9919?v=3&s=40"
    width="72"
/>;

Group

<Avatar.Group>
    <Avatar.GroupItem
        src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
        alt="@octocat"
    />
    <Avatar.GroupItem
        src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
        alt="@octocat"
    />
    <Avatar.GroupItem
        src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
        alt="@octocat"
    />
</Avatar.Group>;

Counters ⏲

Usage

import { Counter } from "react-primer";
import Counter from "react-primer/counter";

Components

Default

<Counter count="6" />;

Blankslates ◻️

Usage

import { Blankslate } from "react-primer";
import Blankslate from "react-primer/blankslate";

Components

Default

<Blankslate title="title" description="description" />;

Simple

<Blankslate title="Simple 👏" description="blankslate 🕶" simple />;

Buttons 🔘

Usage

import { Button } from "react-primer";
import Button from "react-primer/button";
import { ButtonType } from "react-primer/button";

Components

Default

<Button.Default onClick={() => {}} text="Default" />;

Primary

<Button.Primary onClick={() => {}} text="Primary" />;

Secondary

<Button.Secondary onClick={() => {}} text="Secondary" />;

Tertiary

<Button.Tertiary onClick={() => {}} text="Tertiary" />;

Danger

<Button.Danger onClick={() => {}} text="Danger" />;

Outline

<Button.Outline onClick={() => {}} text="Outline" />;

Disabled

<Button.Primary onClick={() => {}} text="Disabled" disabled />;

With Counter

<Button.Outline onClick={() => {}} text="Counter" count={12} />;

Small

<Button.Primary onClick={() => {}} text="Small" small />;

Group

<Button.Group>
    <Button.Default text="This" />
    <Button.Default text="is" />
    <Button.Default text="a" />
    <Button.Default text="Group" />
</Button.Group>;

Button Links 🔳

Usage

import { ButtonLink } from "react-primer";
import ButtonLink from "react-primer/button-link";
import { ButtonLinkType } from "react-primer/button-link";

Components

Default

<ButtonLink.Default text="Default" />;

Primary

<ButtonLink.Primary text="Primary" />;

Secondary

<ButtonLink.Secondary text="Secondary" />;

Tertiary

<ButtonLink.Tertiary text="Tertiary" />;

Danger

<ButtonLink.Danger text="Danger" />;

Outline

<ButtonLink.Outline text="Outline" />;

Disabled

<ButtonLink.Primary text="Disabled" disabled />;

With Counter

<ButtonLink.Outline text="Counter" count={12} />;

Small

<ButtonLink.Primary text="Small" small />;

Group

<ButtonLink.Group>
    <ButtonLink.Default text="This" />
    <ButtonLink.Default text="is" />
    <ButtonLink.Default text="a" />
    <ButtonLink.Default text="Group" />
</ButtonLink.Group>;