tabler-react-2 0.1.76 → 0.1.78

package/docs/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "gatsby-starter-rocketdocs",
+  "private": true,
+  "version": "1.0.0",
+  "description": "Out of the box Gatsby Starter for creating documentation websites easily and quickly. With support for MDX, code highlight, Analytics, SEO and more",
+  "author": "João Pedro Schmitz <hey@joaopedro.dev> (@jpedroschmitz)",
+  "license": "MIT",
+  "starter-name": "gatsby-starter-rocketdocs",
+  "dependencies": {
+    "@rocketseat/gatsby-theme-docs": "^4.0.0",
+    "ajv": "^8.17.1",
+    "gatsby": "^5.9.0",
+    "gatsby-plugin-canonical-urls": "^5.9.0",
+    "gatsby-plugin-google-analytics": "^5.9.0",
+    "gatsby-plugin-manifest": "^5.9.0",
+    "gatsby-plugin-offline": "^6.9.0",
+    "gatsby-plugin-remove-trailing-slashes": "^4.2.0",
+    "gatsby-plugin-sitemap": "^6.9.0",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "styled-components": "^6.1.15",
+    "tabler-react-2": "^0.1.77"
+  },
+  "devDependencies": {},
+  "keywords": [
+    "gatsby",
+    "gatsby-starter"
+  ],
+  "scripts": {
+    "build": "gatsby build",
+    "start": "gatsby develop",
+    "serve": "gatsby serve",
+    "clean": "gatsby clean"
+  }
+}

package/docs/src/@rocketseat/gatsby-theme-docs/components/Logo.js

