@benflux-ui/react
v0.1.3
Published
Beautiful, animated, accessible UI components for React & Next.js
Maintainers
benflux_uiReadme
@benflux-ui/react
Beautiful, animated, accessible UI components for React & Next.js.
63+ production-ready components built on Radix UI, styled with Tailwind CSS, and animated with Framer Motion. Fully compatible with Next.js App Router.
Installation
npm install @benflux-ui/react
# or
pnpm add @benflux-ui/react
# or
yarn add @benflux-ui/reactSetup
Add the provider and styles to your root layout:
// app/layout.tsx
import { BenfluxProvider } from "@benflux-ui/react"
import "@benflux-ui/react/styles"
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<BenfluxProvider theme="dark">{children}</BenfluxProvider>
</body>
</html>
)
}Configure Tailwind CSS to include the component styles:
// tailwind.config.js
export default {
content: ["./app/**/*.{ts,tsx}", "./node_modules/@benflux-ui/react/dist/**/*.{js,mjs}"],
}Usage
import { Badge, Button, Card, CardContent, CardHeader, CardTitle } from "@benflux-ui/react"
export default function Example() {
return (
<Card>
<CardHeader>
<CardTitle>Hello Benflux UI</CardTitle>
</CardHeader>
<CardContent className="flex gap-2">
<Button>Default</Button>
<Button variant="outline">Outline</Button>
<Button variant="gradient">Gradient</Button>
<Badge variant="success">New</Badge>
</CardContent>
</Card>
)
}Components
Inputs
Button Input Textarea Label Checkbox Switch RadioGroup Slider Rating Toggle ToggleGroup OTPInput Select Combobox DatePicker Calendar
Layout
Card Badge Avatar AvatarGroup Separator ScrollArea Collapsible ResizablePanel Tag TagInput
Navigation
Tabs Tooltip Popover HoverCard DropdownMenu ContextMenu Command Breadcrumb Pagination Sheet Drawer Carousel Stepper
Feedback
Dialog AlertDialog Toast Progress Skeleton Accordion Alert Spinner
Data Display
DataTable Table Charts (Line, Bar, Area, Pie, Radar) Timeline Statistic Empty CodeBlock
WOW Effects
AuroraBackground AnimatedBeam MagicCard Meteors SpotlightCard Marquee ParticleSystem BentoGrid BorderBeam AnimatedText NumberCounter
AI
ChatUI
Themes
8 built-in themes:
<BenfluxProvider theme="light" />
<BenfluxProvider theme="dark" />
<BenfluxProvider theme="amoled" />
<BenfluxProvider theme="glass" />
<BenfluxProvider theme="neon" />
<BenfluxProvider theme="cyberpunk" />
<BenfluxProvider theme="luxury" />
<BenfluxProvider theme="minimal" />TypeScript
Fully typed. All components ship with complete TypeScript definitions.
import type { ButtonProps } from "@benflux-ui/react"
function MyButton({ variant, size, ...props }: ButtonProps) {
return <Button variant={variant} size={size} {...props} />
}Requirements
- React 18+
- Tailwind CSS 3+
- Next.js 13+ (App Router supported)
Links
License
MIT