Components
Every component of the Zeyn framework, running live. Open one to see its examples, the code that builds them and its API.
Layout
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
Every order ships within two working days.
Prices include tax.
Paragraph
A paragraph of escaped text, normal or quiet.
MetaLine
Short facts on one line with a separator.
- PaidOverduePendingNewDraft
Badge
A short status label in a tone.
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.
Created
Approved
by the manager
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.
Navigation
Breadcrumb
The trail of links to the current page.
PrevNext
Links to the previous and the next item.
AlphaIndex
A letter bar from the user's alphabet.
MenuButton
Drop down and split buttons with actions.
ExternalLink
A link that leaves the app safely.
Forms and inputs
Form
A form of a model, checked on the server.
Controls
Radio buttons, segmented buttons and switches.
Lookup
Pick a record from a search on the server.
Line editor
Rows of a model inside a form, with totals.
Masked inputs
Masked, decimal, percent and password inputs.
Data
Code Name Kind Price Stock P-001 Field notes 101 Book ₺91.69 37 P-002 Garden trowel 102 Tool ₺170.88 74 P-003 Fern 103 Plant ₺250.07 21 P-004 City atlas 104 Book ₺329.26 58 P-005 Hand saw 105 Tool ₺408.45 5 P-006 Olive tree 106 Plant ₺487.64 42 DataGrid
Rows of an action with paging, sorting and filters.
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
Nothing to show.
Rail
A row of cards that scrolls sideways.
Team
Nothing to show.
List
Rows with an image, a title and meta text.
SearchBox
A search field with suggestions.
- Loading…
Tree
Branches loaded from the server as they open.
This week
Sunday
Nothing planned
Monday
- Team stand up
- Design review
Tuesday Today
- Workshop
Wednesday
- Release
Thursday
- Planning
- Lunch talk
Friday
- Demo day
Saturday
- Open house
WeekSchedule
Seven day columns of rows from an action.
Media
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.
- 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.
Product
- Code
- P-002
- Price
- ₺170.88
- Stock
- 74
Popover
A button that opens a small panel.
Busy
An overlay while a slow action runs.
Shell
Toolbox
A group of tool buttons, one selected.