Package Exports
- @aravi1008/ui
- @aravi1008/ui/components
- @aravi1008/ui/css
- @aravi1008/ui/css/min
- @aravi1008/ui/icons
- @aravi1008/ui/icons/activity
- @aravi1008/ui/icons/alarm
- @aravi1008/ui/icons/anchor
- @aravi1008/ui/icons/aperture
- @aravi1008/ui/icons/archive
- @aravi1008/ui/icons/arrow-down
- @aravi1008/ui/icons/arrow-left
- @aravi1008/ui/icons/arrow-right
- @aravi1008/ui/icons/arrow-up
- @aravi1008/ui/icons/at-sign
- @aravi1008/ui/icons/award
- @aravi1008/ui/icons/bar-chart
- @aravi1008/ui/icons/bar-chart-2
- @aravi1008/ui/icons/battery
- @aravi1008/ui/icons/bell
- @aravi1008/ui/icons/bell-off
- @aravi1008/ui/icons/bluetooth
- @aravi1008/ui/icons/book
- @aravi1008/ui/icons/bookmark
- @aravi1008/ui/icons/box
- @aravi1008/ui/icons/briefcase
- @aravi1008/ui/icons/calendar
- @aravi1008/ui/icons/camera
- @aravi1008/ui/icons/cast
- @aravi1008/ui/icons/check
- @aravi1008/ui/icons/check-square
- @aravi1008/ui/icons/chevron-down
- @aravi1008/ui/icons/chevron-left
- @aravi1008/ui/icons/chevron-right
- @aravi1008/ui/icons/chevron-up
- @aravi1008/ui/icons/circle-check
- @aravi1008/ui/icons/circle-x
- @aravi1008/ui/icons/clock
- @aravi1008/ui/icons/close
- @aravi1008/ui/icons/cloud
- @aravi1008/ui/icons/cloud-download
- @aravi1008/ui/icons/cloud-upload
- @aravi1008/ui/icons/code
- @aravi1008/ui/icons/columns
- @aravi1008/ui/icons/compass
- @aravi1008/ui/icons/copy
- @aravi1008/ui/icons/cpu
- @aravi1008/ui/icons/credit-card
- @aravi1008/ui/icons/crop
- @aravi1008/ui/icons/database
- @aravi1008/ui/icons/disc
- @aravi1008/ui/icons/download
- @aravi1008/ui/icons/drag
- @aravi1008/ui/icons/edit
- @aravi1008/ui/icons/external-link
- @aravi1008/ui/icons/eye
- @aravi1008/ui/icons/eye-off
- @aravi1008/ui/icons/file
- @aravi1008/ui/icons/file-image
- @aravi1008/ui/icons/file-text
- @aravi1008/ui/icons/filter
- @aravi1008/ui/icons/flag
- @aravi1008/ui/icons/folder
- @aravi1008/ui/icons/folder-open
- @aravi1008/ui/icons/gift
- @aravi1008/ui/icons/github
- @aravi1008/ui/icons/globe
- @aravi1008/ui/icons/grid
- @aravi1008/ui/icons/heart
- @aravi1008/ui/icons/home
- @aravi1008/ui/icons/hourglass
- @aravi1008/ui/icons/image
- @aravi1008/ui/icons/inbox
- @aravi1008/ui/icons/info
- @aravi1008/ui/icons/instagram
- @aravi1008/ui/icons/key
- @aravi1008/ui/icons/laptop
- @aravi1008/ui/icons/layers
- @aravi1008/ui/icons/layout
- @aravi1008/ui/icons/link
- @aravi1008/ui/icons/link-off
- @aravi1008/ui/icons/linkedin
- @aravi1008/ui/icons/list
- @aravi1008/ui/icons/loader
- @aravi1008/ui/icons/lock
- @aravi1008/ui/icons/mail
- @aravi1008/ui/icons/map
- @aravi1008/ui/icons/map-pin
- @aravi1008/ui/icons/maximize
- @aravi1008/ui/icons/menu
- @aravi1008/ui/icons/message
- @aravi1008/ui/icons/message-circle
- @aravi1008/ui/icons/mic
- @aravi1008/ui/icons/mic-off
- @aravi1008/ui/icons/minimize
- @aravi1008/ui/icons/minus
- @aravi1008/ui/icons/monitor
- @aravi1008/ui/icons/moon
- @aravi1008/ui/icons/more-horizontal
- @aravi1008/ui/icons/more-vertical
- @aravi1008/ui/icons/navigation
- @aravi1008/ui/icons/package
- @aravi1008/ui/icons/paperclip
- @aravi1008/ui/icons/pause
- @aravi1008/ui/icons/phone
- @aravi1008/ui/icons/pie-chart
- @aravi1008/ui/icons/play
- @aravi1008/ui/icons/plus
- @aravi1008/ui/icons/printer
- @aravi1008/ui/icons/refresh
- @aravi1008/ui/icons/rotate-ccw
- @aravi1008/ui/icons/rotate-cw
- @aravi1008/ui/icons/search
- @aravi1008/ui/icons/send
- @aravi1008/ui/icons/server
- @aravi1008/ui/icons/settings
- @aravi1008/ui/icons/share
- @aravi1008/ui/icons/shield
- @aravi1008/ui/icons/shield-check
- @aravi1008/ui/icons/shopping-cart
- @aravi1008/ui/icons/sidebar
- @aravi1008/ui/icons/skip-back
- @aravi1008/ui/icons/skip-forward
- @aravi1008/ui/icons/smartphone
- @aravi1008/ui/icons/sort
- @aravi1008/ui/icons/sprite
- @aravi1008/ui/icons/star
- @aravi1008/ui/icons/stop
- @aravi1008/ui/icons/sun
- @aravi1008/ui/icons/tablet
- @aravi1008/ui/icons/tag
- @aravi1008/ui/icons/terminal
- @aravi1008/ui/icons/thumbs-down
- @aravi1008/ui/icons/thumbs-up
- @aravi1008/ui/icons/timer
- @aravi1008/ui/icons/trash
- @aravi1008/ui/icons/trending-down
- @aravi1008/ui/icons/trending-up
- @aravi1008/ui/icons/truck
- @aravi1008/ui/icons/twitter
- @aravi1008/ui/icons/unlock
- @aravi1008/ui/icons/upload
- @aravi1008/ui/icons/user
- @aravi1008/ui/icons/user-minus
- @aravi1008/ui/icons/user-plus
- @aravi1008/ui/icons/users
- @aravi1008/ui/icons/video
- @aravi1008/ui/icons/video-off
- @aravi1008/ui/icons/volume
- @aravi1008/ui/icons/volume-off
- @aravi1008/ui/icons/warning
- @aravi1008/ui/icons/wifi
- @aravi1008/ui/icons/wifi-off
- @aravi1008/ui/icons/youtube
- @aravi1008/ui/icons/zoom-in
- @aravi1008/ui/icons/zoom-out
- @aravi1008/ui/themes/corporate
- @aravi1008/ui/themes/dark
- @aravi1008/ui/themes/forest
- @aravi1008/ui/themes/light
- @aravi1008/ui/themes/ocean
- @aravi1008/ui/themes/professional
- @aravi1008/ui/tokens
- @aravi1008/ui/tokens/css
- @aravi1008/ui/tokens/scss
Readme
@aravi1008/ui
A personal professional-grade design system. One install — full global CSS, tokens, themes, icons, utilities, and components.
Install
npm install @aravi1008/uiUsage
Plain CSS
import '@aravi1008/ui/css';SCSS
@use '@aravi1008/ui/scss';LESS
@import '@aravi1008/ui/less';Themes
Switch via data-av-theme on any parent element:
<html data-av-theme="dark">
<html data-av-theme="forest">
<html data-av-theme="ocean">
<html data-av-theme="professional">
<html data-av-theme="corporate">Light is default. Dark auto-applies based on OS preference.
Components
<!-- Buttons -->
<button class="av-btn av-btn-primary">Primary</button>
<button class="av-btn av-btn-outline av-btn-lg">Large Outline</button>
<button class="av-btn av-btn-danger">Danger</button>
<!-- Form -->
<input class="av-input" type="text" placeholder="Enter text" />
<select class="av-select">...</select>
<!-- Card -->
<div class="av-card av-card-shadow">
<div class="av-card-header">Title</div>
<div class="av-card-body">Content</div>
<div class="av-card-footer">
<button class="av-btn av-btn-primary av-btn-sm">Action</button>
</div>
</div>
<!-- Badge / Alert / Spinner -->
<span class="av-badge av-badge-success">Active</span>
<div class="av-alert av-alert-success">Saved successfully.</div>
<span class="av-spinner av-spinner-primary"></span>Utilities
<div class="av-p-4 av-m-2 av-mx-auto">spacing</div>
<div class="av-flex av-items-center av-justify-between av-gap-4">flex</div>
<div class="av-grid av-grid-cols-3 av-gap-4">grid</div>
<p class="av-text-lg av-font-semibold">typography</p>
<div class="av-hidden av-md:block">responsive</div>
<div class="av-container">centered layout</div>Design Tokens
.my-element {
color: var(--av-theme-color-primary);
padding: var(--av-spacing-4);
border-radius: var(--av-radius-lg);
}Available Themes
| Theme | Description |
|---|---|
light |
Clean white (default) |
dark |
Deep charcoal |
forest |
Earthy greens |
ocean |
Blue-teal |
professional |
Corporate blue |
corporate |
Navy + gold |
License
MIT © Aravindhan Sivaraman