@@ -0,0 +1,31 @@
+import React from "react";
+
+export default function Logo(props) {
+  return (
+    <svg
+      width="120"
+      height="32"
+      viewBox="0 0 120 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M78.2632 10.9573C79.4211 10.9573 80.4737 11.2731 81.4211 11.8521C82.3684 12.4837 83.1579 13.3258 83.6316 14.3258C84.2105 15.431 84.4737 16.6942 84.4737 17.9573C84.4737 19.3258 84.2105 20.4837 83.6842 21.5889C83.2105 22.5889 82.4211 23.4837 81.4737 24.1152C80.5263 24.6942 79.4737 25.01 78.3684 25.01C77.5789 25.01 76.7895 24.8521 76.1053 24.5363C75.4211 24.2205 74.8421 23.8521 74.3158 23.3258V23.4837C74.3158 23.9047 74.1579 24.2731 73.8947 24.5889C73.6316 24.9047 73.2632 25.01 72.7895 25.01C72 25.01 71.3158 24.3784 71.2632 23.5889V7.53629C71.2632 7.11524 71.4211 6.74682 71.6842 6.43103C71.9474 6.11524 72.3684 5.95734 72.7895 6.00997C73.2105 6.00997 73.5789 6.16787 73.8947 6.43103C74.1579 6.74682 74.3158 7.11524 74.3158 7.53629V12.7994C74.7895 12.2205 75.3684 11.7994 76 11.4837C76.6842 11.1152 77.4737 10.9573 78.2632 10.9573ZM51.7368 21.8521C51.9474 21.8521 52.2105 21.9573 52.3684 22.1679C52.5789 22.3784 52.6842 22.6942 52.6842 23.0626C52.6842 23.5363 52.4211 23.9047 51.9474 24.2205C51.4737 24.5363 50.8947 24.6942 50.2632 24.6942C49.3158 24.7468 48.4211 24.4837 47.6316 24.01C46.8947 23.5889 46.5789 22.5889 46.5789 21.1679V14.2205H45.4211C44.6842 14.2731 44.0526 13.6416 44 12.9047V12.7994C44 12.431 44.1579 12.0626 44.4211 11.7994C44.6842 11.5363 45.0526 11.431 45.4211 11.431H46.5789V9.79945C46.5789 9.37839 46.7368 9.00997 47 8.69418C47.2632 8.37839 47.6842 8.2205 48.1053 8.27313C48.5263 8.27313 48.8947 8.43103 49.1579 8.69418C49.4211 9.00997 49.5789 9.37839 49.5789 9.79945V11.431H51.3684C52.1053 11.3784 52.7368 12.01 52.7895 12.7468V12.8521C52.7895 13.5889 52.1579 14.2205 51.4211 14.2205H49.5789V21.0626C49.5789 21.431 49.6842 21.6942 49.8421 21.8521C50.0526 22.01 50.2632 22.1152 50.5789 22.1152C50.6873 22.1152 50.7956 22.0905 50.938 22.0579C51.0031 22.043 51.0753 22.0265 51.1579 22.01C51.3684 21.9047 51.5263 21.8521 51.7368 21.8521ZM66.4737 10.9573C67.2632 10.9573 67.9474 11.5889 68 12.3784V23.1679C68 23.5889 67.8421 23.9573 67.5789 24.2731C67.3158 24.5889 66.9474 24.6942 66.4737 24.6942C66.0526 24.6942 65.6842 24.5363 65.4211 24.2731C65.1579 23.9573 65 23.5889 65 23.1679C64.5263 23.6942 63.9474 24.1152 63.3158 24.431C62.6316 24.7468 61.8421 24.9573 61.0526 24.9573C59.8947 24.9573 58.8421 24.6416 57.8947 24.0626C56.9474 23.431 56.1579 22.5889 55.6842 21.5889C55.1157 20.4637 54.8268 19.218 54.8421 17.9573C54.8421 16.5889 55.1053 15.431 55.6316 14.3258C56.1053 13.3258 56.8947 12.431 57.8421 11.7994C58.7895 11.2205 59.8421 10.9047 60.9474 10.9047C62.4737 10.9047 63.8947 11.431 65 12.4837C65 12.0626 65.1579 11.6942 65.4211 11.3784C65.6842 11.0626 66.0526 10.9047 66.4737 10.9573ZM64.0526 20.9573C64.7386 20.1085 65.1105 19.0487 65.1053 17.9573C65.1053 16.7468 64.7368 15.7468 64.0526 14.9047C63.396 14.1043 62.4031 13.6565 61.3684 13.6942C60.2632 13.6942 59.4211 14.1152 58.7368 14.9047C58.0526 15.7468 57.6842 16.8521 57.6842 17.9573C57.6842 19.1679 58.0526 20.1679 58.6842 20.9573C59.3684 21.7468 60.3684 22.2205 61.3684 22.1679C62.4737 22.1679 63.3684 21.7468 64.0526 20.9573ZM80.5263 20.9573C81.2105 20.1152 81.5789 19.01 81.5789 17.9047C81.5789 16.6942 81.2632 15.6942 80.5789 14.9047C79.9139 14.1152 78.9267 13.67 77.8947 13.6942C76.7895 13.6942 75.8947 14.1152 75.2105 14.9047C74.532 15.7577 74.1611 16.8147 74.1579 17.9047C74.1579 19.1152 74.4737 20.1152 75.2105 20.9573C75.8947 21.7468 76.8947 22.2205 77.8947 22.1679C79 22.1679 79.8421 21.7468 80.5263 20.9573ZM90.3158 23.1679C90.3158 23.5889 90.1579 23.9573 89.8947 24.2731C89.6316 24.5889 89.2105 24.6942 88.7895 24.6942C88.3684 24.6942 88 24.5363 87.7368 24.2731C87.4737 23.9573 87.3158 23.5889 87.3158 23.1679V7.53629C87.3158 7.11524 87.4737 6.74682 87.7368 6.43103C88.0526 6.11524 88.4211 5.95734 88.8421 6.00997C89.2632 6.00997 89.6316 6.16787 89.8947 6.43103C90.2105 6.74682 90.3158 7.11524 90.3158 7.53629V23.1679ZM105.263 18.6416C105.579 18.3784 105.737 18.0626 105.737 17.6416C105.737 15.2731 104.474 13.0626 102.632 11.7994C101.632 11.2205 100.579 10.9047 99.4737 10.9047C98.3158 10.9047 97.2632 11.2205 96.2632 11.7994C95.2105 12.431 94.4211 13.2731 93.8421 14.3258C93.2632 15.3784 92.9474 16.6416 92.9474 18.1152C92.8947 19.3784 93.2105 20.5889 93.7895 21.6416C94.3684 22.6416 95.1579 23.4837 96.2105 24.0626C97.2632 24.6416 98.4737 24.9573 99.8947 24.9573C100.737 24.9573 101.526 24.7994 102.316 24.5363C103.105 24.2731 103.737 23.9047 104.211 23.5363C104.684 23.2205 104.895 22.7994 104.895 22.3258C104.895 21.9573 104.789 21.6942 104.526 21.431C104.263 21.1679 104 21.0626 103.632 21.0626C103.368 21.0626 103.053 21.1152 102.789 21.2731L102.316 21.5363C102 21.7468 101.684 21.8521 101.368 21.9573C100.947 22.1152 100.421 22.1679 99.7368 22.1679C97.8421 22.2205 96.2105 20.8521 95.8947 19.01H104.211C104.632 19.01 104.947 18.9047 105.263 18.6416ZM99.3158 13.6942C100.105 13.6942 100.842 13.9573 101.421 14.431C102 14.9047 102.421 15.5363 102.474 16.2731V16.431H95.8421C96.2105 14.5889 97.3684 13.6942 99.3158 13.6942ZM116.526 11.3784C116.211 11.1152 115.789 10.9573 115.263 10.9573C114.474 10.9573 113.684 11.1152 113 11.4837C112.263 11.8521 111.684 12.3784 111.316 13.0626V12.7468C111.316 12.3258 111.211 11.9573 110.895 11.6416C110.579 11.3784 110.211 11.2205 109.789 11.2205C109.368 11.1679 108.947 11.3258 108.684 11.6416C108.421 11.9573 108.263 12.3258 108.263 12.7468V23.1152C108.263 23.5363 108.421 23.9047 108.684 24.2205C109 24.4837 109.316 24.6416 109.789 24.6416C110.263 24.6416 110.632 24.5363 110.895 24.2205C111.158 23.9047 111.316 23.5363 111.316 23.1152V17.1152C111.263 16.431 111.421 15.7994 111.684 15.1679C111.895 14.6942 112.263 14.2731 112.684 13.9573C113.211 13.5889 113.895 13.4837 114.526 13.6416L114.842 13.7468C115.158 13.8521 115.421 13.9047 115.684 13.9047C116.053 13.9573 116.368 13.7994 116.632 13.5363C116.947 13.2731 117.053 12.9047 117.053 12.3784C117.053 12.01 116.842 11.6416 116.526 11.3784Z"
+        fill="#000427"
+      />
+      <path
+        d="M31.2881 7.10695C30.4887 3.95941 28.0406 1.51132 24.8931 0.711944C18.9977 -0.237315 13.0023 -0.237315 7.10695 0.711944C3.95941 1.51132 1.51132 3.95941 0.711944 7.10695C-0.237315 13.0023 -0.237315 18.9977 0.711944 24.8931C1.51132 28.0406 3.95941 30.4887 7.10695 31.2881C13.0023 32.2373 18.9977 32.2373 24.8931 31.2881C28.0406 30.4887 30.4887 28.0406 31.2881 24.8931C32.2373 18.9977 32.2373 13.0023 31.2881 7.10695Z"
+        fill="#066FD1"
+      />
+      <path
+        d="M10.0186 22.452C12.2477 21.065 14.13 19.1827 15.517 17.0031C15.9628 16.3096 15.9628 15.3684 15.517 14.6749C14.0805 12.4954 12.2477 10.6625 10.0186 9.27555C8.92878 8.58205 7.49225 8.97834 6.79875 10.0681C6.74922 10.0681 6.74922 10.1177 6.74922 10.1177C6.44515 10.6427 6.36306 11.2674 6.52113 11.8532C6.67921 12.439 7.06439 12.9376 7.59132 13.2384C8.73064 13.9814 9.72135 14.8235 10.613 15.8638C9.77089 16.904 8.73064 17.7957 7.59132 18.4892C6.84829 18.8855 6.40247 19.678 6.40247 20.5201C6.44817 21.3569 6.9275 22.1091 7.66667 22.504C8.40585 22.8989 9.29757 22.8792 10.0186 22.452Z"
+        fill="white"
+      />
+      <path
+        d="M17.7461 21.8081H23.3932C24.4334 21.8081 25.2755 21.3127 25.2755 20.322C25.2755 19.3313 24.4334 18.8359 23.3932 18.8359H17.7461C16.7059 18.8359 15.8638 19.3313 15.8638 20.322C15.8638 21.3127 16.7059 21.8081 17.7461 21.8081Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/docs/src/components/ColorSwatch.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Tabler } from "./Tabler";
+
+export const ColorSwatch = ({ colorName, fg = "black" }) => {
+  return (
+    <Tabler>
+      <div
+        className={`bg-${colorName}`}
+        style={{
+          width: 100,
+          height: 50,
+          color: fg,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        {colorName}
+      </div>
+    </Tabler>
+  );
+};

package/docs/src/components/Excerpt.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import styled from "styled-components";
+import { Tabler } from "./Tabler";
+
+const _Excerpt = styled.div`
+  background: white;
+  background-image: radial-gradient(#e4e4e4 1px, transparent 0);
+  background-size: 20px 20px;
+  background-position: -19px -19px;
+  border: 1.5px solid #e4e4e4;
+  border-radius: 8px;
+  min-height: 100px;
+  width: 100%;
+  padding: 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 16px;
+`;
+
+export const Excerpt = ({ children }) => {
+  return (
+    <_Excerpt>
+      <Tabler>{children}</Tabler>
+    </_Excerpt>
+  );
+};

package/docs/src/components/Margin.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+export const Margin = ({ className, children }) => {
+  return (
+    <div
+      style={{ background: "#00ddff58", border: "0.01px solid transparent" }}
+    >
+      <div className={className}>
+        <div style={{ background: "#ff000057" }}>{className}</div>
+      </div>
+    </div>
+  );
+};

package/docs/src/components/Tabler.jsx

@@ -0,0 +1,48 @@
+import React, { useEffect, useRef, useState } from "react";
+import ReactDOM from "react-dom";
+
+export const Tabler = ({ children }) => {
+  const containerRef = useRef(null);
+  const shadowRef = useRef(null);
+  const [wrapper, setWrapper] = useState(null);
+
+  useEffect(() => {
+    if (containerRef.current && !shadowRef.current) {
+      if (typeof window !== "undefined") {
+        shadowRef.current = containerRef.current.attachShadow({ mode: "open" });
+
+        // Load local Tabler styles
+        const styleLink = document.createElement("link");
+        styleLink.rel = "stylesheet";
+        styleLink.href = "/tabler.replaced.css"; // Ensure the path is correct
+
+        // Create a wrapper div for children
+        const wrapperDiv = document.createElement("div");
+        wrapperDiv.style.display = "inline-block";
+        wrapperDiv.style.width = "auto";
+        wrapperDiv.style.height = "auto";
+
+        // Inject Tabler scripts
+        const script = document.createElement("script");
+        script.src =
+          "https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta17/dist/js/tabler.min.js";
+
+        const inlineScript = document.createElement("script");
+        inlineScript.textContent = "window?.USE_FALLBACK_ANCHOR = true;";
+
+        shadowRef.current.appendChild(styleLink);
+        shadowRef.current.appendChild(wrapperDiv);
+        shadowRef.current.appendChild(script);
+        shadowRef.current.appendChild(inlineScript);
+
+        setWrapper(wrapperDiv);
+      }
+    }
+  }, []);
+
+  return (
+    <div ref={containerRef}>
+      {wrapper && ReactDOM.createPortal(children, wrapper)}
+    </div>
+  );
+};

package/docs/src/config/sidebar.yml

@@ -0,0 +1,36 @@
+# Sidebar navigation
+
+- label: "Introduction"
+  link: "/"
+- label: "Getting started"
+  link: "/getting-started"
+- label: "Components"
+  items:
+    - label: "Typography"
+      link: "/components/typography"
+    - label: "Cards"
+      link: "/components/cards"
+    - label: "Horizontal Rule"
+      link: "/components/hr"
+    - label: "Alerts"
+      link: "/components/alerts"
+    - label: "Avatars"
+      link: "/components/avatar"
+    - label: "Badges"
+      link: "/components/badges"
+- label: "Utilities"
+  items:
+    - label: "Colors"
+      link: "/utilities/colors"
+    - label: "Margins"
+      link: "/utilities/margins"
+- label: "More"
+  items:
+    - label: "To do list"
+      link: "/todo"
+# - label: More
+#   items:
+#     - label: FAQ
+#       link: /faq
+#     - label: "Github"
+#       link: https://github.com/jpedroschmitz/rocketdocs

package/docs/src/docs/components/alerts.mdx

@@ -0,0 +1,105 @@
+---
+title: Alerts
+---
+
+import { Alert } from "tabler-react-2";
+import { Excerpt } from "../../components/Excerpt.jsx";
+
+Alerts are used to display important messages to the user. Not to be confused with toasts.
+
+## Signature
+
+```jsx
+import { Alert } from "tabler-react-2";
+
+<Alert {...props}>{children}</Alert>;
+```
+
+### Props
+
+| Prop        | Required | Type                       | Default | Description                                                |
+| ----------- | -------- | -------------------------- | ------- | ---------------------------------------------------------- |
+| `variant`   | No       | [Color](/utilities/colors) |         | The color variant of the alert.                            |
+| `title`     | No       | String                     |         | The title of the alert.                                    |
+| `onDismiss` | No       | function                   |         | A function that fires when the user clicks a close button. |
+| `icon`      | No       | `React.ReactNode`          |         | An icon to be displayed in the alert.                      |
+
+## Basic Usage
+
+The `Alert` component is used to display an alert message.
+
+<Excerpt>
+  <Alert>This is a basic alert.</Alert>
+</Excerpt>
+
+```jsx
+<Alert>This is a basic alert.</Alert>
+```
+
+## Variants
+
+The `Alert` component can be used to display different types of alerts. The `variant` prop accepts a string value of `success`, `failure`, `warning`, `info`, `danger`, or `dark`.
+
+<Excerpt>
+  <div
+    style={{
+      display: "flex",
+      flexDirection: "row",
+      gap: 10,
+      flexWrap: "wrap",
+      alignItems: "center",
+    }}
+  >
+    {["success", "failure", "warning", "info", "danger", "dark"].map(
+      (variant) => (
+        <Alert
+          key={variant}
+          variant={variant}
+          title={variant}
+          style={{ maxWidth: 250, minWidth: 150 }}
+        >
+          {variant} alert
+        </Alert>
+      )
+    )}
+  </div>
+</Excerpt>
+
+```jsx
+<Alert variant="success" title="success">
+  success alert
+</Alert>
+<Alert variant="failure" title="failure">
+  failure alert
+</Alert>
+```
+
+## Titles
+
+You can pass a `title` prop to the `Alert` component to display a title in boldface and the variant color.
+
+<Excerpt>
+  <Alert title="My awesome title">A card with a title.</Alert>
+</Excerpt>
+
+```jsx
+<Alert title="My awesome title">A card with a title.</Alert>
+```
+
+## Dismissible Alerts
+
+You can pass an `onDismiss` prop to the `Alert` component to display a close button. When the user clicks the close button, the `onDismiss` function is called.
+
+<Excerpt>
+  <Alert title="Dismissible alert" onDismiss={() => alert("Alert dismissed!")}>
+    A dismissible alert.
+  </Alert>
+</Excerpt>
+
+```jsx
+<Alert title="Dismissible alert" onDismiss={() => alert("Alert dismissed!")}>
+  A dismissible alert.
+</Alert>
+```
+
+> **Note**: The alert component does not manage its own state. If you want the alert to go away when the user clicks the close button, you must unmount it yourself.

package/docs/src/docs/components/avatar.mdx

@@ -0,0 +1,259 @@
+---
+title: Avatars
+---
+
+import { Avatar, AvatarStackedList } from "tabler-react-2";
+import { Excerpt } from "../../components/Excerpt.jsx";
+
+Avatars are used to display a user's profile picture or initials.
+
+## Signature
+
+```jsx
+import { Avatar } from "tabler-react-2";
+
+<Avatar {...props}>{children}</Avatar>;
+```
+
+### Props
+
+| Prop            | Required | Type                       | Default | Description                              |
+| --------------- | -------- | -------------------------- | ------- | ---------------------------------------- |
+| `src`           | No       | String                     |         | The URL of the avatar image.             |
+| `initials`      | No       | String                     |         | The initials of the avatar.              |
+| `initialsColor` | No       | [Color](/utilities/colors) |         | The background color of the initials.    |
+| `dicebear`      | No       | String \| Boolean          |         | The style of the avatar.                 |
+| `size`          | No       | [`sm`, `md`, `lg`]         |         | The size of the avatar.                  |
+| `status`        | No       | [Color](/utilities/colors) |         | The status of the avatar.                |
+| `badge`         | No       | String                     |         | The badge to be displayed on the avatar. |
+| `color`         | No       | [Color](/utilities/colors) |         | The color of the avatar.                 |
+
+## Basic Usage
+
+The `Avatar` component is used to display an avatar.
+
+<Excerpt>
+  <Avatar src="https://picsum.photos/200" />
+</Excerpt>
+
+```jsx
+<Avatar src="https://picsum.photos/200" />
+```
+
+## Initials
+
+You can pass an `initials` prop to the `Avatar` component to display initials.
+
+<Excerpt>
+  <Avatar initials="JC" />
+</Excerpt>
+
+```jsx
+<Avatar initials="JC" />
+```
+
+## Color
+
+You can pass a `color` prop to the `Avatar` component to change the color of the avatar.
+
+<Excerpt>
+  <div
+    style={{ display: "flex", flexDirection: "row", gap: 10, flexWrap: "wrap" }}
+  >
+    {[
+      "primary",
+      "secondary",
+      "success",
+      "danger",
+      "warning",
+      "info",
+      "dark",
+      "yellow",
+      "pink",
+      "purple",
+    ].map((color) => (
+      <Avatar key={color} initials="JC" color={color} />
+    ))}
+  </div>
+</Excerpt>
+
+```jsx
+<Avatar initials="JC" color="primary" />
+<Avatar initials="JC" color="secondary" />
+<Avatar initials="JC" color="success" />
+<Avatar initials="JC" color="danger" />
+<Avatar initials="JC" color="warning" />
+```
+
+## Initials Color
+
+> **Note**: Unless explicitly required, you should not use the `initialsColor` prop. Instead, use the `color` prop.
+
+You can pass an `initialsColor` prop to the `Avatar` component to change the color of the initials.
+
+<Excerpt>
+  <Avatar initials="JC" initialsColor="cyan" />
+</Excerpt>
+
+```jsx
+<Avatar initials="JC" initialsColor="cyan" />
+```
+
+## Dicebear
+
+You can use Dicebear to generate avatars. You can pass a `dicebear` attribute to the `Avatar` component to instruct it to use a Dicebear image. Dicebear will use the `initials` prop as a seed. When a dicebear style is not provided, it defaults to `shapes`.
+
+<Excerpt>
+  <Avatar dicebear initials="JC" />
+</Excerpt>
+
+```jsx
+<Avatar dicebear initials="JC" />
+```
+
+### Dicebear Styles
+
+You can pass a `dicebear` prop to the `Avatar` component to instruct it to use a specific Dicebear style. The `dicebear` prop accepts a string value of the style name or a boolean.
+
+### Dicebear Styles
+
+<Excerpt>
+  <div
+    style={{ display: "flex", flexDirection: "row", gap: 10, flexWrap: "wrap" }}
+  >
+    {[
+      "adventurer",
+      "bottts",
+      "identicon",
+      "initials",
+      "croodles",
+      "dylan",
+      "icons",
+      "lorelei",
+    ].map((style) => (
+      <Avatar key={style} dicebear={style} initials="JC" />
+    ))}
+  </div>
+</Excerpt>
+
+```jsx
+<Avatar dicebear="bottts" initials="JC" />
+<Avatar dicebear="identicon" initials="JC" />
+<Avatar dicebear="initials" initials="JC" />
+<Avatar dicebear="croodles" initials="JC" />
+<Avatar dicebear="dylan" initials="JC" />
+<Avatar dicebear="icons" initials="JC" />
+<Avatar dicebear="lorelei" initials="JC" />
+```
+
+Styles are at the [Dicebear docs page](https://www.dicebear.com/styles/) and work out-of-the-box.
+
+## Sizes
+
+<Excerpt>
+  <div
+    style={{
+      display: "flex",
+      flexDirection: "row",
+      gap: 10,
+      flexWrap: "wrap",
+      alignItems: "center",
+    }}
+  >
+    {["sm", "md", "lg"].map((size) => (
+      <Avatar key={size} size={size} initials="JC" />
+    ))}
+  </div>
+</Excerpt>
+
+```jsx
+<Avatar size="sm" initials="JC" />
+<Avatar size="md" initials="JC" />
+<Avatar size="lg" initials="JC" />
+```
+
+## Statuses
+
+You can pass a `status` prop to the `Avatar` component to display a badge on the avatar. The `status` prop accepts a string value [color](/utilities/colors).
+
+<Excerpt>
+  <div
+    style={{
+      display: "flex",
+      flexDirection: "row",
+      gap: 10,
+      flexWrap: "wrap",
+      alignItems: "center",
+    }}
+  >
+    {[
+      "primary",
+      "secondary",
+      "success",
+      "danger",
+      "warning",
+      "info",
+      "dark",
+    ].map((status) => (
+      <Avatar key={status} status={status} initials="JC" />
+    ))}
+  </div>
+</Excerpt>
+
+```jsx
+<Avatar status="primary" initials="JC" />
+<Avatar status="secondary" initials="JC" />
+<Avatar status="success" initials="JC" />
+<Avatar status="danger" initials="JC" />
+<Avatar status="warning" initials="JC" />
+<Avatar status="info" initials="JC" />
+<Avatar status="dark" initials="JC" />
+```
+
+## Badges
+
+You can pass a `badge` prop to the `Avatar` component to display a badge on the avatar. Badges require a `status` prop to be present in order to be displayed.
+
+<Excerpt>
+  <div
+    style={{
+      display: "flex",
+      flexDirection: "row",
+      gap: 10,
+      flexWrap: "wrap",
+      alignItems: "center",
+    }}
+  >
+    {[1, 2, 3, 4, 5].map((badge) => (
+      <Avatar key={badge} badge={badge} status="danger" initials="JC" />
+    ))}
+  </div>
+</Excerpt>
+
+```jsx
+<Avatar badge={1} status="danger" initials="JC" />
+<Avatar badge={2} status="danger" initials="JC" />
+<Avatar badge={3} status="danger" initials="JC" />
+<Avatar badge={4} status="danger" initials="JC" />
+<Avatar badge={5} status="danger" initials="JC" />
+```
+
+## Stacked Avatars
+
+You can use the `AvatarStackedList` component to stack avatars.
+
+<Excerpt>
+  <AvatarStackedList>
+    <Avatar stacked dicebear initials="JC" />
+    <Avatar stacked dicebear initials="AB" />
+  </AvatarStackedList>
+</Excerpt>
+
+```jsx
+import { Avatar, AvatarStackedList } from "tabler-react-2";
+
+<AvatarStackedList>
+  <Avatar stacked initials="JC" />
+  <Avatar stacked initials="JC" />
+</AvatarStackedList>;
+```