Preview first
Engineers should be able to judge the structure of a pattern before reading any implementation details.
Frontend Reference is the first library inside Featlas. It is structured as a practical pattern system for engineers and meant to feel closer to a working handbook than a screenshot gallery.
Engineers should be able to judge the structure of a pattern before reading any implementation details.
Every reference is expected to carry usable source code, not just visual inspiration.
States, accessibility notes, and responsive behavior stay with the same item instead of being split across separate docs.
Browse by domain and category if you already know you need a button, table, chart, auth section, or other concrete reference.
Open bundles if you are building something larger like a dashboard, docs product, marketing page, or workspace admin flow and want a sensible starting stack.
Open starter pages to inspect a full dashboard, docs page, marketing page, or workspace admin layout before drilling back into the individual references.
These bundles group references by real product outcome so teams can move from taxonomy to implementation planning faster.
A practical bundle for assembling a working SaaS dashboard from navigation, data views, quick actions, and dashboard sections.
A docs-focused bundle for search, navigation, sidebar structure, and calmer reference-style layouts.
A marketing bundle that connects hero sections, pricing sections, signup patterns, and footer CTAs into one release path.
A workspace bundle for auth, permissions, profile management, and the operational sections that support ongoing administration.
These pages show what the bundle looks like once its supporting references are assembled into one realistic layout.
An assembled dashboard page that combines navigation, analytics, search, and data tables into one product-ready shell.
An assembled docs page with search, reference navigation, reading surfaces, and fallback states for larger content systems.
An assembled public-facing launch page that connects hero framing, pricing evaluation, signup, and footer conversion.
An assembled private workspace page that connects invite-based access, settings governance, and operational control surfaces.
Start from the domain that matches the scale of the problem you are solving, then drill into categories and individual references.
Small building blocks such as buttons, inputs, and lightweight dropdown patterns.
Reusable UI compositions such as cards, forms, navbars, and modal patterns.
Page-level layout slices such as hero sections, auth surfaces, and dashboard blocks.
High-signal button styles for primary, secondary, and supporting actions.
Input field patterns that are easy to reuse across product surfaces.
Compact menu and trigger patterns for selection and lightweight filtering.
Badge patterns for status, counts, trends, and compact metadata labeling.
These items are strong enough to validate preview flow, code presentation, and the overall navigation model before the collection grows larger.
A rounded status badge for compact workflow labels such as published, draft, or needs review.
High-emphasis action button with a rounded shape and clear hover feedback.
A utilitarian input field for search entry points inside the library.
A card surface for displaying a short metric with strong information hierarchy.