Course

Mastering Astryx

Master Astryx, an open-source design system built on StyleX. Learn core design primitives, layout engines, token systems, and construct a full production-ready modular Kanban board application step by step.

13 lessons

  1. 01

    Introduction, Setup & Architecture

    Get started with Astryx: installation, Next.js setup, CSS layer imports, client provider boundaries, and the first stub of our Kanban board.

  2. 02

    Layout & Spatial Composition

    Shape the Kanban board stub into a full application shell using Section, Layout, LayoutHeader, LayoutContent, HStack, and VStack.

  3. 03

    Internationalization & Localization (i18n)

    Localize the board with Astryx's i18n system: locale catalogs, useTranslator, runtime language swapping, and typography that stays aligned.

  4. 04

    Styling Components & StyleX Integration

    Configure the StyleX compiler, write the board's centralized stylesheet, and apply custom styles to Astryx components via the xstyle prop.

  5. 05

    Theme System & Design Tokens

    Understand the design token scale, semantic colors, elevation shadows, and status variants — and add a light/dark toggle to the board.

  6. 06

    Data Modeling with Astryx Icons & Semantic Variants

    Define the TypeScript domain models, column metadata, priority mappings, and initial state — and watch the board render real data.

  7. 07

    Presenting Work Items: Card, Badge & MoreMenu

    Extract the work-item presentation into BoardCardBody using Card, Badge, Heading, Text, and MoreMenu.

  8. 08

    Interactive Cards & the xstyle Prop

    Wrap work items in an interactive BoardCard component with custom StyleX elevation and pointer press listeners.

  9. 09

    Column Shells with StatusDot, Tooltip & EmptyState

    Extract the board column into BoardColumn with status dots, tooltips, tabular task counters, and compact empty state fallbacks.

  10. 10

    Application Toolbars with Selector & IconButton

    Build the top application toolbar with a sprint selector, action icon buttons, and the theme and language toggles.

  11. 11

    Drag-and-Drop Interactions & Astryx Ref Forwarding

    Encapsulate pointer listeners, element hit-testing, threshold calculations, and drop reordering in a custom hook — and wire it into the board.

  12. 12

    Floating Drag Overlays & Dynamic StyleX Functions

    Render floating drag overlays using fixed positioning and dynamic StyleX rules alongside landing ghost slots.

  13. 13

    Final Assembly: Composing the Astryx Application

    Review the complete Kanban application — every file, how it composes, and the full Astryx vocabulary you have mastered.