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

  • Information: First

    Success: Second

    Warning: Third

    Stack

    Nodes one under the other with a gap.

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

  • Details

    A panel groups related content under a title.

    Panel

    A titled section that can collapse.

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

  • Paid
    Overdue
    Pending
    New
    Draft

    Badge

    A short status label in a tone.

  • Ada Lovelace

    Avatar

    A picture of a person or their initials.

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

    DescriptionList

    Label and value pairs of a record.

    1. Created

    2. Approved

      by the manager

    3. Shipped

    Timeline

    Events in order, each with a tone.

  • Show the answer

    Water at about 80 degrees and two minutes of steeping.

    Spoiler

    Content hidden until the reader opens it.

  • RelativeTime

    A moment shown as "5 minutes ago" in the page language.

Navigation

Forms and inputs

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

  • Stars

    Rating

    A whole number from 1 to N shown as stars.

  • ActionButton

    A button that runs an action.

Data

  • CodeNameKindPriceStock
    P-001Field notes 101Book₺91.6937
    P-002Garden trowel 102Tool₺170.8874
    P-003Fern 103Plant₺250.0721
    P-004City atlas 104Book₺329.2658
    P-005Hand saw 105Tool₺408.455
    P-006Olive tree 106Plant₺487.6442

    DataGrid

    Rows of an action with paging, sorting and filters.

  • Products

    • Bamboo 112₺362.78
    • Bamboo 124₺113.06
    • Bamboo 136₺463.34
    • Bamboo 148₺213.62
    • Bamboo 160₺563.90
    • Cactus 109₺125.21
    • Cactus 121₺475.49
    • Cactus 133₺225.77

    CardGrid

    Rows of an action shown as cards.

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

  • New arrivals

    • Field notes 101₺91.69
    • Garden trowel 102₺170.88
    • Fern 103₺250.07
    • City atlas 104₺329.26
    • Hand saw 105₺408.45
    • Olive tree 106₺487.64
    • Cookbook 107₺566.83
    • Tape measure 108₺46.02
    • Cactus 109₺125.21
    • Poetry 110₺204.40
    • Pliers 111₺283.59
    • Bamboo 112₺362.78

    Rail

    A row of cards that scrolls sideways.

  • Team

    List

    Rows with an image, a title and meta text.

  • SearchBox

    A search field with suggestions.

  • This week

    Sunday

    Nothing planned

    Monday

    • Team stand up09:00
    • Design review14:00

    Tuesday Today

    • Workshop10:30

    Wednesday

    • Release16:00

    Thursday

    • Planning09:30
    • Lunch talk12:30

    Friday

    • Demo day15:00

    Saturday

    • Open house11:00

    WeekSchedule

    Seven day columns of rows from an action.

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.

  • Fresh every morning

    Order before nine and it is at your door by noon.

    Hero

    A large image section, with slides that move only when asked.

Feedback and overlays

  • Information: A new version is available.

    Warning: Stock

    Three products are low on stock.

    Alert

    A message in a tinted box.

  • Loading…

    Skeleton

    Placeholder lines while content loads.

  • No orders yet

    Orders you place show up here.

    EmptyState

    What a list shows when it has nothing.

  • Busy

    An overlay while a slow action runs.

  • Toast

    A short notice after an action.

  • Reactions

    Reaction buttons with counts stored by an action.

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.