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.

  • Shipping

    Orders placed before noon leave the same day.

    Card

    A bordered box with an optional title.

  • A sturdy notebook with 120 pages.

    Tabs

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

Text and display

  • Paid
    Overdue
    Pending
    New
    Draft

    Badge

    A short status label in a tone.

  • Code
    P-001
    Name
    Field notes 101
    Kind
    Book
    Price
    ₺91.69

    DescriptionList

    Label and value pairs of a record.

Navigation

Forms and inputs

  • Size

    Delivery

    Controls

    Radio buttons, segmented buttons and switches.

  • ActionButton

    A button that runs an action.

Data

    • NewField notes 101P-001₺91.69
    • NewGarden trowel 102P-002₺170.88
    • NewFern 103P-003₺250.07
    • NewCity atlas 104P-004₺329.26

    ImageCard

    A card with an image, badges and progress.

  • SearchBox

    A search field with suggestions.

    • Loading…

    Tree

    Branches loaded from the server as they open.

Media

  • 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.

  • Import64%
    Storage92%

    Progress

    A labelled progress bar.

  • Popover

    A button that opens a small panel.

  • Busy

    An overlay while a slow action runs.

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.

Shell

  • Toolbox

    A group of tool buttons, one selected.

  • Ready
    UTF-8

    StatusBar

    A bar of short status texts.