Aexol Starter
Aexol Starter
TodosNotesImagesExamples
Sign In

These pages are removable example modules — they demonstrate backend/frontend patterns.

Examples

A fullstack GraphQL starter showcasing Zeus, React, and shadcn/ui

Tech Stack

Type-Safe GraphQL API
GraphQL Yoga
Zeus (Type-safe Client)
React 19
TypeScript
Vite
Tailwind CSS v4
shadcn/ui
React Router v7
Zustand
React Query v5
React Hook Form
Zod
Sonner
Lucide Icons
Buttons & Badges
Interactive elements in every variant and size.

Button Variants

Button Sizes

With Icons

Badge Variants

Default
Secondary
Destructive
Outline
Cards & Alerts
Content containers and notification banners.
Project Update
Latest changes to the codebase

The new authentication system has been deployed. All users will need to re-authenticate on their next visit.

Information
This is an informational alert using the default variant.
Error
Something went wrong. Please try again later.
Toggle & Groups
Toggle buttons for switching states and grouped selections.

Toggle Buttons

Toggle Group (Single)

Toggle Group (Multiple)

Inputs & Controls
Form elements for user input (display-only demos).
50%
Data Display
Tables, progress bars, skeletons, and avatars.

Progress Bar

Upload progress60%

Skeleton Loading States

Avatars

SCAJBSCW

Table

NameStatusRole
Alice Johnson
Active
Admin
Bob Smith
Inactive
Editor
Carol Williams
Active
Viewer
David Brown
Active
Editor
Navigation
Accordions, tabs, and breadcrumbs for content organization.

Breadcrumb

  1. Home
  2. Documentation
  3. Components

Accordion

Nested Tabs

This is the overview tab content. Tabs are great for organizing related content into switchable panels.

Overlays & Dialogs
Modals, popovers, tooltips, and hover cards.