All components
44 components from @juxtui/ui in 7 categories – each with variants, states and at least one real use case. Everything is interactive.
Actions
1Forms
11Input
<JInput>Single-line text field with integrated label, description and error message.
This is how your team sees you.
CtrlK
acme.app/
Textarea
<JTextarea>Multi-line text with optional auto-resize.
Grows up to 6 rows, then scrolls.
61/120 characters
Checkbox
<JCheckbox>Native checkbox with an animated fill and a drawn tick.
You can delete your account at any time.
Switch
<JSwitch>For settings that take effect immediately – no save button needed.
Instantly for mentions and comments.
A daily digest.
Every Monday at 9:00 am.
Select
<JSelect>Pick one option – with keyboard navigation and typeahead.
Where your functions run.
fraPlease choose a role.
One choice from a small group under a shared legend.
Slider
<JSlider>Pick a number or a range with a draggable thumb.
Volume: 40%
$200 – $800
A row of buttons that works as one control.
This text follows the selection.
The quick brown fox jumps over the lazy dog.
File 1
File 2
File 3
File 4
Progress
<JProgress>Horizontal bar for task completion or ongoing work.
report-q3.pdf0%
Step 2 of 4: Profile
Syncing…
Storage (72 of 100 GB)72%
Small
Rating
<JRating>Star rating – editable by default, optionally read-only.
4 / 5 – Good
4.5(1,284 reviews)
Delivery
Editor
<JEditor>Rich text editor with toolbar, selection menu, slash commands and Markdown shortcuts.
Overlays
5Dialog
<JDialog>A modal window for a single task. Traps focus, locks scrolling and returns focus when it closes.
Tooltip
<JTooltip>A short label on hover or keyboard focus. Focus opens it immediately, hover after a short delay.
TopRightBottomLeft
Instantly thereAfter one secondAligned to the start
Popover
<JPopover>A non-modal anchored surface for small content or forms.
Sheet
<JSheet>A modal panel that slides in from an edge – for filters, details and longer forms.
Feedback
7Stacking notifications with auto-dismiss. toast() works anywhere – inside and outside components.
Badge
<JBadge>A compact label for status and counts.
NeutralNewActivePendingError
OnlineDegradedDownsmmd Pro
mainReady
feat/tabsBuilding
fix/ssrFailed
Skeleton
<JSkeleton>A loading placeholder that anticipates the shape of the content.
Spinner
<JSpinner>A small indeterminate loading indicator.
LoadingLoadingLoading
Loading more entries…
Generating reportGenerating report
Empty State
<JEmptyState>A placeholder for when there is nothing (yet) to show – with icon, text and an action.
Nobody found
No one matches “xyz”.
No notifications
You’re all caught up.
Inbox empty
New messages will show up here.
Alert
<JAlert>A bordered inline notice within content, with an icon and optional actions.
Note
Changes are saved automatically.
Tip
Press ⌘K to search anywhere.
Import complete
1,204 contacts were imported.
API key expires soon
In 7 days – create a new one in time.
Build failed
Module “@acme/ui” not found.
Build failed
Error: Cannot find module '@acme/ui' in src/app.ts:3Without an icon
hideIcon for quieter notices.
Custom icon
Via the icon slot.
Display
12Avatar
<JAvatar>An image with an initials fallback and an optional presence indicator.
Annaonline
Benaway
Clarabusy
Davidoffline
Card
<JCard>A quiet container for related content.
Storage
Your current usage.
68 of 100 GB
Outline
Sits on the page.
Muted
Recedes into it.
padding="lg" without a title – content only.
Kbd
<JKbd>Keys and shortcuts – mod becomes ⌘ on Apple platforms and Ctrl elsewhere.
CtrlKCtrlshiftPshiftenteraltT
EscTab↑↓Enter
Open searchCtrlK
Toggle themeCtrlshiftL
SaveCtrlS
Helpshift/
Separator
<JSeparator>A divider, horizontal or vertical, with an optional label in the middle.
Section A
Section B
or
Tag
<JTag>A removable chip for user selections.
VueNuxtTypeScript
NeutralAccentSuccessWarningDestructiveSmallDisabled Berlin
Aspect Ratio
<JAspectRatio>Keeps content locked to a fixed width-to-height ratio.
21 / 9
Avatar Group
<JAvatarGroup>An overlapping stack of avatars; the rest collapses into “+N”.
Stat
<JStat>A labeled number for dashboards, with delta and trend.
Revenue
$48,290 +12.4%
vs. last month
Active users
3,842 +4.1%
Error rate
0.42% −0.1%
lower is better
Deployments
128 ±0
A vertical sequence of events with markers and status.
Order placed
Order number #10482Shipped
UPS · 1Z999AA10123456784Out for delivery
Expected between 12 and 3 pm.Delivered
Anna deployed
mainBen left a comment
“Looks good, please add the tests too.”Clara created the project
Collapsible
<JCollapsible>A single show/hide section. For several linked ones, use Accordion.
.env.local.nuxtrc.gitignore
Not reachable.
A coordinated stack of disclosures in single or multiple mode.
A small, carefully designed component library for Nuxt and Vue 3.
Yes – keyboard navigation, focus management and ARIA patterns are built in.
Yes,
@juxtui/ui/tailwind.css maps the tokens onto utilities. Not yet.
Free over $50.
30-day return policy.
Credit card, PayPal, Apple Pay.
Layout
4Burger
<JBurger>A menu button that morphs from three lines into a cross.
Menu closed
sm · md (open)