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>;