Showcase
Every FXUI component, all variants, fully interactive.
Core
Typography
Display heading
H1 — Page title
H2 — Section title
H3 — Subsection
H4 — Group label
H5 — Small heading
H6 — Caption label
Extra large black
Large bold
Regular body text
Small muted helper
xs monospace
Italic text
Underlined
Strikethrough
Sunset gradient
Ocean gradient
Neon gradient
Fire gradient
Electric gradient
Helper text
Email is invalid
Password strength: strong
Too long, max 160 chars
Default blockquote with no variant.
Neo-brutalism with zero apologies.
Bold. Raw. Unapologetic.
Ship with confidence.
Install with pnpm add fxui-core and import <Button /> directly.
import { Button, Badge, useToast } from 'fxui-core';
export default function App() {
const { toast } = useToast();
return <Button onClick={() => toast({ title: 'Hello!' })}>Click me</Button>;
}"Bold. Raw. Unapologetically different."
"Ship fast, look good."
"117 components. Zero compromises."
Layout
direction="column" gap="2"
direction="row" gap="3"
align="center" gap="4"
cols="4" gap="3"
cols="3" gap="2"
justify="between"
justify="around"
justify="evenly"
justify="start"
justify="center"
justify="end"
ratio="square"
ratio="video"
ratio="portrait"
ratio="wide"
Form
We'll never share your email.
This field is required.
Min 8 characters
Password too short.
This field is required.
Value: 65
Range slider
Step 10
Get notified via email
Notification settings
Privacy controls
Plan
Delivery
Disabled option
3–20 characters, no spaces
Not a valid email address
Not a valid email address
Tell us about yourself
Form Advanced
Drag & drop or click to upload
Drag & drop or click to upload
Brand color
Accent
Blue
Regular
Masked
Non-numeric · 6 digits
Data Display
| # | Name | Role | Status | Joined |
|---|---|---|---|---|
| 1 | Alice Park | Admin | Active | 2024-01 |
| 2 | Bob Chen | Editor | Away | 2024-03 |
| 3 | Carol Wu | Viewer | Offline | 2024-05 |
| 4 | Dan Lee | Admin | Active | 2023-11 |
Simple card
Body content goes here.
Revenue
Last 30 days
$48,250
↑ 12% vs last month
Elevated variant
Elevated shadow style.
Revenue
$48K
Active users
1,720
Churn rate
2.4%
Errors
0
v2.0 shipped
117 components, full TypeScript
Beta released
Public testing phase
Alpha build
Internal testing
Project started
First commit
- packages/
- apps/
- package.json
- packages/
- fxui/
- src/
- apps/
- package.json
- Version
- 1.0.0
- License
- MIT
- Components
- 117
- Author
- FXUI Team
- Updated
- Jun 2026
- Bundle
- 398 KB
- React
- 18.x
- TypeScript
- 5.x
- Tailwind
- 3.x
- TypeScript
- Tailwind CSS
- Radix UI
- Storybook
- 1.Install package
- 2.Add provider
- 3.Import components
- 4.Ship it
- forwardRef
- Dark mode
- Accessible
- Typed
- Button
- Badge
- Input
- Modal
7 days from now
1 hour from now
Feedback
Note
Info
Deployed!
Heads up
Build failed
No results
Try a different search term.
No files
Upload your first file to get started.
Inbox zero
You're all caught up.
New message
Alice sent you a file: design_system_v2.fig
just now
Build succeeded
Your deployment to production is complete.
2m ago
Payment received
$299 from Acme Inc.
1h ago
Error detected
API rate limit exceeded on /v2/components.
3h ago
React.forwardRef on every component to enable ref forwarding.className prop for style overrides.any type — FXUI ships with full TypeScript types.children to self-closing HTML elements like <input>.Processing
Processing…
Uploading
Uploading…
Please wait
Please wait…
Navigation
Overview content. Switch tabs to explore.
Account
Create your account
Profile
Set up your profile
Billing
Add payment method
Done
Ready to ship!
Step 1
First step done
Step 2
In progress...
Step 3
Coming up
Fixed reading progress — positioned at top of viewport.
Overlay
Interaction
A neo-brutalist React component library with 117 components, built with TypeScript, Tailwind CSS, and Radix UI.
117 components across 15 categories: Core, Layout, Typography, Form, Form Advanced, Data Display, Feedback, Navigation, Overlay, Interaction, Media & Chart, Utility, Special, Theme, and Misc.
Yes. All interactive components use Radix UI primitives which are fully ARIA-compliant and keyboard navigable.
Click to edit
Heading style
Textarea mode
Media & Chart
square
video (16/9)
photo (4/3)
wide (21/9)
portrait (3/4)
zoom on hover
badge corner
gradient overlay
Raw.
error fallback
Component Library
navVariant="pills"
navVariant="numbers"
navVariant="bar" (progress)
navVariant="none" + text counter
slidesToShow=2
slidesToShow=3
theme="yellow" (default)
theme="pink"
theme="green"
theme="blue"
ratio="4/3" + showShortcuts
loop + muted + autoPlay
Single series
Multi series
Single bar
Grouped bars
Single area
Stacked areas
Donut
Pie variant
No legend
Revenue up
Churn down
Stable
Users up
Utility
fx-yellow
#FFE500
fx-pink
#FF2D78
fx-green
#00FF94
fx-blue
#0066FF
fx-purple
#7C3AED
fx-black
#0a0a0a
fx-white
#fafafa
size=80
size=120
size=160
Special
overlay
soft-light
multiply
screen
baseFrequency=0.2
baseFrequency=0.45
baseFrequency=0.65
baseFrequency=1.2
opacity=0.1
opacity=0.25
opacity=0.5
opacity=0.75
opacity=1
animated (pulsing noise)
hard-light on dark
normal — raw grayscale noise
yellow
Neo-brutalist card with yellow accent.
pink
Neo-brutalist card with pink accent.
green
Neo-brutalist card with green accent.
blue
Neo-brutalist card with blue accent.
Misc
<ThemeProvider defaultColorMode="dark">117 components · MIT License
v2.0