From 05de4f006d9211536a73203145d24ac40f8e11a1 Mon Sep 17 00:00:00 2001
From: SySagar <sysagar07@gmail.com>
Date: Thu, 24 Oct 2024 00:49:38 +0530
Subject: [PATCH 1/2] feat(ui): chips

---
 .changeset/clever-sloths-hunt.md      |   5 +
 apps/ui/lib/components/Chip/Chip.tsx  | 136 ++++++++++++++++++++++++++
 apps/ui/lib/components/Chip/index.ts  |   1 +
 apps/ui/lib/index.tsx                 |   1 +
 apps/ui/stories/Accordion.stories.tsx |  15 +++
 apps/ui/stories/Chip.stories.tsx      | 100 +++++++++++++++++++
 6 files changed, 258 insertions(+)
 create mode 100644 .changeset/clever-sloths-hunt.md
 create mode 100644 apps/ui/lib/components/Chip/Chip.tsx
 create mode 100644 apps/ui/lib/components/Chip/index.ts
 create mode 100644 apps/ui/stories/Chip.stories.tsx

diff --git a/.changeset/clever-sloths-hunt.md b/.changeset/clever-sloths-hunt.md
new file mode 100644
index 0000000..5ee4575
--- /dev/null
+++ b/.changeset/clever-sloths-hunt.md
@@ -0,0 +1,5 @@
+---
+'@groovy-box/ui': patch
+---
+
+chip components
diff --git a/apps/ui/lib/components/Chip/Chip.tsx b/apps/ui/lib/components/Chip/Chip.tsx
new file mode 100644
index 0000000..db704ab
--- /dev/null
+++ b/apps/ui/lib/components/Chip/Chip.tsx
@@ -0,0 +1,136 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { X as CloseIcon } from 'lucide-react';
+import { Text } from '../Typography';
+
+import { cn } from '@utils/utils';
+
+const chipVariants = cva(
+  'grv-inline-flex grv-items-center grv-rounded-full grv-text-sm grv-font-medium grv-transition-colors focus:grv-outline-none focus:grv-ring-2 grv-ring-ring grv-ring-offset-2',
+  {
+    variants: {
+      variant: {
+        filled: 'grv-bg-primary-500',
+        outlined: 'grv-border-2 grv-border-solid grv-border-accent',
+      },
+      size: {
+        sm: 'grv-h-6 grv-px-3',
+        md: 'grv-h-8 grv-px-4',
+        lg: 'grv-h-10 grv-px-5',
+      },
+      clickable: {
+        true: 'grv-cursor-pointer',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'filled',
+      size: 'md',
+      clickable: false,
+    },
+  }
+);
+
+export interface ChipDivProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof chipVariants> {
+  onDelete?: () => void;
+  as?: React.ElementType;
+  href?: never;
+  beforeChildren?: React.ReactNode;
+  afterChildren?: React.ReactNode;
+}
+
+export interface ChipAnchorProps
+  extends React.HTMLAttributes<HTMLAnchorElement>,
+    VariantProps<typeof chipVariants> {
+  onDelete?: () => void;
+  href?: string;
+  target?: string;
+  as?: React.ElementType;
+  beforeChildren?: React.ReactNode;
+  afterChildren?: React.ReactNode;
+}
+
+export type ChipProps = ChipAnchorProps | ChipDivProps;
+
+const Chip = React.forwardRef<HTMLDivElement | HTMLAnchorElement, ChipProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      clickable,
+      onDelete,
+      href,
+      as,
+      beforeChildren,
+      afterChildren,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const Component = as || (href ? 'a' : 'div');
+    const isClickable = Boolean(clickable || href || props.onClick);
+
+    console.log(variant);
+    const textColor =
+      variant === 'outlined' ? 'grv-text-accent' : 'grv-text-text-primary';
+
+    return (
+      <Component
+        ref={ref}
+        className={cn(
+          chipVariants({ variant, size, clickable: isClickable }),
+          'grv-decoration-primary-100 grv-underline-offset-2 grv-flex grv-overflow-hidden',
+          className
+        )}
+        {...(href && { href })}
+        {...props}
+      >
+        {beforeChildren && (
+          <div
+            className={cn(
+              'grv-flex grv-items-center grv-justify-center grv-text-text-primary grv-mr-2 grv-w-[20px] grv-h-[20px]  grv-overflow-hidden grv-rounded-full grv-object-cover'
+            )}
+          >
+            {beforeChildren}
+          </div>
+        )}
+        <Text variant="label-2" className={textColor}>
+          {children}
+        </Text>
+        {afterChildren && (
+          <div
+            className={cn(
+              `grv-flex grv-items-center grv-justify-center ${textColor} grv-ml-2`
+            )}
+          >
+            {afterChildren}
+          </div>
+        )}
+        {onDelete && (
+          <div
+            className={cn(
+              'grv-ml-2 grv-rounded-full grv-bg-text-primary grv-cursor-pointer  grv-p-[1px] grv-px-[6px] grv-transition-colors grv-text-primary grv-opacity-50 hover:grv-opacity-60'
+              //   variant === 'filled'
+              //     ? 'hover:grv-bg-primary-500 hover:grv-bg-opacity-5'
+              //     : 'hover:grv-bg-primary-500 hover:grv-bg-opacity-5'
+            )}
+            onClick={(e) => {
+              e.stopPropagation();
+              onDelete();
+            }}
+          >
+            <CloseIcon className={cn('grv-h-[10px] grv-w-[10px]')} />
+          </div>
+        )}
+      </Component>
+    );
+  }
+);
+
+Chip.displayName = 'Chip';
+
+export { Chip };
diff --git a/apps/ui/lib/components/Chip/index.ts b/apps/ui/lib/components/Chip/index.ts
new file mode 100644
index 0000000..99a3b02
--- /dev/null
+++ b/apps/ui/lib/components/Chip/index.ts
@@ -0,0 +1 @@
+export * from './Chip';
diff --git a/apps/ui/lib/index.tsx b/apps/ui/lib/index.tsx
index ca7fae5..6c74336 100644
--- a/apps/ui/lib/index.tsx
+++ b/apps/ui/lib/index.tsx
@@ -12,3 +12,4 @@ export * from './components/Navigation-menu';
 export * from './components/Switch';
 export * from './components/Toast';
 export * from './components/Progress';
