The Challenge

I was working on a chat interface using shadcn/ui components to maintain design consistency across my application. The shadcn ScrollArea component provides beautiful, theme-aware scrollbars that integrate seamlessly with the overall design system. However, it lacks the stick-to-bottom functionality that's essential for chat interfaces.

The AI SDK conversation components do include this behaviour, but they come with stock scrollbars that don't match the polished aesthetic of shadcn components. This created a dilemma: sacrifice design consistency for functionality, or lose essential UX behavior for visual appeal.

The Solution: Hybrid Approach

Rather than choosing between design and functionality, I decided to extend the existing shadcn ScrollArea component to support both modes of operation:

📝 View the complete implementation on GitHub Gist

1. Default mode: Standard scrolling behaviour for general content

2. Stick-to-bottom mode: Automatic bottom-sticking for chat interfaces

This approach preserves the beautiful shadcn styling while adding the sophisticated scroll management needed for conversational UIs.

Implementation Strategy

1. Context-Based State Management

The first step was creating a React context to share scroll state across components:

interface ScrollAreaContextType {
  isAtBottom: boolean;
  isNearBottom: boolean;
  scrollToBottom: () => void;
}

This context provides three key pieces of information:

• Current scroll position relative to bottom

• Programmatic scroll control

• Near-bottom detection for UI optimisations

2. External Library Integration

I leveraged the use-stick-to-bottom library, which handles the complex scroll event management and position calculations. The challenge was integrating this library's refs with Radix UI's ScrollArea primitive:

const mergedScrollRef = useCallback(
  (node: HTMLDivElement | null) => {
    localContainerRef.current = node;

    if (!libScrollRef) return;
    if (typeof libScrollRef === "function") libScrollRef(node);
    else (libScrollRef as React.RefObject<HTMLDivElement | null>).current = node;
  },
  [libScrollRef],
);

This ref merging pattern ensures both the external library and our component maintain proper DOM references while avoiding conflicts.

3. Mode-Based Component Switching

The enhanced ScrollArea component now accepts a mode prop that determines behaviour:

function ScrollArea({ mode = "default", ...props }: ScrollAreaProps) {
  if (mode === "stick-to-bottom") {
    return <ScrollAreaBottomStick {...props} />;
  }

  return <StandardScrollArea {...props} />;
}

This preserves backward compatibility while adding new functionality.

4. Smart Scroll Button

The ScrollButton component demonstrates context usage by conditionally rendering based on scroll position:

function ScrollButton() {
  const { isAtBottom, scrollToBottom } = useScrollArea();

  return (
    !isAtBottom && (
      <Button onClick={scrollToBottom}>
        <ArrowDownIcon />
      </Button>
    )
  );
}

This provides users with an intuitive way to jump back to the latest messages when they've scrolled up to read history.

Key Technical Decisions

Ref Management Strategy

One of the trickiest aspects was properly forwarding refs between multiple layers:

• Radix UI ScrollArea needs refs for scroll event handling

• The stick-to-bottom library needs refs for position calculations

• Our component might need refs for additional functionality

The solution was a ref merging pattern that accommodates both function refs and object refs, ensuring compatibility across different ref patterns.

Performance Optimisation

The implementation includes several performance optimisations:

const values = useMemo(() => {
  return {
    isNearBottom,
    isAtBottom,
    scrollToBottom,
  };
}, [isAtBottom, scrollToBottom, isNearBottom]);

Context values are memoized to prevent unnecessary re-renders of child components, and scroll event handlers are optimised within the external library.

Error Boundaries

The useScrollArea hook includes proper error handling to prevent runtime errors when used incorrectly:

if (!context) {
  throw new Error(
    "useScrollArea must be used within a <ScrollArea mode='stick-to-bottom'>",
  );
}

This provides clear developer feedback and prevents silent failures.

Usage in Practice

The enhanced component maintains the same API as the original shadcn ScrollArea while adding new capabilities:

// Standard scrolling (unchanged behavior)
<ScrollArea className="h-96">
  <div>Regular content</div>
</ScrollArea>

// Chat interface with stick-to-bottom
<ScrollArea mode="stick-to-bottom" className="h-96">
  <div className="space-y-2">
    {messages.map(msg => <Message key={msg.id} {...msg} />)}
  </div>
  <ScrollButton />
