aeva-ui
v0.2.0
Published
The light, bouncy, and effortlessly chill UI library for the next gen of web developers. Build fast, stay relaxed.
Maintainers
amrishodiqReadme
Aeva UI
The light, bouncy, and effortlessly chill UI library for the next gen of web developers. Build fast, stay relaxed.
Aeva UI is a feather-soft, highly customizable design system built with Lit. Crafted for students, rapid prototypers, and anyone who wants their web apps to feel as smooth as they look.
Why it Hits Different
Aeva UI isn't just another library; it's a mood. Built on modern web standards to keep your workflow light and your apps snappy.
Works with Everything
Built with native Web Components. React, Vue, Svelte, or just plain HTML—Aeva UI fits right in without any extra baggage.Feather Soft & Fast
Zero bloat. Leveraging native browser power and Lit's tiny footprint (~5KB). It’s fully tree-shakeable—bundle only what you actually use.Safe & Sound (Shadow DOM)
No more CSS collisions. Styles are locked in with native Shadow DOM, so they won't leak out or get messed up by your app's global CSS.Your Brand, Your Mood
Theming is effortless with native CSS Variables. Switch to Dark Mode or a custom palette just by tweaking a few lines in your:root.Scale Like a Pro
Structured with Atomic Design (Atoms → Molecules → Organisms). It grows with you, from a quick assignment to a full-scale project.TypeScript First
Built for a premium dev experience. Enjoy perfect auto-completion and type safety out of the box.
Components
Aeva UI features a standard set of atomic components alongside a special collection of tactile, physics-based elements that define the "Aeva" experience.
Tactile & Physics (Special)
These components use custom physics controllers to create that signature bouncy, fluid feel.
- Kinetic Text: Text that stretches and reacts like physical matter.
- Squishy Button: A button that feels like soft rubber when pressed.
- Magnetic: A wrapper that attracts elements to your cursor.
- Gooey Slider: A slider with a fluid, viscous transition effect.
- Mechanical Switch: A switch with tactile physics and sound-like visuals.
- Jelly Card: A card that wobbles and distorts when moved.
- Membrane Input: An input field that reacts like a flexible surface.
Components Library
- Accordion Item
- Avatar
- Badge
- Button
- Card
- Checkbox
- Code
- Date
- Dialog
- Divider
- Icon
- Input
- List Item
- Modal
- Page
- Popup Menu
- Progress
- Radio
- Rating
- Ripple
- Select
- Simple Table
- Skeleton
- Slider
- Step
- Switch
- Tab Item
- Text
- Tooltip
- Mechanical Switch
- Membrane Input
- Squishy Button
- Kinetic Text
- Magnetic
- Jelly Card
- Gooey Slider
- Accordion
- Action Bar
- Alert
- Bar Chart
- Carousel
- Date Picker
- Doughnut Chart
- Empty State
- Line Chart
- List
- Pagination
- Process
- Tab
- Toast
Installation
Via NPM
$ npx create-aeva-project <project-name>
? Select a template: » - Use arrow-keys. Return to submit.
> TypeScript
JavaScript
$ cd <project-name>
$ npm install
$ npm run dev Via CDN (jsDelivr)
Perfect for quick prototypes or static sites.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aeva-ui@latest/dist/style.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/aeva-ui@latest/dist/aeva-ui.bundle.js"></script>Quick Start
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Deepstash</title>
<meta charset="utf-8">
<meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1,user-scalable=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aeva-ui@latest/dist/style.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/aeva-ui@latest/dist/aeva-ui.bundle.js"></script>
</head>
<body>
<aeva-theme theme="dark">
<aeva-page open>
<aeva-container padding="sm">
<!-- Action Bar -->
<aeva-action-bar padding="xs">
<aeva-avatar slot="secondary" src="https://i.pravatar.cc/150?img=12"
alt="User Avatar"></aeva-avatar>
<aeva-text slot="secondary" variant="h4">My App</aeva-text>
<aeva-button id="getting-started" slot="primary" variant="ghost" icon-only
aria-label="Getting Started">
<svg slot="icon-only" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253">
</path>
</svg>
</aeva-button>
<aeva-button id="more-options" slot="primary" variant="ghost" icon-only aria-label="More Options">
<svg slot="icon-only" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z">
</path>
</svg>
</aeva-button>
</aeva-action-bar>
<!-- Cards -->
<aeva-card>
<div slot="header"><aeva-text variant="h5">Why Shakespeare still feels
intimidating</aeva-text></div>
<aeva-text variant="body">Shakespeare sounds hard because his language is old not because it
is empty. His words carried entertainment power in a world without screens. Audiences
listened closely and language had to work hard. Insults became one of his most efficient
tools.</aeva-text>
<aeva-button slot="footer" variant="outline" size="sm">Read More</aeva-button>
</aeva-card>
</aeva-container>
</aeva-page>
</aeva-theme>
</body>
</html>Theming
Aeva UI uses native CSS variables. Just drop them in your :root:
:root {
--aeva-color-primary: #6366f1;
--aeva-border-radius: 12px;
}Check out the Theming Guide for more.
License
Distributed under the MIT License. See LICENSE for more information.
Contributing
We love contributions from the community! Check out CONTRIBUTING.md to get started.