Zionix-ui

A package of React components to be used in conjunction with Tailwindcss. 🚧 Is under Construction!

THIS COMPONENT IS STILL BEING DEVELOPED, IF YOU WANT TO CONTRIBUTE YOU CAN CONTACT US.

Quick start

In your CSS global file, add variables for defining colors to replace the default customization. In nextJS make changes to the file globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --primary-color: #0284c7 !important;
  --primary-icon-bg: #f0f9ff !important;
  --primary-text: #fff !important;
  --primary-hover: #0c4a6e !important;

  --secondary-color: #94a3b8 !important;
  --secondary-text: #fff !important;
  --secondary-hover: #334155 !important;

  --danger-icon-bg: #ffe4e6 !important;
  --danger-color: #991b1b !important;
  --danger-text: #fff !important;

  --warning-icon-bg: #fef9c3 !important;
  --warning-color: #854d0e !important;
  --warning-text: #fff !important;

  --info-icon-bg: #dbeafe !important;
  --info-color: #1e40af !important;
  --info-text: #fff !important;

  --success-icon-bg: #dcfce7 !important;
  --success-color: #166534 !important;
  --success-text: #fff !important;

  --accent-color: #ec4899 !important;
}

`Text` component

<Text semiBold>Text 1</Text>
<Text semiBold large>Text 1</Text>
<Text semiBold extra>Text 1</Text>
<Text semiBold extraLarge>Text 1</Text>
<Text semiBold superLarge>Text 1</Text>
<Text semiBold superLarge>Text 1</Text>
<Text bold superLarge>Text 1</Text>
<Text thin superLarge>Text 1</Text>
<Text semiBold subtitle>Description text</Text>
<Text semiBold accent>Accent color</Text>

`Button` component

<Button primary>Default</Button>
<Button primary size='sm'>Small</Button>
<Button primary size='xs'>Extra-small</Button>

<Button primary disabled>Default</Button>
<Button primary disabled size='sm'>Small</Button>
<Button primary disabled size='xs'>Extra-small</Button>

<Button primary isLoading>Default</Button>
<Button primary size='sm' isLoading>Small</Button>
<Button primary size='xs' isLoading>Extra-small</Button>

<Button secondary>Default</Button>
<Button secondary size='sm'>Small</Button>
<Button secondary size='xs'>Extra-small</Button>

`Scrolling` component

<Scrolling>
  <div className="bg-slate-50 w-[220px] inline-block mr-4 shadow rounded-2xl hover:scale-105 ease-in-out duration-300">
    <img
      src="https://cdn.pixabay.com/photo/2017/12/15/13/51/polynesia-3021072_1280.jpg"
      className="rounded-2xl p-2"
      alt="image"
    />
  </div>

  <div className="bg-slate-50 w-[220px] inline-block mr-4 shadow rounded-2xl hover:scale-105 ease-in-out duration-300">
    <img
      src="https://cdn.pixabay.com/photo/2020/02/15/16/09/loveourplanet-4851331_1280.jpg"
      className="rounded-2xl p-2"
      alt="image"
    />
  </div>
</Scrolling>

`Avatar` component

<Avatar label="PG" mini accent />
<Avatar src="https://github.com/pablogeokar.png" />
<Avatar label="PG" />
<Avatar src="https://github.com/pablogeokar.png" shadow />
<Avatar src="https://github.com/zionixtecnologia.png" ring />
<Avatar label="ZN" secondary shadow />
<Avatar src="https://github.com/zionixtecnologia.png" ring accent />
<Avatar src="https://github.com/romatorres.png" large />
<Avatar src="https://github.com/romatorres.png" large ring />
<Avatar src="https://github.com/romatorres.png" large ring secondary />
<Avatar src="https://github.com/zionixtecnologia.png" large ring accent />

`Checkbox` component

<Checkbox label="Not Checked?" />
<Checkbox label="Default Checkbox?" checked />
<Checkbox secondary label="Secondary Checkbox?"/>
<Checkbox accent label="Accent Checkbox?" />

`Badge` component

<Badge color="blue">Blue</Badge>
<Badge color="blue" large>Blue</Badge>
<Badge color="blue" bordered>Blue</Badge>

