UIPackage
Menu

Framework

Vue React

Change language

Boilerplate repo

Components

120 components · 9 categories · React (Next.js)

▎ Actions — 5 components

ButtonGhost
button
npm i @uipkge/ui
clipboard
theme-switch
BIU
toggle
BIU
toggle-group

▎ Forms & Inputs — 20 components

Vue×Tailwind×▾
advance-select
Asia/Japan/Tokyo▾
cascade-select
Accept terms
Allow analytics
Select all
checkbox
#FFC857
color-picker
Drop filesor browse
file-upload
anna@…
••••••••
Submit
form
Email[email protected]
Pass••••••••
URLhttps://…
input
Email address *
label
(415) 555-____
masked-input
−42+
number-field
42
pin-input
Free
Pro
Team
radio-group
range-slider
★★★★★
rating
BIU
rich-text-editor
Choose…▾
select
slider
switch
vueui+ tag…
tags-input
The quick brown fox…
textarea

▎ Data Display — 51 components

Installation
Examples
Files
anchor
JD
RK
MS
+5
avatar
defaultsuccesswarningdangerinfo
badge
board
‹2›
carousel
Vue×Tailwind× + Add
chip
vue
1const x = 1
2export x
code-block
Ends in02 : 14 : 36
countdown
StatusActive
PlanPro
Seats12
data-list
Filter…1–3 / 24
Name ▾StatusDate
AnnaActive05/12
RaviPending05/14
MiraActive05/16
data-table
dock
+
fab
Email[email protected]
float-label
Gradient
gradient-text
Ship faster with tokens
highlight
icon-box
icons
image-compare
Item 18
Item 19
Item 20
Loading…
infinite-scroll
Filter…
▾ root
▾ user
name: "uipkge"
stars: 128
json-tree-view
⌘+K
kbd
65
knob
Revenue
$48k
Users
1.2k
MRR
$12k
Churn
2.4%
kpi-grid
StatusActive
OwnerAnna L
ID#3214
labeled-value
lazy-image
Docs homeExternal ↗
link
Profile
Name & avatar
›
Billing
Plan & invoices
›
Security
2FA & keys
›
list
loading-bar
map
Tokens·Blocks·Registry·Vue·React·shadcn
marquee
Hi @alice — ship it?
mentions
CEO
Eng
Design
Ops
organization-chart
overlay-scroll
••••••••
password-input
payment-card
phone
qr-code
Sign
signature-pad
ABC+
speed-dial
NameStatusOwner
AtlasActiveAnna
BeaconIdleRavi
CinderActiveMira
table
zsh
$ npx shadcn-vue add button
✓ installed
terminal
Created
Updated
Shipped
timeline
Step 1 of 4
Click to start
tour
Avail
→←
Sel
transfer
Pick folder…▾
▾ src
· components
· pages
tree-select
NameSizeType
▾ src—dir
Button.vue4kfile
index.ts1kfile
tree-table
▾ src
▸ components
▾ pages
index.vue
tree-view
1:24
video
Row 412
Row 413
Row 414
Row 415
virtual-list
DRAFT
watermark
Filter…
▾ <catalog>
▾ <book id="1">
<title>Guide</title>
xml-tree-view

▎ Feedback — 11 components

Heads up
Inline message.
alert
block-ui
72
circular-progress
empty-state
icon-transition
Progress65%
progress
Build100%
Test65%
Deploy20%
progress-item
Uploading…65%
progress-linear
skeleton
Updating profile…
Saved successfully
sonner
spinner

▎ Overlays — 9 components

!Delete item?
This can't be undone.
CancelDelete
alert-modal
Search…⌘K
Actions
Calendar⌘C
Settings⌘,
Profile⌘P
command
Cut
Copy
Paste ›
context-menu
Edit profile
Update name & bio.
CancelSave
dialog
Options ▾
Profile
Settings
Log out
dropdown-menu
Mentioned by Anna
AL
hover-card
Click me
popover
CancelSave
sheet
Open settings Hover me
tooltip

▎ Navigation — 10 components

Top
back-top
Home
Search
You
bottom-navigation
Home/Settings/Account
breadcrumb
FileEditView
New…⌘N
Open…⌘O
menubar
Products ▾SolutionsDocs
→ Vue Kit
→ React Kit
navigation-menu
123…12
pagination
Home
Team
Settings
sidebar
1
2
3
4
stepper
AllActiveDone
tabs
General
Account
Billing
Settings…
vertical-tabs

▎ Disclosure — 2 components

Billing▴
Security▾
accordion
Starred repos▾
uipkge/ui
uipkge/hrms
collapsible

▎ Layout — 8 components

16:9
aspect-ratio
card
grid
Dashboard
Overview
ExportNew
page
resizable
line 1
line 2
line 3
line 4
scroll-area
Account
Profile & preferences
Edit
section-card
separator

▎ Date & Time — 4 components

‹May 2026›
SMTWTFS
123456789101112131415161718192021
calendar
2026-05-16▾
date-picker
‹May 2026›
SMTWTFS
123456789101112131415161718192021
range-calendar
14:32▾
time-picker