Build beautiful interfaces faster with modern React components.

Documentation • Website

About

Steal Shadow is an open-source component library built for developers who want to create user interfaces without spending hours building components from scratch.

It includes reusable UI components, animations, effects, and application-ready building blocks that work well with React, Next.js, Tailwind CSS, and TypeScript.

Whether you're building a dashboard, SaaS platform, portfolio, AI application, admin panel, or landing page, the goal is simple ship faster while keeping your codebase clean and maintainable.

Installation

Install the package using npm.

npm install @stealshadow/ui

Requirements

• React 18+
• Tailwind CSS 3+
• lucide-react

Getting Started

Import the stylesheet once.

import "@stealshadow/ui/styles";

Wrap your application with the ThemeProvider.

import { ThemeProvider } from "@stealshadow/ui";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <ThemeProvider>
      {children}
    </ThemeProvider>
  );
}

Now you're ready to use components.

import { Button, Card, Badge } from "@stealshadow/ui";

export default function Example() {
  return (
    <Card>
      <Badge color="green">New</Badge>

      <Button variant="primary">
        Get Started
      </Button>
    </Card>
  );
}

Components

Core

• Button
• Input
• Card
• Badge
• Avatar
• Chip
• Combobox
• Breadcrumb
• OTPInput
• Rating

Forms

• Checkbox
• Radio Group
• Switch
• Select
• Textarea
• Range Slider
• Smart Form

Overlays

• Modal
• Drawer
• Popover
• Tooltip
• Toast

Feedback

• Spinner
• Skeleton
• Progress
• Circular Progress
• Alert

Layout

• Accordion
• Tabs
• Stepper
• Empty State
• Command Palette
• Page Transition

Data Display

• Data Table
• Kanban Board
• Calendar
• Timeline
• Pagination
• Rich Editor
• File Uploader

Animation

• Blur Text
• Glitch Text
• Reveal Text
• Morph Text
• Typewriter Text
• Split Text
• Count Up
• Magnetic Button
• Scroll Reveal
• Floating Elements
• Particle Field

Effects

• Glass Card
• Aurora Background
• Border Beam
• Gradient Border
• Spotlight Card
• Neon Glow
• Liquid Glass
• Meteors

Advanced

• Dock
• Flip Card
• Tilt Card
• Infinite Marquee
• Swipe Cards
• Multi Select
• Pricing Table
• Context Menu
• Number Flow
• Wave Text
• Text Scramble

AI

• Chat
• Prompt Editor
• Streaming Text
• Code Block
• Agent Status
• Tool Call Viewer

Tailwind Configuration

Add the package to your Tailwind content configuration.

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./app/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@stealshadow/ui/dist/**/*.js",
  ],
};

Contributing

Contributions are always welcome.

git checkout -b feature/my-feature
git commit -m "Add new component"
git push origin feature/my-feature

Then open a Pull Request.

Before submitting:

• Follow the existing coding style
• Keep components reusable
• Write clear commit messages
• Test your changes

Reporting Issues

If you find a bug or have a feature request, please open an issue with:

• A clear description
• Steps to reproduce
• Expected behavior
• Screenshots (if applicable)

License

This project is licensed under the MIT License.

See the LICENSE file for details.

Built with React, TypeScript and Tailwind CSS.