<Badge color="dark">Dark</Badge>
<Badge color="dark" large>Dark</Badge>
<Badge color="dark" bordered>Dark</Badge>

<Badge color="red">Red</Badge>
<Badge color="red" large>Red</Badge>
<Badge color="red" bordered>Badge</Badge>

<Badge color="green">Green</Badge>
<Badge color="green" large>Green</Badge>
<Badge color="green" bordered>Green</Badge>

<Badge color="yellow">Yellow</Badge>
<Badge color="yellow" large>Yellow</Badge>
<Badge color="yellow" bordered>Yellow</Badge>

<Badge color="indigo">Indigo</Badge>
<Badge color="indigo" large>Indigo</Badge>
<Badge color="indigo" bordered>Indigo</Badge>

<Badge color="purple">Purple</Badge>
<Badge color="purple" large>Purple</Badge>
<Badge color="purple" bordered>Purple</Badge>

<Badge color="pink">Badge</Badge>
<Badge color="pink" large>Badge</Badge>
<Badge color="pink" bordered>Badge</Badge>

`Dropdown` component

<Dropdown.Root bordered>
  <Dropdown.Label>Select an option</Dropdown.Label>
  <Dropdown.Content>
    <Dropdown.Item onClick={() => alert("onClick Event")}>Item 1</Dropdown.Item>
    <Dropdown.Item href="http://www.google.com">Item 2</Dropdown.Item>
  </Dropdown.Content>
</Dropdown.Root>


<Dropdown.Root transparent>
    <Dropdown.Label>
      <Avatar mini src="https://github.com/pablogeokar.png" />
      Pablo George
    </Dropdown.Label>
    <Dropdown.Content>
      <Dropdown.Item onClick={() => alert("onClick Event")}>
        Click me
      </Dropdown.Item>
    </Dropdown.Content>
</Dropdown.Root>

`Skeleton` component

<div className="flex gap-4 max-w-[550px]">
  <div className="flex flex-col gap-1 justify-center items-center">
    <Skeleton.Avatar size={80} />
    <Skeleton.Row radius width={120} />
  </div>

  <div className="flex flex-col justify-center gap-4">
    <Skeleton.Row radius width={150} />
    <Skeleton.Row radiusMedium width={200} />
    <Skeleton.Row radiusLarge width={320} />
  </div>
</div>

`Select` component

<Select
  placeholder="Select a country..."
  name="country"
  defaultValue="canada"
  onChange={(value) => {
    console.log("Select country", value);
  }}
  options={[
    {
      label: "Brasil",
      value: "brasil",
      img: "https://flagpedia.net/data/flags/w580/br.webp",
    },
    {
      label: "Argentina",
      value: "argentina",
      img: "https://flagpedia.net/data/flags/w580/ar.webp",
    },
    {
      label: "Canadá",
      value: "canada",
      img: "https://flagpedia.net/data/flags/w580/ca.webp",
    },
  ]}
/>

`Card` component

<Card>Content</Card>
<Card transparent>Content</Card>
<Card gap2>Content</Card>
<Card gap4>Content</Card>
<Card gap6>Content</Card>
<Card flexRow>Content</Card>
<Card gap6 borderRadius='lg'>Content</Card>
<Card gap4 shadow='sm'>Content</Card>

`Input` component

<Input placeholder='your e-mail' mandatory />
<Input placeholder='your e-mail' label='E-mail' />
<Input placeholder='my secret password' label='Password' type="password" />
<Input placeholder='your e-mail' label='E-mail' icon={<Icon />} />
<Input placeholder='0,00' label='Value' type='currency' icon={<IconCurrency />} />
<Input placeholder='0,00' label='Value' type='currency' />

`Toggle` component

<Toggle name="admin" label="Is Admin?" onChange={HandleChange} />
<Toggle name="admin" label="Is Admin?" secondary />
<Toggle name="admin" label="Is Admin?" accent />
<Toggle name="admin" accent />
<Toggle name="admin" secondary />
<Toggle name="admin" checked={true} />

`Hr` component

<Hr />

`Tab` component