+export * from './components/Chip';
\ No newline at end of file
diff --git a/apps/ui/stories/Accordion.stories.tsx b/apps/ui/stories/Accordion.stories.tsx
index 23d72fc..a667ddd 100644
--- a/apps/ui/stories/Accordion.stories.tsx
+++ b/apps/ui/stories/Accordion.stories.tsx
@@ -8,6 +8,7 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from '../lib';
+import exp from 'constants';
 
 const Test = () => (
   <div className="grv-w-80">
@@ -28,6 +29,19 @@ const Test = () => (
   </div>
 );
 
+const withTailwind = ()=>{
+  return (
+    <div className="grv-w-80">
+      <Accordion type="single" defaultValue="item-1" collapsible>
+        <AccordionItem value="item-1" className='grv-border-b-0'>
+          <AccordionTrigger>Accordion 1</AccordionTrigger>
+          <AccordionContent>Content 1</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  );
+}
+
 export default {
   title: 'components/Accordion',
   component: Test,
@@ -35,3 +49,4 @@ export default {
 } as Meta;
 
 export const Default = () => <Test />;
+export const WithTailwind = () => withTailwind();
diff --git a/apps/ui/stories/Chip.stories.tsx b/apps/ui/stories/Chip.stories.tsx
new file mode 100644
index 0000000..da794bf
--- /dev/null
+++ b/apps/ui/stories/Chip.stories.tsx
@@ -0,0 +1,100 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { withGlobalStyles } from '../.storybook/decorator';
+
+import { Chip, ChipProps } from '../lib';
+import { Avatar, AvatarImage, AvatarFallback } from '../lib';
+import { Star, Mail } from 'lucide-react';
+
+const ChipExample = (props: ChipProps) => (
+  <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+    <Chip {...props}>Default</Chip>
+  </div>
+);
+
+const ChipVariants = () => (
+  <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+    <Chip variant="filled">Filled</Chip>
+    <Chip variant="outlined">Outlined</Chip>
+  </div>
+);
+
+const ChipSizes = () => (
+  <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+    <Chip size="sm">Small</Chip>
+    <Chip size="md">Medium</Chip>
+    <Chip size="lg">Large</Chip>
+  </div>
+);
+
+const ChipInteractions = () => (
+  <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+    <Chip clickable onClick={() => alert('Clicked!')}>
+      Clickable
+    </Chip>
+    <Chip onDelete={() => alert('Delete clicked!')}>Deletable</Chip>
+    <Chip href="https://example.com" target="_blank">
+      Link
+    </Chip>
+  </div>
+);
+
+const ChipWithIcons = () => (
+  <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+    <Chip
+      beforeChildren={
+        <Avatar>
+          <AvatarImage
+            src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            alt="Avatar Image"
+          />
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      }
+    >
+      User Chip
+    </Chip>
+    <Chip
+      variant="outlined"
+      afterChildren={<Star className="grv-h-4 grv-w-4" />}
+    >
+      Starred
+    </Chip>
+    <Chip
+      beforeChildren={<Mail className="grv-h-4 grv-w-4" />}
+      afterChildren={
+        <span className="grv-bg-primary-foreground grv-text-primary grv-rounded-full grv-px-2 grv-text-sm">
+          99+
+        </span>
+      }
+    >
+      Inbox
+    </Chip>
+  </div>
+);
+
+export default {
+  title: 'components/Chip',
+  component: ChipExample,
+  decorators: [withGlobalStyles],
+} as Meta;
+
+export const Default: Story<ChipProps> = (args) => <ChipExample {...args} />;
+Default.args = {
+  children: 'Default Chip',
+  variant: 'filled',
+  size: 'md',
+};
+
+export const Variants = () => <ChipVariants />;
+export const Sizes = () => <ChipSizes />;
+export const Interactions = () => <ChipInteractions />;
+export const WithIcons = () => <ChipWithIcons />;
+
+export const CustomStyles = () => (
+  <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+    <Chip className="grv-bg-blue-500 grv-text-white hover:grv-bg-blue-600">
+      Custom Styled Chip
+    </Chip>
+  </div>
+);

From 337914f169e3c8ad2116e509b340c35d8e327bf3 Mon Sep 17 00:00:00 2001
From: SySagar <sysagar07@gmail.com>
Date: Thu, 24 Oct 2024 02:16:04 +0530
Subject: [PATCH 2/2] fix(docs): chips

---
 apps/docs/app/ui/IndividialComp.tsx           |  19 ++
 apps/docs/content/docs/(components)/chips.mdx | 207 ++++++++++++++++++
 apps/ui/lib/components/Chip/Chip.tsx          |  39 ++--
 apps/ui/stories/Chip.stories.tsx              |   2 +-
 4 files changed, 249 insertions(+), 18 deletions(-)
 create mode 100644 apps/docs/app/ui/IndividialComp.tsx
 create mode 100644 apps/docs/content/docs/(components)/chips.mdx

diff --git a/apps/docs/app/ui/IndividialComp.tsx b/apps/docs/app/ui/IndividialComp.tsx
new file mode 100644
index 0000000..c158aa1
--- /dev/null
+++ b/apps/docs/app/ui/IndividialComp.tsx
@@ -0,0 +1,19 @@
+'use client';
+import React from 'react';
+import { Chip } from '@groovy-box/ui';
+
+const ChipEle = () => {
+  return (
+    <div className='grv-flex grv-flex-wrap grv-gap-4 grv-p-4'>
+      <Chip clickable onClick={() => alert('Clicked!')}>
+        Clickable
+      </Chip>
+      <Chip onDelete={() => alert('Delete clicked!')}>Deletable</Chip>
+      <Chip href='https://ui.soumyasagar.in' target='_blank'>
+        Link
+      </Chip>
+    </div>
+  );
+};
+
+export { ChipEle };
diff --git a/apps/docs/content/docs/(components)/chips.mdx b/apps/docs/content/docs/(components)/chips.mdx
new file mode 100644
index 0000000..bb5f335
--- /dev/null
+++ b/apps/docs/content/docs/(components)/chips.mdx
@@ -0,0 +1,207 @@
+---
+title: Chip
+description: Various types and configurations of Chip component.
+---
+
+## Default
+
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import { Chip, Avatar, AvatarImage, AvatarFallback } from '@/app/ui';
+import ComponenentWrapper from '@/app/ui/ComponenentWrapper';
+import { Star, Mail } from 'lucide-react';
+import { ChipEle } from '@/app/ui/IndividialComp';
+
+<Tabs items={['Preview', 'Code']}>
+  <Tab value='Preview'>
+    <ComponenentWrapper>
+      <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+        <Chip>Default</Chip>
+      </div>
+    </ComponenentWrapper>
+  </Tab>
+
+  <Tab value='Code'>
+    ```tsx
+    import { Chip } from "@groovy-box/ui";
+
+    export function ChipDefault() {
+      return (
+        <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+          <Chip>Default</Chip>
+        </div>
+      );
+    }
+    ```
+
+  </Tab>
+</Tabs>
+
+## Variants
+
+<Tabs items={['Preview', 'Code']}>
+  <Tab value='Preview'>
+    <ComponenentWrapper>
+      <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+        <Chip variant="filled">Filled</Chip>
+        <Chip variant="outlined">Outlined</Chip>
+      </div>
+    </ComponenentWrapper>
+  </Tab>
+
+  <Tab value='Code'>
+    ```tsx
+    import { Chip } from "@groovy-box/ui";
+
+    export function ChipVariants() {
+      return (
+        <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+          <Chip variant="filled">Filled</Chip>
+          <Chip variant="outlined">Outlined</Chip>
+        </div>
+      );
+    }
+    ```
+
+  </Tab>
+</Tabs>
+
+## Sizes
+
+<Tabs items={['Preview', 'Code']}>
+  <Tab value='Preview'>
+    <ComponenentWrapper>
+      <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+        <Chip size="sm">Small</Chip>
+        <Chip size="md">Medium</Chip>
+        <Chip size="lg">Large</Chip>
+      </div>
+    </ComponenentWrapper>
+  </Tab>
+
+  <Tab value='Code'>
+    ```tsx
+    import { Chip } from "@groovy-box/ui";
+
+    export function ChipSizes() {
+      return (
+        <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+          <Chip size="sm">Small</Chip>
+          <Chip size="md">Medium</Chip>
+          <Chip size="lg">Large</Chip>
+        </div>
+      );
+    }
+    ```
+
+  </Tab>
+</Tabs>
+
+## With Icons
+
+<Tabs items={['Preview', 'Code']}>
+  <Tab value='Preview'>
+    <ComponenentWrapper>
+      <div 
+       supressHydrationWarning
+      className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+        <Chip
+         supressHydrationWarning
+          beforeChildren={
+            <Avatar>
+              <AvatarImage
+                src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                alt="Avatar Image"
+              />
+              <AvatarFallback>AB</AvatarFallback>
+            </Avatar>
+          }
+        >
+          User Chip
+        </Chip>
+        <Chip variant="outlined" afterChildren={<Star className="grv-h-4 grv-w-4" />}>
+          Starred
+        </Chip>
+        <Chip
+          beforeChildren={<Mail className="grv-h-4 grv-w-4" />}
+          afterChildren={
+            <span className="grv-bg-primary-foreground grv-text-primary grv-rounded-full grv-px-2 grv-text-sm">
+              99+
+            </span>
+          }
+        >
+          Inbox
+        </Chip>
+      </div>
+    </ComponenentWrapper>
+  </Tab>
+
+  <Tab value='Code'>
+    ```tsx
+    import { Chip, Avatar, AvatarImage, AvatarFallback } from "@groovy-box/ui";
+    import { Star, Mail } from 'lucide-react';
+
+    export function ChipWithIcons() {
+      return (
+        <div
+         supressHydrationWarning
+         className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+          <Chip
+            beforeChildren={
+              <Avatar>
+                <AvatarImage
+                  src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                  alt="Avatar Image"
+                />
+                <AvatarFallback>AB</AvatarFallback>
+              </Avatar>
+            }
+          >
+            User Chip
+          </Chip>
+          <Chip variant="outlined" afterChildren={<Star className="grv-h-4 grv-w-4" />}>
+            Starred
+          </Chip>
+          <Chip
+            beforeChildren={<Mail className="grv-h-4 grv-w-4" />}
+            afterChildren={
+              <span className="grv-bg-primary-foreground grv-text-primary grv-rounded-full grv-px-2 grv-text-sm">
+                99+
+              </span>
+            }
+          >
+            Inbox
+          </Chip>
+        </div>
+      );
+    }
+    ```
+
+  </Tab>
+</Tabs>
+
+## Interactions
+
+<Tabs items={['Preview', 'Code']}>
+  <Tab value='Preview'>
+    <ComponenentWrapper>
+     <ChipEle/>
+    </ComponenentWrapper>
+  </Tab>
+
+  <Tab value='Code'>
+    ```tsx
+    import { Chip } from "@groovy-box/ui";
+
+    export function ChipInteractions() {
+      return (
+        <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+          <Chip clickable onClick={() => alert('Clicked!')}>Clickable</Chip>
+          <Chip onDelete={() => alert('Delete clicked!')}>Deletable</Chip>
+          <Chip href="https://ui.soumyasagar.in" target="_blank">Link</Chip>
+        </div>
+      );
+    }
+    ```
+
+  </Tab>
+</Tabs>
diff --git a/apps/ui/lib/components/Chip/Chip.tsx b/apps/ui/lib/components/Chip/Chip.tsx
index db704ab..9053f0c 100644
--- a/apps/ui/lib/components/Chip/Chip.tsx
+++ b/apps/ui/lib/components/Chip/Chip.tsx
@@ -1,22 +1,22 @@
+'use client';
 import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { X as CloseIcon } from 'lucide-react';
-import { Text } from '../Typography';
 
 import { cn } from '@utils/utils';
 
 const chipVariants = cva(
-  'grv-inline-flex grv-items-center grv-rounded-full grv-text-sm grv-font-medium grv-transition-colors focus:grv-outline-none focus:grv-ring-2 grv-ring-ring grv-ring-offset-2',
+  'grv-inline-flex ui grv-items-center grv-rounded-full grv-text-sm grv-font-medium grv-transition-colors focus:grv-outline-none focus:grv-ring-2 grv-ring-ring grv-ring-offset-2',
   {
     variants: {
       variant: {
-        filled: 'grv-bg-primary-500',
-        outlined: 'grv-border-2 grv-border-solid grv-border-accent',
+        filled: 'grv-bg-primary-500 ui',
+        outlined: 'grv-border-2 grv-border-solid grv-border-accent ui',
       },
       size: {
-        sm: 'grv-h-6 grv-px-3',
-        md: 'grv-h-8 grv-px-4',
-        lg: 'grv-h-10 grv-px-5',
+        sm: 'grv-h-6 grv-px-3 ui',
+        md: 'grv-h-8 grv-px-4 ui',
+        lg: 'grv-h-10 grv-px-5 ui',
       },
       clickable: {
         true: 'grv-cursor-pointer',
@@ -78,12 +78,21 @@ const Chip = React.forwardRef<HTMLDivElement | HTMLAnchorElement, ChipProps>(
     const textColor =
       variant === 'outlined' ? 'grv-text-accent' : 'grv-text-text-primary';
 
+    console.log(size);
+
+    const textSize =
+      size === 'sm'
+        ? 'grv-text-[10px]'
+        : size === 'md'
+          ? 'grv-text-[12px]'
+          : 'grv-text-[14px]';
+
     return (
       <Component
         ref={ref}
         className={cn(
           chipVariants({ variant, size, clickable: isClickable }),
-          'grv-decoration-primary-100 grv-underline-offset-2 grv-flex grv-overflow-hidden',
+          'grv-decoration-primary-100 grv-underline-offset-2 grv-flex grv-overflow-hidden ui',
           className
         )}
         {...(href && { href })}
@@ -92,19 +101,17 @@ const Chip = React.forwardRef<HTMLDivElement | HTMLAnchorElement, ChipProps>(
         {beforeChildren && (
           <div
             className={cn(
-              'grv-flex grv-items-center grv-justify-center grv-text-text-primary grv-mr-2 grv-w-[20px] grv-h-[20px]  grv-overflow-hidden grv-rounded-full grv-object-cover'
+              'grv-flex grv-items-center grv-justify-center grv-text-text-primary grv-mr-2 grv-w-[20px] grv-h-[20px] ui grv-overflow-hidden grv-rounded-full grv-object-cover'
             )}
           >
             {beforeChildren}
           </div>
         )}
-        <Text variant="label-2" className={textColor}>
-          {children}
-        </Text>
+        <div className={cn(textColor, textSize)}>{children}</div>
         {afterChildren && (
           <div
             className={cn(
-              `grv-flex grv-items-center grv-justify-center ${textColor} grv-ml-2`
+              `grv-flex grv-items-center grv-justify-center ${textColor} grv-ml-2 ui`
             )}
           >
             {afterChildren}
@@ -113,10 +120,8 @@ const Chip = React.forwardRef<HTMLDivElement | HTMLAnchorElement, ChipProps>(
         {onDelete && (
           <div
             className={cn(
-              'grv-ml-2 grv-rounded-full grv-bg-text-primary grv-cursor-pointer  grv-p-[1px] grv-px-[6px] grv-transition-colors grv-text-primary grv-opacity-50 hover:grv-opacity-60'
-              //   variant === 'filled'
-              //     ? 'hover:grv-bg-primary-500 hover:grv-bg-opacity-5'
-              //     : 'hover:grv-bg-primary-500 hover:grv-bg-opacity-5'
+              'grv-ml-2 grv-rounded-full grv-bg-text-primary grv-cursor-pointer  grv-py-[4px] grv-px-[4px] grv-transition-colors grv-text-primary grv-opacity-50 hover:grv-opacity-60',
+              textSize
             )}
             onClick={(e) => {
               e.stopPropagation();
diff --git a/apps/ui/stories/Chip.stories.tsx b/apps/ui/stories/Chip.stories.tsx
index da794bf..0148df7 100644
--- a/apps/ui/stories/Chip.stories.tsx
+++ b/apps/ui/stories/Chip.stories.tsx
@@ -33,7 +33,7 @@ const ChipInteractions = () => (
       Clickable
     </Chip>
     <Chip onDelete={() => alert('Delete clicked!')}>Deletable</Chip>
-    <Chip href="https://example.com" target="_blank">
+    <Chip href="https://ui.soumyasagar.in" target="_blank">
       Link
     </Chip>
   </div>