Swapr UI
Create create awesome user interfaces without the hussle of rebuild the same component all over again.
See it in action on 👁️ Presagio
Inspired by Atomize Design System built by Swapr
Getting started
To install the @swapr/ui package run the following command on your terminal.
Components
Buttons
Icon Buttons
Icons support all the buttons props, like color scheme and variant.
Chip Buttons
What topics interest you?
ToggleGroup
Based on Radio Group component from Headless ui.
Size: xs
Size: sm
Size: md
Size: lg
Tabs
Tabs is based on headlessui tabs, check out their docs for usage.
Modal
Toast
Popovers
Tooltips
Tag
Input
This is a message
This is a message
There is an error
Logos
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
code
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
sidenav
settings-fill
settings
spinner
support-fill
support
swap-vertical
swap-horizontal
stars
tick
tick-fill
token-fill
switch-off
undo
token
user-fill
user
warning-fill
warning
unlock-fill
unlock
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
surface
surface-white
surface-black
surface-inverse-white-neutral
surface-inverse-black-neutral
surface-surface-0
surface-surface-1
surface-surface-2
surface-surface-3
surface-surface-4
surface-surface-smoke-gray
surface-surface-smoke-gray-em
surface-surface-white-smoke-0
surface-surface-white-smoke-1
surface-surface-white-smoke-2
surface-surface-white-smoke-3
surface-surface-white-smoke-4
surface-disabled-high-em
surface-disabled-med-em
surface-disabled-low-em
surface-disabled-base-em
surface-primary-high-em
surface-primary-med-em
surface-primary-low-em
surface-primary-base-em
surface-primary-low-em-alpha
surface-primary-base-em-alpha
surface-secondary-high-em
surface-secondary-med-em
surface-secondary-low-em
surface-secondary-base-em
surface-secondary-low-em-alpha
surface-secondary-base-em-alpha
surface-success-high-em
surface-success-med-em
surface-success-low-em
surface-success-base-em
surface-success-low-em-alpha
surface-success-base-em-alpha
surface-success-low-em-alpha-2
surface-info-high-em
surface-info-med-em
surface-info-low-em
surface-info-base-em
surface-info-low-em-alpha
surface-info-base-em-alpha
surface-warning-high-em
surface-warning-med-em
surface-warning-low-em
surface-warning-base-em
surface-warning-low-em-alpha
surface-warning-base-em-alpha
surface-danger-high-em
surface-danger-med-em
surface-danger-low-em
surface-danger-base-em
surface-danger-low-em-alpha
surface-danger-base-em-alpha
text
text-none
text-base-em
text-low-em
text-med-em
text-high-em
text-white
text-black
text-inverse-white-neutral
text-inverse-black-neutral
text-primary-high-em
text-primary-med-em
text-primary-low-em
text-primary-base-em
text-secondary-high-em
text-secondary-med-em
text-secondary-low-em
text-secondary-base-em
text-success-high-em
text-success-med-em
text-success-low-em
text-success-base-em
text-info-high-em
text-info-med-em
text-info-low-em
text-info-base-em
text-warning-high-em
text-warning-med-em
text-warning-low-em
text-warning-base-em
text-danger-high-em
text-danger-med-em
text-danger-low-em
text-danger-base-em
outline
outline-white
outline-black
outline-high-em
outline-med-em
outline-low-em
outline-base-em
outline-inverse-white-neutral
outline-inverse-black-neutral
outline-primary-high-em
outline-primary-med-em
outline-primary-low-em
outline-primary-base-em
outline-primary-alpha
outline-primary-special-top
outline-primary-special-bottom
outline-secondary-high-em
outline-secondary-med-em
outline-secondary-low-em
outline-secondary-base-em
outline-secondary-alpha
outline-secondary-special-top
outline-secondary-special-bottom
outline-success-high-em
outline-success-med-em
outline-success-low-em
outline-success-base-em
outline-success-alpha
outline-info-high-em
outline-info-med-em
outline-info-low-em
outline-info-base-em
outline-info-alpha
outline-warning-high-em
outline-warning-med-em
outline-warning-low-em
outline-warning-base-em
outline-warning-alpha
outline-danger-high-em
outline-danger-med-em
outline-danger-low-em
outline-danger-base-em
outline-danger-alpha
neutral
neutral-inverse-black-alpha-4
neutral-inverse-black-alpha-7
neutral-inverse-black-alpha-12
neutral-inverse-black-alpha-16
neutral-inverse-black-alpha-24
neutral-inverse-black-alpha-32
neutral-inverse-black-alpha-48
neutral-inverse-black-alpha-56
neutral-inverse-black-alpha-64
neutral-inverse-black-alpha-76
neutral-inverse-black-alpha-88
neutral-inverse-white-alpha-4
neutral-inverse-white-alpha-7
neutral-inverse-white-alpha-12
neutral-inverse-white-alpha-16
neutral-inverse-white-alpha-24
neutral-inverse-white-alpha-32
neutral-inverse-white-alpha-48
neutral-inverse-white-alpha-56
neutral-inverse-white-alpha-64
neutral-inverse-white-alpha-76
neutral-inverse-white-alpha-88
overlay
overlay-high-em
overlay-med-em
elevation-shadow
elevation-shadow
transparent-inverse
transparent-inverse