(
  <Tab.Root>
    <Tab.Tabs transparentCards>
      {/*transparentCards (optional)*/}
      <Tab.Item id="profile" active>
        <Icon />
        Profile
      </Tab.Item>
      <Tab.Item id="dashboard">Dashboard</Tab.Item>
      <Tab.Item id="settings">Settings</Tab.Item>
      <Tab.Item id="contacts">Contacts</Tab.Item>
    </Tab.Tabs>

    <Tab.Content idItem="profile">
      <p className="text-sm text-gray-500 dark:text-gray-400">
        This is some placeholder content the{" "}
        <strong className="font-medium text-gray-800 dark:text-white">
          Profile tab's associated content
        </strong>
        . Clicking another tab will toggle the visibility of this one for the next.
        The tab JavaScript swaps classNamees to control the content visibility and
        styling.
      </p>
    </Tab.Content>

    <Tab.Content idItem="dashboard">
      <p className="text-sm text-gray-500 dark:text-gray-400">
        This is some placeholder content the{" "}
        <strong className="font-medium text-gray-800 dark:text-white">
          Dashboard tab's associated content
        </strong>
        . Clicking another tab will toggle the visibility of this one for the next.
        The tab JavaScript swaps classNamees to control the content visibility and
        styling.
      </p>
    </Tab.Content>

    <Tab.Content idItem="settings">
      <p className="text-sm text-gray-500 dark:text-gray-400">
        This is some placeholder content the{" "}
        <strong className="font-medium text-gray-800 dark:text-white">
          Settings tab's associated content
        </strong>
        . Clicking another tab will toggle the visibility of this one for the next.
        The tab JavaScript swaps classNamees to control the content visibility and
        styling.
      </p>
    </Tab.Content>

    <Tab.Content idItem="contacts">
      <p className="text-sm text-gray-500 dark:text-gray-400">
        This is some placeholder content the{" "}
        <strong className="font-medium text-gray-800 dark:text-white">
          Contacts tab's associated content
        </strong>
        . Clicking another tab will toggle the visibility of this one for the next.
        The tab JavaScript swaps classNamees to control the content visibility and
        styling.
      </p>
    </Tab.Content>
  </Tab.Root>
)``;

`Form` example

<Card className="w-[420px] max-w-full">
  <Input
    placeholder="Informe o seu username"
    label="Username"
    mandatory
    icon={<Icon.User />}
  />
  <Input placeholder="Informe o seu e-mail" label="E-mail" type="email" />
  <Input
    placeholder="0,00"
    label="Currency Value"
    type="currency"
    icon={<Icon.Real />}
  />
  <Input placeholder="Informe o seu e-mail" label="Password" type="password" />

  <Toggle name="admin" label="Is Admin?" checked />

  <Checkbox label="Remember my password" checked />
</Card>

`Modal` component

const [open, setOpen] = useState(false)


<Modal.Root open={modal} setOpen={setModal}>
    <Modal.Header>
      <Modal.Icon danger>
        <Icon />
      </Modal.Icon>
      <Modal.Title label="Deactivate account" />
    </Modal.Header>

    <Modal.Text>
      Are you sure you want to deactivate your account? All of your data
      will be permanently removed. This action cannot be undone.
    </Modal.Text>

    <Modal.Footer cancelText="Abort">
      <Modal.Button onClick={() => alert("onClick Button Modal")} danger>
        Deactive
      </Modal.Button>
    </Modal.Footer>
</Modal.Root>

`ToastNotification` component

The first step is to add the component to your project's root page. Then you can add the useToastNotification hook to any page to call the toastMessage function for any action the developer deems necessary.

main.tsx or similar

<>
  <ToastNotification>
    <App />
  </ToastNotification>
</>

const toast = useToastNotification();

return (
  <div className="flex flex-wrap gap-2">
    <Button
      secondary
      onClick={() =>
        toast({
          title: "Danger Notification",
          description: "This is a simple notification",
          type: "danger",
        })
      }
    >
      Danger Notification
    </Button>

    <Button
      secondary
      onClick={() =>
        toast({
          title: "Success Notification",
          description: "This is a simple notification",
          type: "success",
        })
      }
    >
      Success Notification
    </Button>

    <Button
      secondary
      onClick={() =>
        toast({
          title: "Warning Notification",
          description: "This is a simple notification",
          type: "warning",
        })
      }
    >
      Warning Notification
    </Button>

    <Button
      secondary
      onClick={() =>
        toast({
          title: "Info Notification",
          description: "This is a simple notification",
          type: "info",
        })
      }
    >
      Info Notification
    </Button>

    <Button
      secondary
      onClick={() =>
        toast({
          title: "Default Notification",
          description: "This is a simple notification",
        })
      }
    >
      Default Notification
    </Button>
  </div>
);

