@asevenid/ui
v0.2.0
Published
Aseven UI — a themeable React component library (shadcn/Radix/Base UI + Tailwind v4 token system) with runtime brand/gray/radius/font/density/feedback/decorative/style/elevation modes.
Maintainers
filanoReadme
@asevenid/ui
A themeable React component library built on shadcn/ui, Radix UI, Base UI and Tailwind CSS v4. Ships compiled components, TypeScript types, and a single self-contained stylesheet — no Tailwind setup required in your app.
Theming is runtime: a token system driven by data-* attributes on <html> lets you switch brand, gray, radius, font, density, feedback colors (error/warning/info/success), decorative palettes, surface style, and elevation independently, plus standard .dark mode.
Installation
npm install @asevenid/uireact and react-dom (>=18, works with 19) are peer dependencies — install them if you haven't already.
Setup
1. Import the stylesheet once (e.g. in your root/entry file)
import "@asevenid/ui/styles.css"This bundles every mode palette, the .dark overrides, and all utilities the components use.
2. (Optional) Load the web fonts
Non-system fonts are not bundled. To use the inter, jakarta, space-grotesk, lora, dynapuff, or arima font modes, add the Google Fonts link to your HTML <head> (or self-host). The default stack degrades to system fonts without it.
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Arima:[email protected]&family=DynaPuff:[email protected]&family=Inter:opsz,[email protected],100..900&family=Lora:[email protected]&family=Plus+Jakarta+Sans:[email protected]&family=Space+Grotesk:[email protected]&display=swap"
/>3. (Optional) Initialize modes from storage
initModes() reads persisted mode choices from localStorage and applies the matching data-* attributes to <html> before paint. Call it once at startup.
import { initModes } from "@asevenid/ui"
initModes()Usage
import { Button } from "@asevenid/ui"
export function Example() {
return <Button variant="default">Click me</Button>
}Switching themes at runtime
Modes are plain attributes on the document element, so you can set them directly or via the helpers:
import { setMode } from "@asevenid/ui"
setMode("brand", "violet") // data-brand="violet" + persisted to localStorage
setMode("radius", "lg")
setMode("font", "jakarta")
// Dark mode is the standard `.dark` class:
document.documentElement.classList.toggle("dark")The available values per dimension live in MODE_OPTIONS:
import { MODE_OPTIONS, getMode } from "@asevenid/ui"
MODE_OPTIONS.brand // ["blue","red",…,"custom"]
getMode("brand") // current valueYou can also generate a fully custom palette from a single hex with setCustomColor("brand", "#3b82f6").
What's included
Components (canonical, retuned wrappers): Accordion, AlertDialog, Alert, Avatar, Badge, Button, Calendar, Card, Checkbox, ColorPicker, Combobox, DatePicker, DateRangePicker, Dialog, Drawer, Field, InputGroup, Input, Kbd, Label, Pagination, RadioGroup, Select, Sheet, Skeleton, Slider, Sonner (toaster), Switch, Table, Tabs, Tag, Textarea, ToggleGroup, Toggle — plus Breadcrumb, ButtonGroup, DropdownMenu, Popover, Separator, Sidebar, Spinner, Tooltip.
Utilities: cn, cva, shade generation (generateShadesWith, …), the useIsMobile hook, and the full mode runtime (getMode, setMode, initModes, setCustomColor, MODE_OPTIONS, types).
Deep imports
The published package preserves the source module tree, so you can import a single component directly for maximum tree-shaking:
import { Button } from "@asevenid/ui/components/primitives/button"
import { buttonVariants } from "@asevenid/ui/components/ui/button"Next.js
Every module ships with a "use client" banner, so the components work in the App Router (React Server Components) out of the box — import them from client or server components alike.
License
MIT © Falah Filano