Components
90 built-in components in v0.70.1.
How components work
- Positional arguments are children. Keyword arguments are props.
- Some components accept text only as children (for example Heading, Text, Item, Link and Code). Put a Code inside a Container, not inside an Item.
- Components you register with @component take keyword props only.
The ones you will use first
Component | Notes |
|---|---|
Site | One per project. Takes site-wide options such as lang, max_width, bg and font_family. |
Page | One per route. Props include title, description, favicon, og_title, og_description, og_image, meta and links. |
Container, Section, Article, Main, Header, Footer, Nav | Layout and semantic wrappers; accept any children. |
Heading | Text child; the level prop sets the heading level (as in Heading("About", level=2)). |
Text, Strong, Em, Code | Text-only children. |
Link | Requires href. Unresolved internal links halt the build. |
Button | on_click takes an Action, or a behavior name such as 'toggle'. |
Image | Requires src, which must exist under assets/. |
Pre | Wrap a Code inside for code blocks. |
List, Item | Item children are text only. |
Table, TableHead, TableBody, TableRow, TableHeaderCell, TableCell | Table building blocks. |
Details, Summary | A native disclosure widget. |
SEO props on Page
Page supports description, og_title, og_description, og_image and favicon. The meta prop is a dict of name to content, and links is a list of attribute dicts, each rendered as one link tag. That is how this site adds canonical URLs.
Every component in v0.70.1 (generated from the compiler)
Abbr,
Address,
Area,
Article,
Aside,
Audio,
Bdi,
Bdo,
Blockquote,
Button,
Caption,
Cite,
Code,
Col,
ColGroup,
Container,
Data,
Datalist,
Del,
DescriptionDetails,
DescriptionList,
DescriptionTerm,
Details,
Dfn,
Dialog,
Em,
FieldSet,
FigCaption,
Figure,
Footer,
Form,
Header,
Heading,
HorizontalRule,
IFrame,
Image,
Input,
Ins,
Item,
Kbd,
Label,
Legend,
LineBreak,
Link,
List,
Main,
Map,
Mark,
Meter,
Nav,
NoScript,
OptGroup,
Option,
OrderedList,
Output,
Page,
Picture,
PictureSource,
Pre,
Progress,
Q,
Repeat,
Rp,
Rt,
Ruby,
Samp,
Section,
Select,
Show,
Small,
Source,
Span,
Strong,
Sub,
Summary,
Sup,
Table,
TableBody,
TableCell,
TableFoot,
TableHead,
TableHeaderCell,
TableRow,
Text,
Textarea,
Time,
Track,
Var,
Video,
WbrProps and child rules change between versions. Run
arklight search <Name>for the authoritative contract.