`Table` component

const data = [
  {
    id: "0001",
    details: "Detail field",
    status: "Delivered",
    date: "01/01/2024",
    total: 1.99,
    img: "https://avatars.githubusercontent.com/u/18231436?v=4",
  },
  {
    id: "0002",
    details: "Detail field",
    status: "Travelling",
    date: "01/01/2024",
    total: 4.96,
    img: "https://avatars.githubusercontent.com/u/6181797?v=4",
  },
  {
    id: "0003",
    details: "Detail field",
    status: "Delivered",
    date: "01/01/2024",
    total: 74.96,
    img: "https://avatars.githubusercontent.com/u/140957791?v=4",
  },
  {
    id: "0004",
    details: "Detail field",
    status: "Not Status",
    date: "01/01/2024",
    total: 127.54,
    img: "https://avatars.githubusercontent.com/u/69631?v=4",
  },
];

/* The Best */
<Table.Root>
  <Table.Head labels={["No.", "Details", "Status", "Date", "Total"]} />
  <Table.Body
    data={data}
    fields={["id", "details", "status", "date", "total"]}
  />
</Table.Root>;

/* Complex */
<Table.Root>
  <Table.Head labels={["No.", "User", "Details", "Status", "Date", "Total"]} />
  <Table.Body
    data={data}
    fields={[
      { name: "id", color: "var(--primary-color)", bold: true },
      { name: "img", avatar: true },
      { name: "details" },
      {
        name: "status",
        badge: {
          color: "dark",
          bordered: true,
          conditions: [
            {
              color: "green",
              field: "status",
              operator: "equal",
              value: "Delivered",
            },
            {
              color: "yellow",
              field: "status",
              operator: "equal",
              value: "Travelling",
            },
          ],
        },
      },
      { name: "date" },
      { name: "total", align: "right", color: "#475569" },
    ]}
  />
</Table.Root>;

/* Another way */
<Table.Root>
  <Table.Head labels={["No.", "Details", "Status", "Date", "Total"]} />
  <Table.Body>
    <Table.Row color="light">
      <Table.Data>0001</Table.Data>
      <Table.Data>My details</Table.Data>
      <Table.Data>Delivered</Table.Data>
      <Table.Data>01/01/2024</Table.Data>
      <Table.Data align="right">$ 7.99</Table.Data>
    </Table.Row>

    <Table.Row color="dark">
      <Table.Data>0001</Table.Data>
      <Table.Data>My details</Table.Data>
      <Table.Data>Delivered</Table.Data>
      <Table.Data>01/01/2024</Table.Data>
      <Table.Data align="right">$ 7.99</Table.Data>
    </Table.Row>
  </Table.Body>
</Table.Root>;

zionix-ui

Zionix-ui

Quick start

`Text` component

`Button` component

`Scrolling` component

`Avatar` component

`Checkbox` component

`Badge` component

`Dropdown` component

`Skeleton` component

`Select` component

`Card` component

`Input` component

`Toggle` component

`Hr` component

`Tab` component

`Form` example

`Modal` component

`ToastNotification` component

`Table` component

Readme

Keywords

Package Sidebar

Install

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

zionix-ui

Zionix-ui

Quick start

Text component

Button component

Scrolling component

Avatar component

Checkbox component

Badge component

Dropdown component

Skeleton component

Select component

Card component

Input component

Toggle component

Hr component

Tab component

Form example

Modal component

ToastNotification component

Table component

Readme

Keywords

Package Sidebar

Install

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

`Text` component

`Button` component

`Scrolling` component

`Avatar` component

`Checkbox` component

`Badge` component

`Dropdown` component

`Skeleton` component

`Select` component

`Card` component

`Input` component

`Toggle` component

`Hr` component

`Tab` component

`Form` example

`Modal` component

`ToastNotification` component

`Table` component

Weekly Downloads