Documentation
Installation guides, component references, and customization options for all UINUX products.
Copy the repository into your project directory and install dependencies.
$ npm install
$ npm run dev
The dev server starts at localhost:4321.
Build & Preview
$ npm run build
$ npm run preview
Builds static output to dist/ and previews locally.
src/
tokens/
tokens.css — Design tokens (shared)
styles/
global.css — Reset + base styles
components/ — 10 core .astro components
sections/ — 6 composable sections
layouts/
Base.astro — HTML shell
Page.astro — Navbar + main + Footer
pages/ — 12 pages (core + system + presets)
adapters/
nextjs/
components/ — 10 React mirrors
Tokens feed into components. Components compose into sections. Sections compose into pages. The Next.js adapter mirrors every Astro component exactly.
All visual decisions live in src/tokens/tokens.css as CSS custom properties. This is the single source of truth consumed by both Astro and the Next.js adapter.
:root {
--background: #fafafa;
--foreground: #0a0a0a;
--muted: #737373;
--border: #e5e5e5;
--surface: #ffffff;
--accent: #0a0a0a;
}
Six tokens. Override any of them to customize the entire system. All components and sections update automatically.
Styled anchor with external link support. Automatically adds target="_blank" and rel="noopener" for external URLs.
Content container with two variants: default (filled with surface background) or bordered (transparent with border).
Variants
default — filled surface background
bordered — transparent with border
Vertical spacing wrapper. Controls the padding between page sections.
Sizes
sm — compact spacing
md — default
lg — generous spacing
xl — maximum spacing
Max-width wrapper that centers content horizontally.
Widths
narrow — constrained for text-heavy content
default — standard page width
wide — expanded for feature grids
Small label for status indicators or tags. Default (filled) or outline variant.
Styled code display with optional title bar. For showing installation commands, code snippets, or configuration examples.
Horizontal rule. Uses the border token for color.
Sections (6)
Title, description, optional badge, and up to two action buttons. The primary section for every page.
Slots
badge? — optional top label
title — main heading
description — supporting text
primaryAction? — primary CTA button
secondaryAction? — secondary CTA button
Grid of feature cards with optional section header. Uses the Card component internally.
Slots
header? — optional section title
items — array of feature cards (title + description)
Tier-based pricing cards. Each tier includes name, price, description, feature list, and action button.
Slots
tiers — array of pricing tiers
Each tier: name, price, description, features[], highlighted?, action
Call to action with title and button. Centered layout. Use at the bottom of any page.
Starter Presets
Three opinionated starting compositions. Same components, same tokens, different section order and copy. Presets do not introduce new components, sections, styles, or tokens.
Lean landing page. Hero, Feature Grid (3 items), CTA.
Full marketing page. Hero, Feature Grid (6 items), Social Proof, Pricing (2 tiers), CTA.
Confidence-first page. Hero, Social Proof (first), Feature Grid (3 items), CTA.
The adapters/nextjs/ directory contains 10 React components that mirror every Astro component exactly. Same names, same props, same tokens.
Rule
If a component does not exist in Astro, it must not exist in Next.js. Astro is the source of truth. The adapter follows.
When to use
Astro — content-driven marketing sites. Static HTML, zero JS by default.
Next.js — when you need React interactivity, SSR, or are already in a Next.js codebase.
Edit src/tokens/tokens.css to change colors, typography, spacing, or layout values. All components consume these tokens. Change once, update everywhere.
:root {
--background: #your-bg;
--foreground: #your-fg;
--muted: #your-muted;
--border: #your-border;
--surface: #your-surface;
--accent: #your-accent;
}
See the /guidelines page in the product for what should and should not be customized. Do not modify component internals unless you have a clear reason.
Start with tokens. Get the colors right first.
Choose a starter preset or start from the home page.
Adjust copy in sections. Work top to bottom.
Compose pages by choosing which sections to include and in what order.
Test with npm run build && npm run preview before deploying.
SocialProof
Centered quote with attribution. Calm, minimal. No carousel, no multiple slides.
Slots
quote — the testimonial text
attribution — name and/or role