Shipping
Orders placed before noon leave the same day.
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.
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.
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.
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.
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
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.
Chips
Link chips and filter chips over a screen param.
MenuButton
Drop down and split buttons with actions.
ExternalLink
A link that leaves the app safely.
Share
Share a link, or copy it where sharing is missing.
Forms and inputs
Date pickers
Date, time and range pickers.
Lookup
Pick a record from a search on the server.
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.
NewField notes 101P-001₺91.69
NewGarden trowel 102P-002₺170.88- NewFern 103P-003₺250.07
NewCity atlas 104P-004₺329.26
Nothing to show.
ImageCard
A card with an image, badges and progress.
- Loading…
Tree
Branches loaded from the server as they open.
Media
Feedback and overlays
- 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.
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.