Skip to main content

StarBorder Component

A beautiful animated border component with theme-aware styling and customizable effects

Live Demo

Theme-aware Border
Custom Blue Border
Fast Animation

Key Features

Theme Aware

Automatically adapts to light and dark themes

Customizable

Control color, speed, and animation properties

Polymorphic

Render as any HTML element using the 'as' prop

TypeScript

Full TypeScript support with proper type inference

Quick Start

<StarBorder>
  Theme-aware Border
</StarBorder>
<StarBorder 
  color="#3b82f6" 
  speed="4s"
  as="div"
>
  Custom Border
</StarBorder>
Github for desktop

Development Ready

Seamlessly integrates with your existing React workflow

Modern development workspace

Modern Workspace

Built for modern development environments and workflows

Component Stats

2KB
Bundle Size
0
Dependencies
100%
TypeScript
A11Y
Accessible
Get Started with StarBorder

Copy the component code and start creating beautiful animated borders in your React applications today.

Usage Examples

Discover practical ways to implement StarBorder in your applications

Developer workspace setup

Interactive Buttons

Create eye-catching call-to-action buttons that grab user attention

Get Started 
<StarBorder 
  as="button"
  color="#3b82f6"
  speed="4s"
>
  Get Started
</StarBorder>
Meeting discussing app development

Feature Cards

Highlight important features with animated borders

Premium Feature

Enhanced functionality with animated borders

<StarBorder 
  as="div"
  color="#10b981"
  className="w-full"
>
  <div className="p-4">
    Feature Content
  </div>
</StarBorder>
Three people meeting to discuss app development

Navigation Links

Create distinctive navigation elements that stand out

Active Page 
<StarBorder 
  as="a"
  href="/page"
  color="#8b5cf6"
  speed="5s"
>
  Active Page
</StarBorder>

Common Implementation Scenarios

User Profiles

Highlight premium user badges and status indicators

Loading States

Create engaging loading indicators with animated borders

Notifications

Draw attention to important alerts and messages

Form Elements

Enhance form inputs and submission buttons

✓ Best Practices

  • Use consistent animation speeds across similar elements
  • Choose colors that complement your design system
  • Apply to key interactive elements for maximum impact
  • Test across different screen sizes and devices

⚠ Avoid These Mistakes

  • Overusing animated borders on every element
  • Using animation speeds that are too fast or distracting
  • Ignoring accessibility considerations for motion
  • Forgetting to test performance on lower-end devices

Customization Options

Tailor StarBorder to match your design system with flexible customization options

Developer workspace setup

Color Variants

Customize border colors to match your brand

Red
color="#ef4444"
Green
color="#10b981"
Purple
color="#8b5cf6"
Amber
color="#f59e0b"
Meeting discussing app development

Animation Speed

Control animation timing for perfect feel

Fast (2s)
Fast
Normal (6s)
Normal
Slow (10s)
Slow
Three people meeting to discuss app development

Element Types

Render as any HTML element using polymorphic 'as' prop

Button
Click Me
Link
Visit Page
Div Container
Content Box

Props API

as ElementType

HTML element to render (default: "button")

color string

Border animation color (default: theme foreground)

speed string

Animation duration (default: "6s")

className string

Additional CSS classes

children ReactNode

Content to display inside border

Advanced Examples

Custom Button

<StarBorder
  as="button"
  color="#ef4444"
  speed="3s"
  className="hover:scale-105"
  onClick={handleClick}
>
  Delete Item
</StarBorder>

Navigation Link

<StarBorder
  as="a"
  href="/dashboard"
  color="#8b5cf6"
  speed="8s"
  className="no-underline"
>
  Dashboard
</StarBorder>

Card Container

<StarBorder
  as="div"
  color="#10b981"
  speed="12s"
  className="w-full max-w-md"
>
  <div className="p-6">
    <h3>Feature Card</h3>
    <p>Card content here</p>
  </div>
</StarBorder>

Theme Integration

Automatic Theme Detection

Adapts to light/dark themes automatically

CSS Custom Properties

Uses CSS variables for seamless integration

Design System Ready

Works with shadcn/ui and other systems

Code Examples

Complete implementation guide with step-by-step setup and real-world examples

Project Setup

1

Initialize Project

npx shadcn-ui@latest init

Set up shadcn/ui project with Tailwind CSS and TypeScript support

2

Add Component

mkdir -p components/ui
touch components/ui/star-border.tsx

Create the component directory and file structure

3

Configure Tailwind

// tailwind.config.js
extend: { animations... }

Add custom animations to your Tailwind configuration

Developer coding workspace

StarBorder Component

components/ui/star-border.tsx

import { cn } from "@/lib/utils"
import { ElementType, ComponentPropsWithoutRef } from "react"

interface StarBorderProps<T extends ElementType> {
  as?: T
  color?: string
  speed?: string
  className?: string
  children: React.ReactNode
}

export function StarBorder<T extends ElementType = "button">({
  as, className, color, speed = "6s", children, ...props
}: StarBorderProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof StarBorderProps<T>>) {
  const Component = as || "button"
  const defaultColor = color || "hsl(var(--foreground))"

  return (
    <Component 
      className={cn(
        "relative inline-block py-[1px] overflow-hidden rounded-[20px]",
        className
      )} 
      {...props}
    >
      // Animation elements...
    </Component>
  )
}
Meeting discussing app development

Tailwind Configuration

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      animation: {
        'star-movement-bottom': 'star-movement-bottom linear infinite alternate',
        'star-movement-top': 'star-movement-top linear infinite alternate',
      },
      keyframes: {
        'star-movement-bottom': {
          '0%': { transform: 'translate(0%, 0%)', opacity: '1' },
          '100%': { transform: 'translate(-100%, 0%)', opacity: '0' },
        },
        'star-movement-top': {
          '0%': { transform: 'translate(0%, 0%)', opacity: '1' },
          '100%': { transform: 'translate(100%, 0%)', opacity: '0' },
        },
      },
    },
  },
}
Three people meeting to discuss app development

Demo Implementation

components/demo.tsx

import { StarBorder } from "@/components/ui/star-border"

export function StarBorderDemo() {
  return (
    <div className="space-y-8">
      <StarBorder>
        Theme-aware Border
      </StarBorder>
      
      <StarBorder 
        color="#3b82f6"
        speed="4s"
      >
        Custom Blue Border
      </StarBorder>
    </div>
  )
}

Live Preview

Theme-aware Border
Custom Blue Border

Real-world Examples

Call-to-Action Button

<StarBorder
  as="button"
  color="#10b981"
  speed="5s"
  className="hover:scale-105 transition-transform"
  onClick={() => handleSignup()}
>
  Start Free Trial
</StarBorder>

Active Navigation Link

<StarBorder
  as="a"
  href="/dashboard"
  color="#8b5cf6"
  speed="8s"
  className="no-underline"
>
  Dashboard
</StarBorder>

Feature Card

<StarBorder
  as="div"
  color="#f59e0b"
  speed="10s"
  className="w-full max-w-sm"
>
  <div className="p-6 text-center">
    <h3 className="text-xl font-bold mb-2">
      Premium Feature
    </h3>
    <p className="text-gray-600">
      Enhanced functionality
    </p>
  </div>
</StarBorder>

Quick Installation

1

Copy the StarBorder component to components/ui/

Ensure the directory structure matches shadcn/ui conventions

2

Update your tailwind.config.js

Add the custom animations to the extend section

3

Import and use in your components

Start creating beautiful animated borders

Copy Code & Start Building

All code examples are ready to copy and paste into your project. No additional dependencies required.