Component Explorer
Showing all variants
Buttons
07 ICON_TOOLBAR
Badges
09 VERSION_TAGS
Inputs
Enter the six-digit sequence transmitted to your terminal.
PNG, SVG or ZIP // max 24MB
07 VERIFICATION_CODE
We sent a 6-digit code to m•••@alloy.dev
Toggles & Switches
01 BINARY_BANK
02 SEGMENTED_MODE
Auto mode promotes every verified build to the edge ring.
03 RANGE_CALIBRATION
04 COUNT_STEPPER
Indicators
01 LOAD_ARRAY
02 METRIC_TILES
03 AVATAR_STACK
04 SIGNAL_MATRIX
Load States
01 CORE_SPIN
02 SKELETON_ASSEMBLY
03 BOOT_LOG
Overlays
01 TOOLTIP_FIELD
02 COMMAND_DROPDOWN
03 PROFILE_POPOVER
04 CONTEXT_MENU
05 COMMAND_PALETTE
Pagination
01 PAGE_BLOCKS
02 CURSOR_STEP
03 LOAD_BLOCK
Timelines & Activity
01 ACTIVITY_FEED
Build 4812 shipped to production in 42 seconds.
2 MIN AGO"The spacing scale looks consistent now. Approving."
26 MIN AGOInvited by Marcus Reeve. Role set to editor.
1 HR AGOVolume data-01 is at 82% capacity. Consider expanding storage.
3 HRS AGO02 VERSION_CHANGELOG
- Added timelines, empty states and files & media categories.
- Added command palette, toast stack, verification code and icon toolbar.
- Added status page, 404 page and documentation layouts.
- Added 14 new categories, from toggles and indicators to full app shells.
- Improved contrast on dim helper text.
- 56 components across 15 categories.
03 AUDIT_LOG
Empty States
01 NO_RESULTS
Check the spelling or try a broader term. Search covers names, tags and descriptions.
02 FIRST_PROJECT
Projects keep your components, tokens and deployments in one place.
03 CONNECTION_ERROR
The request timed out after 30 seconds. Check your connection and try again.
Files & Media
01 UPLOAD_DROPZONE
02 FILE_BROWSER
03 STORAGE_USAGE
Hero Sections
01 THE SPLIT CORE
Atomic
Systems.
Composable architecture for teams that prioritize structural clarity over generic polish.
02 THE CENTER MASS
Engineered
Precision.
Zero compromises on performance or precision.
03 THE NARRATIVE
"We rebuilt four product dashboards on this component library without writing custom CSS."
04 CORE_GEOMETRY
Alloy
Core.
05 TERMINAL_CMD
$ alloy init --components
[OK] Scoping architecture...
[DONE] Core logic established.
_
06 SPLIT_VISUAL
Structural
Integrity_
Components that scale with your product, not just your layout.
07 BENTO IMPACT
Built on
a strict grid.
08 BOOT SEQUENCE
Build
dark
interfaces.
A dark-only component set built for production interfaces.
Feature Sections
01 PIXEL GRID
Logic Driven
Components that follow a strict spacing system.
Zero Bloat
Clean, efficient Tailwind utility patterns.
Modular.
Standardized intersections and scales.
02 INTERFACE MERGE
Raw
Interface.
Anti-aliasing on all core font-weights.
03 THE STACK
04 HOVER SYSTEM LOGIC
Logic Processing
Fast logic resolution protocols.
Encrypted Core
Security-first architecture design.
Network Sync
Real-time global state replication.
Zero Latency
Instant component render engine.
05 FEATURE_INDEX
06 FEATURE_MATRIX
One source
of truth.
Palette, type and spacing resolve from a single theme declaration.
All spacing resolves to 4px multiples.
Outfit display // Libre Franklin body.
source.
Stats & Metrics
01 METRIC_STRIP
02 PERFORMANCE_SPLIT
Thirty-day rolling uptime
03 KPI_CONSOLE
Bento Grids
01 ASYMMETRIC_BENTO
Built on
a strict grid.
Every block resolves to the atomic scale. No soft edges, no drift.
building.
02 FEATURE_BENTO
Zero latency
logic.
Components compile to pure static geometry. No hydration cost, no cascade surprises.
04 stacked z-planes with explicit intersections.
0.25rem base rhythm across every component.
Zero radius by default. Corners are structural.
03 COMMAND_BENTO
Pricing
01 GRID PRICING
Node // 01
Core // 02
Nexus // 03
02 LOGIC COMPARISON
03 INLINE UNIT
04 ENTERPRISE_SLOT
Custom Core
Infrastructure.
05 FEATURES_MATRIX
06 CYCLE_TOGGLE
- 133 core components
- 42 layout blocks
- Single user
- Everything in Node
- Unlimited users
- Priority patch channel
07 USAGE_METER
Pay for
what you ship.
Requests beyond the base allocation bill at $0.40 per 1,000. No seats, no minimums.
Tables
01 INDUSTRIAL_GRID
02 LOGIC_COMPARISON
03 DATA_EXPAND
04 LEADERBOARD
| Rank | User | Division | Deploys | Score | Trend |
|---|---|---|---|---|---|
| 01 |
MR
Marcus Reeve
ZA-01
|
Architecture | 128 | 99.98 | |
| 02 |
EV
Elena Voss
EU-04
|
Protocol | 116 | 99.71 | |
| 03 |
SV
Silas Vane
US-02
|
Engineering | 94 | 98.64 | |
| 04 |
AK
Aria Kade
AS-07
|
Grid | 72 | 97.90 |
05 EVENT_STREAM
Call To Action
01 FLUSH INCENTIVE
Engineered
for builders.
02 SPLIT COMMAND
Ready to
deploy?
03 TERMINAL PULSE
Release Notes.
Subscribe to get notified about new components and updates.
04 ANNOUNCEMENT_STRIP
05 COUNTDOWN_CORE
The next release
arrives in.
No credit card // instant node allocation
Articles & Blog
01 ARTICLE_GRID
Latest articles.
Alloy v1.2 adds 17 new components
New timeline, empty-state and file-handling components join the library.
Read entryWhy the border is the only decoration
A structural argument against shadows, radii and unnecessary ornament.
Read entryZero runtime, full interaction
Native elements power every interactive component.
Read entry02 FEATURED_SPLIT
The library
gets larger.
Seventeen new components arrive in v1.2. Every block stays on the grid, every surface stays flat, and the runtime remains at zero.
03 LOG_INDEX
Integrations
01 CONNECTED_GRID
02 CONNECTION_FLOW
03 API_STACK
Newsletter
01 SUBSCRIBE_BLOCK
Stay up
to date.
One email per release. New components, structural updates, no noise.
02 SPLIT_SUBSCRIBE
Get every
release.
Release notes, new components and breaking changes, straight from the team.
03 COMMAND_CAPTURE
Testimonials
01 PROOF_GRID
"Terminal aesthetic done right. Structural grid is a lifesaver for industrial apps."
"The only library that prioritizes architecture over polish. Pure logic."
"Shifted our entire tokens to Alloy. It's inevitable. Pixel perfect."
02 LOGO_GRID
03 FEATURE_LOG
"Alloy redefined how we handle structural systems. It's not just a UI library; it's a protocol for visual consistency."
04 REVIEW HIGHLIGHT
Flawless Integration
and execution.
The absolute precision of these components means we cut our frontend logic scoping time in half. It feels inevitable.
05 MONUMENT_QUOTE
The first framework that treats restraint as a feature instead of an afterthought.
06 PROOF_METRICS
"Build scoping time collapsed once every component shared the same atomic grid."
"Shipped four products on this library. The interface never drifted once."
"No runtime, no dependency tree, no surprises in production. Exactly as advertised."
Process
01 VERTICAL_TRACE
Audit the structure
Map the existing interface against the Alloy atomic scale. Identify every surface, border and type step that drifts.
Define the tokens
Bind the palette, spacing rhythm and typography to a single theme layer. No component carries its own color logic.
Compose the blocks
Assemble layouts from the component library. Keep intersections explicit and let the grid resolve the rest.
Deploy the system
Freeze the interface and ship the compiled build to production.
02 DEPLOY_STEPS
Static bundle resolved.
Regression grid passed.
Promoting to edge ring.
24H telemetry window.
03 PIPELINE_GRAPH
Team
01 TEAM_GRID
02 PROFILE_SPLIT
Marcus
Reeve.
Built the original Alloy grid after years of fighting soft corners and inconsistent spacing. Believes every interface decision should be traceable to a number.
03 ROSTER_LIST
FAQ
01 ACCORDION_BLOCKS
01 What defines the Alloy grid?
Every dimension derives from a 0.25rem atomic unit. Components are built on strict multiples of that unit, so borders, padding and type align across any composition without manual correction.
02 Can I override the tokens?
Yes. Alloy exposes its palette and typography as Tailwind theme variables. Override the definitions in your stylesheet and every component inherits the change without edits to the markup.
03 Does it ship JavaScript?
No. The components are pure HTML and Tailwind utilities. Interactive patterns use native elements such as details, checkbox inputs and range sliders wherever possible.
04 Is light mode supported?
No. Alloy is dark-mode exclusive by design. The contrast model depends on deep zinc surfaces and hard white type; a light translation would break the system.
02 SPLIT_SUPPORT
Still
have
questions?
Contact the team directly for anything not covered here.
How do I migrate an existing UI?
Map existing spacing to the atomic scale first, then replace surfaces and borders. Components inherit the system automatically.
What about accessibility?
Contrast ratios, focus order and semantic markup are part of the base layer. Interactive demos use native form controls wherever possible.
How are updates delivered?
Pull the repository to get the latest version, then open the explorer and copy only the markup you use.
Is there a Figma library?
A structural Figma mirror is maintained for planning. The HTML explorer remains the single source of truth.
03 TERMINAL_FAQ
> QUERY: WHAT IS THE ATOMIC UNIT? OPEN
> QUERY: HOW DO I ADD A COMPONENT? OPEN
> QUERY: WHERE IS THE SOURCE? OPEN
Footers
01 MEGA GRID
02 CENTERED BLOCK
03 CONSOLE FOOTER
04 MASSIVE SITEMAP
Logic Core
Resources
Terminal Updates
Subscribe to receive system logic updates.
05 SIGNAL_FOOTER
06 STATUS_BAR
Feedback & Alerts
04 SUCCESS_LOG
05 TOAST_STACK
06 CORE_MODAL_HALT
Authorization Required
Verify protocol signature to proceed with core dump.
07 INLINE_BANNER
Build 8492 is ready for promotion. Verify the manifest before deploying to the edge ring.
08 MAINTENANCE_WINDOW
Edge ring recalibration
Regions EU-04 and US-02 will briefly queue requests while the routing table is rebuilt.
09 TOAST_STACK
Project settings updated successfully.
Position 2 in queue. Estimated start in 40s.
tokens.zip exceeded the 50 MB limit.
Navigation
04 BREADCRUMB_TRACE
05 WIZARD_STEP
App Shells
01 DASHBOARD_SHELL
02 KANBAN_BOARD
Build Pipeline
03 SETTINGS_SHELL
User profile
04 STATUS_PAGE
Resolved after 24 minutes. Edge cache nodes were rebalanced.
05 ERROR_404
This page does not exist or has been moved. Check the URL, or head back to a page that does.
06 DOCS_LAYOUT
Installation.
Alloy ships as plain HTML and a compiled stylesheet. Clone the repository and copy the markup you need.
$ git clone https://github.com/Infinitode/Alloy.git
$ npm install && npm run build:css
The compiled stylesheet already includes every utility used by the components.
Authentication
01 CORE_LOGIN
Sign In
Enter your credentials to continue.
02 SPLIT_IDENT
Access
Restricted
Area.
"Sign in with your team account to access the private dashboard."
Sign in to Alloy
03 OTP_VERIFY
Identity Challenge
Code sent to terminal ending // 8492
04 PASSKEY_TERMINAL
Key in.
Lock out.
Hardware-bound credentials. Nothing phishable, nothing reusable.
Contact
01 TERMINAL_COMMS
02 DATA_PORTAL
Support
Hub.
Send bug reports and feature requests to the core team.
Neo-City, 90210
03 GEO_UPLINK
Send us
a message.
No components match this search.