</ScrollArea>

Results and Benefits

This solution delivers several key advantages:

Design Consistency: Maintains shadcn's beautiful scrollbar styling and theme integration across the entire application.

Enhanced UX: Provides smooth stick-to-bottom behaviour that users expect from modern chat interfaces.

Developer Experience: Offers a simple, intuitive API that doesn't break existing code while adding powerful new functionality.

Flexibility: The context system allows for custom scroll controls and behaviours beyond the basic ScrollButton.

Performance: Optimised ref handling and memoization ensure smooth performance even with frequent content updates.

Conclusion

Building great user interfaces often requires bridging the gap between design systems and specialised functionality. By extending shadcn's ScrollArea component rather than replacing it, we preserved the design consistency that makes shadcn valuable while adding the behavioural sophistication needed for modern chat interfaces.

This pattern—extending existing design system components with new modes—is broadly applicable. It allows teams to maintain design consistency while adapting components for specialised use cases, creating a more cohesive and polished user experience.

The result is a chat interface that looks native to your design system while providing the smooth, intuitive scrolling behaviour users expect from professional applications.

Why Use Git?

Git is essential for modern software development. It allows you to keep track of changes and collaborate with others on your project. By using Git, you can easily revert to previous versions of your code, track who made changes and merge code from different developers. Git also provides a safe and efficient way to back up your code and share it with others.

How to Install Git?

To install Git, visit the official Git website and download the latest version for your operating system. Follow the installation instructions, and Git will be ready to use on your computer.

How to Set Up Git?

Once Git is installed, you need to set up your user name and email address, which will be used to identify you as the author of the changes you make. Open the terminal or command prompt and enter the following commands:

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

How to Initialise a Git Repository?

To start using Git, you need to initialise a repository in your project's directory. Open the terminal or command prompt, navigate to your project's directory, and enter the following command:

git init

How do Add Specific Files to the Staging Area?

Before you commit changes, you need to add files to the staging area, which is like a queue for files that will be committed. To add specific files, enter the following command:

git add file1.txt file2.js

Replace file1.txt and file2.js with the names of the files you want to add.

How do Add All Files to the Staging Area?

To add all files in the current directory to the staging area, enter the following command:

git add .

How to Commit Changes?

Once you have added files to the staging area, you can commit them to the repository with a message that describes the changes you made. To commit changes, enter the following command:

git commit -m "Add new feature"

Replace "Add new feature" with a description of the changes you made.

How to Check the Status of Your Repository?

To check the status of your repository, enter the following command:

git status

This command will show you which files are in the staging area, which files have been modified, and which files are not being tracked.

Conclusion

In this beginner's guide to Git, we covered the basics of what Git is, why you should use it, how to install and set it up, and basic commands to initialise, add files, commit, and check status. By using Git, you can effectively track changes, collaborate with others, and keep your code organised. However, there's much more to learn, so keep exploring the many features of Git to become a Git pro.

Now that you know the basics of Git, you can learn more about branching, merging, and other advanced features of Git. Check out the official Git documentation or online tutorials to continue your Git education. Happy coding!

For more insightful articles and guides, be sure to check out our blog!

Links in HTML even look different from regular text without any CSS styling at all.

<a href="https://example.com/">a link</a>

They are blue (purple if visited). They are underlined. That’s a link in it’s purest form.

But what if we want to change things up a bit? Perhaps blue doesn’t work with your website’s design. Maybe you have an aversion to underlines. Whatever the reason, CSS lets us style links just we can any other element. All we need to do is target the element in our stylesheet.

Want to use a different color, remove the underline and make it all uppercase? Sure, why not?

a {
  color: cyan;
  text-decoration: none;
  text-transform: uppercase;
}

Now we’re cooking with gas! But why stop there? Let’s look at a few other ways we can style links to complete the experience.

Style Each Link State

Links have different states, meaning they adapt when we interact with them on a webpage. There are three additional states of a link that are worth considering anytime we change the default style of links:

