Skip to content

Components

Every component of the Zeyn framework, running live. Open one to see its examples, the code that builds them and its API.

Layout

  • Orders

    Stock

    People

    Row

    Columns side by side that stack on narrow screens.

  • A sturdy notebook with 120 pages.

    Tabs

    Panels behind a tab list, loaded the first time they open.

  • List

    Drag the handle or use the arrow keys.

    Details

    Split

    Two panes with a handle that resizes them.

  • Orders

    Stock

    People

    Invoices

    Reports

    Settings

    AutoGrid

    As many columns as fit the width.

Text and display

  • Section

    Subsection

    Group

    Heading

    Section headings from h2 to h6.

  • Every order ships within two working days.

    Prices include tax.

    Paragraph

    A paragraph of escaped text, normal or quiet.

  • 12 May 20265 min readGuides

    MetaLine

    Short facts on one line with a separator.

    1. Created

    2. Approved

      by the manager

    3. Shipped

    Timeline

    Events in order, each with a tone.

  • Bold, italic and code.

    • One
    • Two

    A link

    Markdown

    Safe Markdown rendered on the server.

Navigation

Forms and inputs

  • 0 of 300 characters

    Form

    A form of a model, checked on the server.

  • Size

    Delivery

    Controls

    Radio buttons, segmented buttons and switches.

  • Format: 12/31/2024. You can also type: today, +3d.

    Format: 2:30 PM. You can also type: now, 930.

    Format: 12/31/2024. You can also type: today, +3d.

    Date pickers

    Date, time and range pickers.

  • Lookup

    Pick a record from a search on the server.

  • Lines

    Line #ItemQuantityUnit priceTotalActions
    11,004.28
    2500.00
    Total1,504.28

    Line editor

    Rows of a model inside a form, with totals.

  • percent

    Masked inputs

    Masked, decimal, percent and password inputs.

Data

Media

  • A soft green gradient with a circle

    Image

    A picture with required alt text and size.

  • Embed

    A page of another site in a locked frame.

Feedback and overlays

  • Information: A new version is available.

    Warning: Stock

    Three products are low on stock.

    Alert

    A message in a tinted box.

  • No orders yet

    Orders you place show up here.

    EmptyState

    What a list shows when it has nothing.

  • Popover

    A button that opens a small panel.

Charts

  • Sales
    Bar chart of 2 series over 6 categories. Highest: Jun, 2026, 204.050100150200250JanFebMarAprMayJun
    • 2025
    • 2026
    Show data
    Data for Sales
    20252026
    Jan120131
    Feb98122
    Mar143150
    Apr160171
    May151166
    Jun189204

    Chart

    Bar, donut, combo and gauge charts.

  • Revenue

    184,250

    Up 12.4% from the previous period

    Target 200,000, 92% reached

    Average wait

    6.5 min

    Down 9.0% from the previous period

    Kpi

    A number with its change and trend.