Swapr UI
A set of components to build apps faster.
Buttons
Chip Buttons
Icon Buttons
Toast
Modal
Tabs
Tabs is based on headlessui tabs, check out their docs for usage.
Based on Radio Group component from Headless ui, check their docs.
Size: xs
Size: sm
Size: md
Size: lg
Modal
Tag
Input
This is a message
This is a message
There is an error
Icons
about-fill
about
activity
add-fill
arrow-bottom-left-small
arrow-bottom-left
arrow-bottom-right-small
arrow-bottom-right
arrow-double-down-small
arrow-double-left-small
arrow-double-left
arrow-double-right-small
arrow-double-right
arrow-double-up-small
arrow-down
arrow-left-lg
arrow-left
arrow-right-lg
arrow-right
arrow-top-left-small
arrow-top-left
arrow-top-right-small
arrow-top-right
arrow-up
bar-graph-fill
bar-graph
bitcoin-fill
bitcoin
camera-fill
camera
chevron-down-small
chevron-down
chevron-left-small
chevron-left
chevron-right-small
chevron-right
chevron-up-small
close-fill
coin-swap-fill
coin-swap
chevron-up
copy-fill
configuration
copy
day-fill
day
download-file
download
exclamation-fill
exclamation
eye-hide-fill
eye-hide
cross
eye-view-fill
eye-view
farm
filter
gas-fill
info-fill
gas
link
lock
lock-fill
menu-small
menu
minus-fill
minus
more
info
night
notification-fill
notification
pie-chart-fill
pie-chart
play-fill
night-fill
plus
redo
refresh
play
resizer
search
send-fill
send
settings-fill
settings
support-fill
support
swap-vertical
swap-horizontal
tick
tick-fill
token-fill
switch-off
undo
token
user-fill
user
warning-fill
warning
unlock-fill
unlock
Icon Badges
Logos
Font sizes
9. Font size 3xl
8. Font size 2xl
7. Font size xl
6. Font size lg
5. Font size md
4. Font size base
3. Font size sm
2. Font size xs
1. Font size 2xs
Box Shadows
Colors
transparent
transparent-0
transparent-1
transparent-2
transparent-3
transparent-4
transparent-5
transparent-6
transparent-7
transparent-8
transparent-9
transparent-10
inherit
inherit-0
inherit-1
inherit-2
inherit-3
inherit-4
inherit-5
inherit-6
black
black-12
outline
outline-none
outline-white
outline-black
outline-base-em
outline-low-em
outline-med-em
outline-high-em
outline-primary-base-em
outline-primary-low-em
outline-primary-med-em
outline-primary-high-em
outline-success-base-em
outline-success-low-em
outline-success-med-em
outline-success-high-em
outline-danger-base-em
outline-danger-low-em
outline-danger-med-em
outline-danger-high-em
outline-info-base-em
outline-info-low-em
outline-info-med-em
outline-info-high-em
outline-warning-base-em
outline-warning-low-em
outline-warning-med-em
outline-warning-high-em
outline-neutral-alt-white
outline-neutral-alt-black
text
text-white
text-black
text-low-em
text-med-em
text-high-em
text-disabled
text-primary-base
text-primary-main
text-primary-med
text-primary-em
text-secondary-main
text-secondary-em
text-success-main
text-success-em
text-danger-main
text-danger-em
text-info-main
text-info-em
text-neutral-alt-white
text-neutral-alt-black
surface
surface-white
surface-black
surface-disabled-base-em
surface-disabled-low-em
surface-disabled-med-em
surface-disabled-high-em
surface-primary-main
surface-primary-accent-1
surface-primary-accent-2
surface-primary-accent-3
surface-secondary-main
surface-secondary-accent-1
surface-secondary-accent-2
surface-secondary-accent-3
surface-success-main
surface-success-accent-1
surface-success-accent-2
surface-success-accent-3
surface-danger-main
surface-danger-accent-1
surface-danger-accent-2
surface-danger-accent-3
surface-info-main
surface-info-accent-1
surface-info-accent-2
surface-info-accent-3
surface-warning-main
surface-warning-accent-1
surface-warning-accent-2
surface-warning-accent-3
surface-surface-0
surface-surface-1
surface-surface-2
surface-surface-3
surface-surface-4
surface-surface-bg
surface-surface-high-em
surface-neutral-alt-white
surface-neutral-alt-black
shadow
shadow-e0
shadow-e1
shadow-e2
shadow-e3