Aster UI is the React component library that Aster Mail and the rest of the Aster apps are built from. It is the same code that runs in production rather than a reduced version of it, so every component you see in an Aster app is available to you here.
The library is free and open source under AGPL v3, and you can install it from npm and use it in any React project. For the complete documentation, including live examples of every component, see astermail.org/ui/docs. The component index lists every export in the package.
The package exports more than 190 components and helpers across 50 modules, covering buttons, badges, cards, banners, avatars, modals, tooltips, selects, toggles, accordions, navbars, sidebars, toasts, skeletons, dropdown menus, alert dialogs, mobile drawers, action sheets, and the settings and authentication shells that the apps share. Every component is fully typed, and the package ships both ESM and CommonJS builds with co-located type definitions.
Styling uses plain CSS classes rather than a runtime CSS-in-JS library. The primitives, including buttons, badges, cards, modals, and tooltips, are styled entirely by the stylesheet and need nothing else. Around twenty of the larger components, such as Spinner, EmptyState, SearchBar, and DashboardSidebar, also render Tailwind utility classes and txt-*, surf-*, and edge-* design tokens, so use those in a project that has Tailwind set up with the tokens defined, or style the class names yourself. Components that depend on focus management and keyboard navigation are built on Radix UI primitives, and animation uses Framer Motion.
npm install @aster-privacy/uiReact 18 or later, React DOM, and Framer Motion 11 or later are peer dependencies, so install them alongside the package if your project doesn't already have them.
import { Button, Card, CardTitle } from "@aster-privacy/ui";
import "@aster-privacy/ui/styles";
export function Example() {
return (
<Card>
<CardTitle>Encrypted</CardTitle>
<Button variant="primary">Continue</Button>
</Card>
);
}The stylesheet is a separate import so that you can load it once at the root of your application.
A second entry point at @aster-privacy/ui/crypto contains the family vault and Shamir recovery primitives. That entry point depends on OpenPGP.js 6 or later, which is an optional peer dependency that you only need to install if you import from it.
Colors come from CSS custom properties, so you can restyle the entire library without modifying component code. Define them on :root, or on any container if you want to scope them to part of your application:
:root {
--accent-color: #3b82f6;
--accent-color-hover: #2563eb;
--accent-color-foreground: #fff;
}To enable dark mode, add a dark class to a parent element, which is usually <html>. The stylesheet handles everything from there, so there is no theme prop to pass and no provider to wrap your application in.
<html class="dark">The theming documentation covers the rest of the tokens you can override.
You need Node.js 20 or later. The build doesn't require an account, an API key, or a .env file.
git clone https://github.com/Aster-Privacy/aster-ui.git
cd aster-ui
npm install
npm run buildThe output is written to dist/. If you're working on the library itself, run npm run dev instead and tsup rebuilds the package whenever you save.
When you build Aster Mail or one of the other Aster apps from source, clone this repository next to it and build it first. Those apps link to the library from disk during development, so installing them fails if it isn't there.
Join our Discord to give honest feedback, ask any questions, and contribute to the privacy community. You can also find us on Twitter/X and Reddit.
If you have questions or security disclosures, email us at hello@astermail.org or security@astermail.org. Do not open a public issue for security vulnerabilities.
We welcome contributions of all kinds. Read CONTRIBUTING.md before opening a pull request.
By contributing to any Aster repository, you agree that your contributions are licensed under AGPL v3.