• Link (:link): This is probably the least used, but it’s for styling <a> elements that have an href, rather than placeholder links.
• Visited (:visited): The appearance of a link that the user has clicked on the page before when the mouse cursor is not on top of it. The styles you can apply to :visited are restricted for security reasons.
• Hover (:hover): When the mouse cursor is place on top of the link without a click
• Active (:active): When the link is in the process of being clicked. It might be super quick, but this is when the mouse button has been depressed and before the click is over.
• Focus (:focus): Like :hover but where the link is selected using the Tab key on a keyboard. Hover and focus states are often styled together.

Links seem like a simple concept, but boy do they have a lot going on—and CSS gives us some incredible power to customise the experience!

Link as a Button

Like other HTML elements, CSS can add background colors and padding to links that allow us to create the appearance of a button. Here’s our link using those techniques:

But first, let's take a look at the wrong approach. The code snippet below leads to the targeted website when it is clicked.

  <a href="https://example.com//">
    <button>Example</button>
  </a>

However, this is not valid HTML.

The a element can be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g., buttons or other links). - (Source: Web Hypertext Application Technology Working Group)

This is considered bad practice because it makes it unclear as to the user's intent.

Links are supposed to navigate the user to another part of the webpage or an external site. And buttons are supposed to perform a specific action like submitting a form.

When you nest one inside the other, it makes it confusing as to what action you want performed. That is why it is best to not nest a button inside an anchor tag.

How to style a link to look like a button with CSS

Lets take above code and change background color instead of font color, or set white color for font"

a {

  background-color: cyan;
  color: white;
}

Lastly, we can add some padding around the text:

a {

  background-color: cyan;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  padding: 15px 25px;
}

Now we have an anchor tag that looks like a button.

We can also make this "button" be a little more interactive by changing the background color depending on the state of the link.

a:hover{
  background-color:#01b6b6;
}

We could get more intricate with the design, but this is just to show you the basics of styling a link like a button.

What are the issues with this approach?

There is some debate whether it is good practice to style links as buttons. Some will argue that links should always look like links and buttons should look like buttons.

In the web book titled Resilient Web Design, Jeremy Keith states that

one material should not be used as a substitute for another, otherwise the end result is deceptive.

Why did I bother to bring up this debate?

My goal is not to make you choose one side of the debate over another. I just want you to be aware of this ongoing discussion.

Happy Coding...

I am happy to announce that I have completed first course of freeCodeCamp's Curriculum i.e. Responsive Web Designing (RWD), and earned this certificate.

Throughout the course we have to complete some projects to get certified. In RWD there was 5 projects, here is the snapshot of the projects completed

1. Survey Form view on CodePen

2. Tribute Page view on CodePen

3. Technical Documentation Page view on CodePen

4. Product Landing Page view on CodePen

5. Personal Portfolio Web page view on CodePen

This all is done with the help of freeCodeCamp, Thank you so much.

Now it is time to explore the JavaScript. And I will catch in the next post, till then bye bye, have a great day.

About the Project

It is second RWD project of FreeCodeCamp. Genuinely speaking it was way easier than the previous one i.e. Survey form. Actually it should have to be done before survey form. If you are someone who is also learning from FreeCodeCamp believe me you will done it in one shot.

Checkout the preview and feel free to go through the code. By the way, If you are someone who have to submit the same project, please first try it yourself.

About the project

This is very simple survey form, nothing challenging except positioning submit button, I don't know why but I faced some difficulties at positioning that button. and on hover first I thought I will increase font size but then I second thought scaling it up will work good and i followed the second thought.

That said, what are your impressions?

I am open to any questions and constructive criticism.😊

Currently I am learning web development from FreeCodeCamp and TheOdinProject under a week I have almost completed HTML and CSS next I will go for JavaScript etc.

Here I made Windows 10 animated loading screen by writing each and every line by myself (and some help of VS Code) , I thought, it would be nice to share with you and take some feedback.

About the Project

When I started this I was thinking it would be very easy to do that just few lines of CSS code. I will add a box and a vertical and a horizontal line by using pseudo element, and will add few more transparent blocks with one visible pseudo element to mimic loading circle and add some rotation to transparent block with some delay to each.

I know it was not hard but adding perspective, don't ask about that it took double the time of whole code. and the solution was just adding the perspective: 30vw; to the parent element and transform: rotateY(-30deg); to the logo.

Anyway it is now completed, I love to hear some word from you. Also I am open to any questions and constructive criticism.😊