Package Exports
- @aravi1008/ui
- @aravi1008/ui/css
- @aravi1008/ui/css/min
- @aravi1008/ui/icons
- @aravi1008/ui/icons/arrow-down
- @aravi1008/ui/icons/arrow-left
- @aravi1008/ui/icons/arrow-right
- @aravi1008/ui/icons/arrow-up
- @aravi1008/ui/icons/bell
- @aravi1008/ui/icons/calendar
- @aravi1008/ui/icons/check
- @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/copy
- @aravi1008/ui/icons/download
- @aravi1008/ui/icons/edit
- @aravi1008/ui/icons/external-link
- @aravi1008/ui/icons/eye
- @aravi1008/ui/icons/eye-off
- @aravi1008/ui/icons/filter
- @aravi1008/ui/icons/grid
- @aravi1008/ui/icons/heart
- @aravi1008/ui/icons/home
- @aravi1008/ui/icons/info
- @aravi1008/ui/icons/list
- @aravi1008/ui/icons/loader
- @aravi1008/ui/icons/lock
- @aravi1008/ui/icons/mail
- @aravi1008/ui/icons/menu
- @aravi1008/ui/icons/minus
- @aravi1008/ui/icons/moon
- @aravi1008/ui/icons/phone
- @aravi1008/ui/icons/plus
- @aravi1008/ui/icons/search
- @aravi1008/ui/icons/settings
- @aravi1008/ui/icons/share
- @aravi1008/ui/icons/sort
- @aravi1008/ui/icons/sprite
- @aravi1008/ui/icons/star
- @aravi1008/ui/icons/sun
- @aravi1008/ui/icons/trash
- @aravi1008/ui/icons/unlock
- @aravi1008/ui/icons/upload
- @aravi1008/ui/icons/user
- @aravi1008/ui/icons/warning
- @aravi1008/ui/less
- @aravi1008/ui/scss
- @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