Quick Start
Install Steal Shadow, wire up the provider, and start using components in under 5 minutes.
1. Install
Steal Shadow requires Motion v12 as a peer dependency for animations.
$ npm install @animui/ui motion
2. Configure Next.js
Add transpilePackages so Next.js can compile the library source.
// next.config.ts
const nextConfig = {
transpilePackages: ["@animui/ui"],
};
export default nextConfig;Skip this step for Vite or other bundlers — it's Next.js-specific.
3. Add the provider
Wrap your app with ToastProvider once at the root. Other components work without a provider.
// app/layout.tsx
import { ToastProvider } from "@animui/ui";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<ToastProvider>{children}</ToastProvider>
</body>
</html>
);
}4. Use components
Button
Variants, sizes, loading states, and icon support out of the box.
SmartForm
Zod-powered validation, error messages, and loading state — no wiring required.
Invalid email
Modal
Accessible dialog with header, body, and footer slots. Focus trapped, Escape to close.
Toast
Call useToast() anywhere in your app to trigger a notification.
Profile saved!
Your changes have been applied.
Storage 80% full
Consider upgrading your plan.
Export failed
Please try again.
DataTable
Sortable, filterable, paginated table. Pass columns + data — no config needed.
| Name | Status | MRR |
|---|---|---|
| Alice Martin | Active | $249 |
| Bob Chen | Trial | — |
Chat (AI)
Full chat UI with streaming support, tool call visualization, and message history.
5. Theming
All design tokens are CSS custom properties. Override once in your global CSS and every component inherits the change.
/* globals.css — override tokens once, apply everywhere */
:root {
--ui-primary: #6366f1; /* brand accent */
--ui-radius: 10px; /* border radius */
--ui-surface: #ffffff; /* card/panel bg */
--ui-border: #e4e4e7; /* borders */
--ui-text: #09090b; /* body text */
--ui-text-muted: #71717a; /* secondary text */
}
.dark {
--ui-surface: #18181b;
--ui-border: rgba(255,255,255,0.08);
--ui-text: #fafafa;
}