> MonsterUI is a python library which brings styling to python for FastHTML apps.# monsterui Module Documentation ## monsterui.core - `class ThemeRadii(Enum)` Members: none, sm, md, lg - `class ThemeShadows` - `class ThemeFont` - `class Theme(Enum)` Selector to choose theme and get all headers needed for app. Includes frankenui + tailwind + daisyui + highlight.js options Members: slate, stone, gray, neutral, red, rose, orange, green, blue, yellow, violet, zinc - `headers(self, mode, daisy, highlightjs, katex, radii, shadows, font)` Create frankenui and tailwind cdns - `local_headers(self, mode, static_dir, daisy, highlightjs, katex, radii, shadows, font)` Create headers using local files downloaded from CDNs ## monsterui.daisy - `class AlertT(Enum)` Alert styles from DaisyUI Members: info, success, warning, error - `def Alert(*c, **kwargs)` Alert informs users about important events. - `class StepsT(Enum)` Options for Steps Members: vertical, horizonal - `class StepT(Enum)` Step styles for LiStep Members: primary, secondary, accent, info, success, warning, error, neutral - `def Steps(*li, **kwargs)` Creates a steps container - `def LiStep(*c, **kwargs)` Creates a step list item - `class LoadingT(Enum)` Members: spinner, dots, ring, ball, bars, infinity, xs, sm, md, lg - `def Loading(cls, htmx_indicator, **kwargs)` Creates a loading animation component - `class ToastHT(Enum)` Horizontal position for Toast Members: start, center, end - `class ToastVT(Enum)` Vertical position for Toast Members: top, middle, bottom ## monsterui.foundations > Data Structures and Utilties - `def stringify(o)` Converts input types into strings that can be passed to FT components - `class VEnum(Enum)` Members: - `__str__(self)` - `__add__(self, other)` - `__radd__(self, other)` ## monsterui.franken - `class TextT(Enum)` Text Styles from https://franken-ui.dev/docs/text Members: paragraph, lead, meta, gray, italic, xs, sm, lg, xl, light, normal, medium, bold, extrabold, muted, primary, secondary, success, warning, error, info, left, right, center, justify, start, end, top, middle, bottom, truncate, break_, nowrap, underline, highlight - `class TextPresets(Enum)` Common Typography Presets Members: muted_sm, muted_lg, bold_sm, bold_lg, md_weight_sm, md_weight_muted - `def CodeSpan(*c, **kwargs)` A CodeSpan with Styling - `def CodeBlock(*c, **kwargs)` CodeBlock with Styling - `def H1(*c, **kwargs)` H1 with styling and appropriate size - `def H2(*c, **kwargs)` H2 with styling and appropriate size - `def H3(*c, **kwargs)` H3 with styling and appropriate size - `def H4(*c, **kwargs)` H4 with styling and appropriate size - `def H5(*c, **kwargs)` H5 with styling and appropriate size - `def H6(*c, **kwargs)` H6 with styling and appropriate size - `def Subtitle(*c, **kwargs)` Styled muted_sm text designed to go under Headings and Titles - `def Q(*c, **kwargs)` Styled quotation mark - `def Em(*c, **kwargs)` Styled emphasis text - `def Strong(*c, **kwargs)` Styled strong text - `def I(*c, **kwargs)` Styled italic text - `def Small(*c, **kwargs)` Styled small text - `def Mark(*c, **kwargs)` Styled highlighted text - `def Del(*c, **kwargs)` Styled deleted text - `def Ins(*c, **kwargs)` Styled inserted text - `def Sub(*c, **kwargs)` Styled subscript text - `def Sup(*c, **kwargs)` Styled superscript text - `def Blockquote(*c, **kwargs)` Blockquote with Styling - `def Caption(*c, **kwargs)` Styled caption text - `def Cite(*c, **kwargs)` Styled citation text - `def Time(*c, **kwargs)` Styled time element - `def Address(*c, **kwargs)` Styled address element - `def Abbr(*c, **kwargs)` Styled abbreviation with dotted underline - `def Dfn(*c, **kwargs)` Styled definition term with italic and medium weight - `def Kbd(*c, **kwargs)` Styled keyboard input with subtle background - `def Samp(*c, **kwargs)` Styled sample output with subtle background - `def Var(*c, **kwargs)` Styled variable with italic monospace - `def Figure(*c, **kwargs)` Styled figure container with card-like appearance - `def Details(*c, **kwargs)` Styled details element - `def Summary(*c, **kwargs)` Styled summary element - `def Data(*c, **kwargs)` Styled data element - `def Meter(*c, **kwargs)` Styled meter element - `def S(*c, **kwargs)` Styled strikethrough text (different semantic meaning from Del) - `def U(*c, **kwargs)` Styled underline (for proper names in Chinese, proper spelling etc) - `def Output(*c, **kwargs)` Styled output element for form results - `def PicSumImg(h, w, id, grayscale, blur, **kwargs)` Creates a placeholder image using https://picsum.photos/ - `def AccordionItem(title, *c)` Creates a single item for use within an Accordion component, handling title, content, and open state. - `def Accordion(*c, **kwargs)` Creates a styled Accordion container using accordion component. - `class ButtonT(Enum)` Options for styling Buttons Members: default, ghost, primary, secondary, destructive, text, link, xs, sm, lg, xl, icon - `def Button(*c, **kwargs)` Button with Styling (defaults to `submit` for form submission) - `class ContainerT(Enum)` Max width container sizes from https://franken-ui.dev/docs/container Members: xs, sm, lg, xl, expand - `class BackgroundT(Enum)` Members: muted, primary, secondary, default - `def Container(*c, **kwargs)` Div to be used as a container that often wraps large sections or a page of content - `def Titled(title, *c, **kwargs)` Creates a standard page structure for titled page. Main(Container(title, content)) - `class DividerT(Enum)` Divider Styles from https://franken-ui.dev/docs/divider Members: icon, sm, vertical - `def Divider(*c, **kwargs)` Divider with default styling and margin - `def DividerSplit(*c)` Creates a simple horizontal line divider with configurable thickness and vertical spacing - `def Article(*c, **kwargs)` A styled article container for blog posts or similar content - `def ArticleTitle(*c, **kwargs)` A title component for use within an Article - `def ArticleMeta(*c, **kwargs)` A metadata component for use within an Article showing things like date, author etc - `class SectionT(Enum)` Section styles from https://franken-ui.dev/docs/section Members: default, muted, primary, secondary, xs, sm, lg, xl, remove_vertical - `def Section(*c, **kwargs)` Section with styling and margins - `def Form(*c, **kwargs)` A Form with default spacing between form elements - `def Fieldset(*c, **kwargs)` A Fieldset with default styling - `def Legend(*c, **kwargs)` A Legend with default styling - `def Input(*c, **kwargs)` An Input with default styling - `def Radio(*c, **kwargs)` A Radio with default styling - `def CheckboxX(*c, **kwargs)` A Checkbox with default styling - `def Range(*c, **kwargs)` A Range with default styling - `def TextArea(*c, **kwargs)` A Textarea with default styling - `def Switch(*c, **kwargs)` A Switch with default styling - `def Upload(*c, **kwargs)` A file upload component with default styling - `def UploadZone(*c, **kwargs)` A file drop zone component with default styling - `def FormLabel(*c, **kwargs)` A Label with default styling - `class LabelT(Enum)` Members: primary, secondary, danger - `def Label(*c, **kwargs)` FrankenUI labels, which look like pills - `def UkFormSection(title, description, *c)` A form section with a title, description and optional button - `def GenericLabelInput(label, lbl_cls, input_cls, container, cls, id, input_fn, **kwargs)` `Div(Label,Input)` component with Uk styling injected appropriately. Generally you should higher level API, such as `LabelInput` which is created for you in this library - `def LabelInput(label, lbl_cls, input_cls, cls, id, **kwargs)` A `FormLabel` and `Input` pair that provides default spacing and links/names them based on id - `def LabelRadio(label, lbl_cls, input_cls, container, cls, id, **kwargs)` A FormLabel and Radio pair that provides default spacing and links/names them based on id - `def LabelCheckboxX(label, lbl_cls, input_cls, container, cls, id, **kwargs)` A FormLabel and CheckboxX pair that provides default spacing and links/names them based on id - `def Options(*c)` Helper function to wrap things into `Option`s for use in `Select` - `def Select(*option, **kwargs)` Creates a select dropdown with uk styling and option for adding a search box - `def LabelSelect(*option, **kwargs)` A FormLabel and Select pair that provides default spacing and links/names them based on id - `@delegates(GenericLabelInput, but=['input_fn', 'cls']) def LabelRange(label, lbl_cls, input_cls, cls, id, value, min, max, step, label_range, **kwargs)` A FormLabel and Range pair that provides default spacing and links/names them based on id - `class AT(Enum)` Link styles from https://franken-ui.dev/docs/link Members: muted, text, reset, primary, classic - `class ListT(Enum)` List styles using Tailwind CSS Members: disc, circle, square, decimal, hyphen, bullet, divider, striped - `def ModalContainer(*c, **kwargs)` Creates a modal container that components go in - `def ModalDialog(*c, **kwargs)` Creates a modal dialog - `def ModalHeader(*c, **kwargs)` Creates a modal header - `def ModalBody(*c, **kwargs)` Creates a modal body - `def ModalFooter(*c, **kwargs)` Creates a modal footer - `def ModalTitle(*c, **kwargs)` Creates a modal title - `def ModalCloseButton(*c, **kwargs)` Creates a button that closes a modal with js - `def Modal(*c, **kwargs)` Creates a modal with the appropriate classes to put the boilerplate in the appropriate places for you - `def Placeholder(*c, **kwargs)` Creates a placeholder - `def Progress(*c, **kwargs)` Creates a progress bar - `def UkIcon(icon, height, width, stroke_width, cls, **kwargs)` Creates an icon using lucide icons - `def UkIconLink(icon, height, width, stroke_width, cls, button, **kwargs)` Creates an icon link using lucide icons - `def DiceBearAvatar(seed_name, h, w)` Creates an Avatar using https://dicebear.com/ - `def Center(*c, **kwargs)` Centers contents both vertically and horizontally by default - `class FlexT(Enum)` Flexbox modifiers using Tailwind CSS Members: block, inline, left, center, right, between, around, stretch, top, middle, bottom, row, row_reverse, column, column_reverse, nowrap, wrap, wrap_reverse - `def Grid(*div, **kwargs)` Creates a responsive grid layout with smart defaults based on content - `def DivFullySpaced(*c, **kwargs)` Creates a flex div with it's components having as much space between them as possible - `def DivCentered(*c, **kwargs)` Creates a flex div with it's components centered in it - `def DivLAligned(*c, **kwargs)` Creates a flex div with it's components aligned to the left - `def DivRAligned(*c, **kwargs)` Creates a flex div with it's components aligned to the right - `def DivVStacked(*c, **kwargs)` Creates a flex div with it's components stacked vertically - `def DivHStacked(*c, **kwargs)` Creates a flex div with it's components stacked horizontally - `class NavT(Enum)` Members: default, primary, secondary - `def NavContainer(*li, **kwargs)` Creates a navigation container (useful for creating a sidebar navigation). A Nav is a list (NavBar is something different) - `def NavParentLi(*nav_container, **kwargs)` Creates a navigation list item with a parent nav for nesting - `def NavDividerLi(*c, **kwargs)` Creates a navigation list item with a divider - `def NavHeaderLi(*c, **kwargs)` Creates a navigation list item with a header - `def NavSubtitle(*c, **kwargs)` Creates a navigation subtitle - `def NavCloseLi(*c, **kwargs)` Creates a navigation list item with a close button - `class ScrollspyT(Enum)` Members: underline, bold - `def NavBar(*c)` Creates a responsive navigation bar with mobile menu support - `def SliderContainer(*c, **kwargs)` Creates a slider container - `def SliderItems(*c, **kwargs)` Creates a slider items container - `def SliderNav(cls, prev_cls, next_cls, **kwargs)` Navigation arrows for Slider component - `def Slider(*c, **kwargs)` Creates a slider with optional navigation arrows - `def DropDownNavContainer(*li, **kwargs)` A Nav that is part of a DropDown - `def TabContainer(*li, **kwargs)` A TabContainer where children will be different tabs - `class CardT(Enum)` Card styles from UIkit Members: default, primary, secondary, destructive, hover - `def CardTitle(*c, **kwargs)` Creates a card title - `def CardHeader(*c, **kwargs)` Creates a card header - `def CardBody(*c, **kwargs)` Creates a card body - `def CardFooter(*c, **kwargs)` Creates a card footer - `def CardContainer(*c, **kwargs)` Creates a card container - `def Card(*c, **kwargs)` Creates a Card with a header, body, and footer - `class TableT(Enum)` Members: divider, striped, hover, sm, lg, justify, middle, responsive - `def Table(*c, **kwargs)` Creates a table - `def TableFromLists(header_data, body_data, footer_data, header_cell_render, body_cell_render, footer_cell_render, cls, sortable, **kwargs)` Creates a Table from a list of header data and a list of lists of body data - `def TableFromDicts(header_data, body_data, footer_data, header_cell_render, body_cell_render, footer_cell_render, cls, sortable, **kwargs)` Creates a Table from a list of header data and a list of dicts of body data - `def apply_classes(html_str, class_map, class_map_mods)` Apply classes to html string - `def render_md(md_content, class_map, class_map_mods)` Renders markdown using mistletoe and lxml - `def get_franken_renderer(img_dir)` Create a renderer class with the specified img_dir - `def ThemePicker(color, radii, shadows, font, mode, cls, custom_themes)` Theme picker component with configurable sections - `def LightboxContainer(*lightboxitem, **kwargs)` Lightbox container that will hold `LightboxItems` - `def LightboxItem(*c, **kwargs)` Anchor tag with appropriate structure to go inside a `LightBoxContainer` """FrankenUI Playground Example built with MonsterUI (original design by ShadCN)""" from fasthtml.common import * from monsterui.all import * from fasthtml.svg import * app, rt = fast_app(hdrs=Theme.blue.headers()) preset_options = ["Grammatical Standard English", "Summarize for a 2nd grader", "Text to command","Q&A","English to other languages","Parse unstructured data", "Classification","Natural language to Python","Explain code","Chat","More examples"] def playground_navbar(): save_modal = Modal( ModalTitle("Save preset"), P("This will save the current playground state as a preset which you can access later or share with others.",cls=("mt-1.5", TextPresets.muted_sm)), LabelInput("Name", id="name"), LabelInput("Description", id="description"), ModalCloseButton("Save", cls=ButtonT.primary), id="save") share_dd = Div(cls="space-y-6 p-4")( H3("Share preset"), P("Anyone who has this link and an OpenAI account will be able to view this.", cls=TextPresets.muted_sm), Div(Input(value="https://platform.openai.com/playground/p/7bbKYQvsVkNmVb8NGcdUOLae?model=text-davinci-003", readonly=True), Button(UkIcon('copy'), cls=(ButtonT.primary, "uk-drop-close",'mt-4')))) rnav = ( Select(*Options(*preset_options), name='preset', optgroup_label="Examples", placeholder='Load a preset', searchable=True, cls='h-9 w-[200px] lg:w-[300px]'), Button("Save", cls=ButtonT.secondary, data_uk_toggle="#save"),save_modal, Button("View Code", cls=ButtonT.secondary), Button("Share", cls=ButtonT.secondary),DropDownNavContainer(share_dd), Button(UkIcon(icon="ellipsis"), cls=ButtonT.secondary), DropDownNavContainer( Li(A("Content filter preferences")), NavDividerLi(), Li(A("Delete preset", cls="text-destructive")), uk_dropdown="mode: click")) return NavBar(*rnav, brand=H4('Playground')) rsidebar = NavContainer( Select( Optgroup(map(Option,("text-davinci-003", "text-curie-001", "text-babbage-001", "text-ada-001")),label='GPT-3'), Optgroup(map(Option,("code-davinci-002", "code-cushman-001")),label='Codex'), label="Model", searchable=True), LabelRange(label='Temperature', value='12'), LabelRange(label='Maximum Length', value='80'), LabelRange(label='Top P', value='40'), cls='space-y-6 mt-8') @rt def index(): navbar = playground_navbar() main_content = Div( Div(cls="flex-1")( Textarea(cls="uk-textarea h-full p-4", placeholder="Write a tagline for an ice cream shop")), cls="flex h-[700px] p-8 w-4/5") bottom_buttons = Div( Button("Submit", cls=ButtonT.primary), Button(UkIcon(icon="history"), cls=ButtonT.secondary), cls="flex gap-x-2") return Title("Playground Example"),Div(navbar, Div(cls="flex w-full")(main_content, rsidebar), bottom_buttons) serve()"MonsterUI Scrollspy Example application" from fasthtml.common import * from monsterui.all import * import random # Using the "slate" theme with Highlight.js enabled hdrs = Theme.slate.headers(highlightjs=True) app, rt = fast_app(hdrs=hdrs) ################################ ### Example Data and Content ### ################################ products = [ {"name": "Laptop", "price": "$999"}, {"name": "Smartphone", "price": "$599"} ] code_example = """ # Python Code Example def greet(name): return f"Hello, {name}!" print(greet("World")) """ testimonials = [ {"name": "Alice", "feedback": "Great products and excellent customer service!"}, {"name": "Bob", "feedback": "Fast shipping and amazing quality!"}, {"name": "Charlie", "feedback": "Amazing experience! Will definitely buy again."}, {"name": "Diana", "feedback": "Affordable prices and great variety!"}, {"name": "Edward", "feedback": "Customer support was very helpful."}, {"name": "Fiona", "feedback": "Loved the design and quality!"} ] # Team members team = [ {"name": "Isaac Flath", "role": "CEO"}, {"name": "Benjamin Clavié", "role": "AI Researcher"}, {"name": "Alexis Gallagher", "role": "ML Engineer"}, {"name": "Hamel Husain", "role": "Data Scientist"}, {"name": "Austin Huang", "role": "Software Engineer"}, {"name": "Benjamin Warner", "role": "Product Manager"}, {"name": "Jonathan Whitaker", "role": "UX Designer"}, {"name": "Kerem Turgutlu", "role": "DevOps Engineer"}, {"name": "Curtis Allan", "role": "DevOps Engineer"}, {"name": "Audrey Roy Greenfeld", "role": "Security Analyst"}, {"name": "Nathan Cooper", "role": "Full Stack Developer"}, {"name": "Jeremy Howard", "role": "CTO"}, {"name": "Wayde Gilliam", "role": "Cloud Architect"}, {"name": "Daniel Roy Greenfeld", "role": "Blockchain Expert"}, {"name": "Tommy Collins", "role": "AI Ethics Researcher"} ] def ProductCard(p,img_id=1): return Card( PicSumImg(w=500, height=100, id=img_id), DivFullySpaced(H4(p["name"]), P(Strong(p["price"], cls=TextT.sm))), Button("Details", cls=(ButtonT.primary, "w-full"))) def TestimonialCard(t,img_id=1): return Card( DivLAligned(PicSumImg(w=50, h=50, cls='rounded-full', id=img_id), H4(t["name"])), P(Q((t["feedback"])))) def TeamCard(m,img_id=1): return Card( DivLAligned( PicSumImg(w=50, h=50, cls='rounded-full', id=img_id), Div(H4(m["name"]), P(m["role"]))), DivRAligned( UkIcon('twitter', cls='w-5 h-5'), UkIcon('linkedin', cls='w-5 h-5'), UkIcon('github', cls='w-5 h-5'), cls=TextT.gray+'space-x-2' ), cls='p-3') ################################ ### Navigation and Scrollspy ### ################################ scrollspy_links = ( A("Welcome", href="#welcome-section"), A("Products", href="#products-section"), A("Testimonials", href="#testimonials-section"), A("Team", href="#team-section"), A("Code Example", href="#code-section")) @rt def index(): def _Section(*c, **kwargs): return Section(*c, cls='space-y-3 my-48',**kwargs) return Container( NavBar( *scrollspy_links, brand=DivLAligned(H3("Scrollspy Demo!"),UkIcon('rocket',height=30,width=30)), sticky=True, uk_scrollspy_nav=True, scrollspy_cls=ScrollspyT.bold), NavContainer( *map(Li, scrollspy_links), uk_scrollspy_nav=True, sticky=True, cls=(NavT.primary,'pt-20 px-5 pr-10')), Container( # Notice the ID of each section corresponds to the `scrollspy_links` dictionary # So in scollspy `NavContainer` the `href` of each `Li` is the ID of the section DivCentered( H1("Welcome to the Store!"), Subtitle("Explore our products and enjoy dynamic code examples."), id="welcome-section"), _Section(H2("Products"), Grid(*[ProductCard(p,img_id=i) for i,p in enumerate(products)], cols_lg=2), id="products-section"), _Section(H2("Testimonials"), Slider(*[TestimonialCard(t,img_id=i) for i,t in enumerate(testimonials)]), id="testimonials-section"), _Section(H2("Our Team"), Grid(*[TeamCard(m,img_id=i) for i,m in enumerate(team)], cols_lg=2, cols_max=3), id="team-section"), _Section(H2("Code Example"), CodeBlock(code_example, lang="python"), id="code-section")), cls=(ContainerT.xl,'uk-container-expand')) serve()"""FrankenUI Mail Example built with MonsterUI (original design by ShadCN)""" from fasthtml.common import * from monsterui.all import * from fasthtml.svg import * import pathlib, json from datetime import datetime app, rt = fast_app(hdrs=Theme.blue.headers()) sidebar_group1 = (('home', 'Inbox', '128'), ('file-text', 'Drafts', '9'), (' arrow-up-right', 'Sent', ''), ('ban', 'Junk', '23'), ('trash', 'Trash', ''), ('folder', 'Archive', '')) sidebar_group2 = (('globe','Social','972'),('info','Updates','342'),('messages-square','Forums','128'), ('shopping-cart','Shopping','8'),('shopping-bag','Promotions','21'),) def MailSbLi(icon, title, cnt): return Li(A(DivLAligned(Span(UkIcon(icon)),Span(title),P(cnt, cls=TextPresets.muted_sm)),href='#', cls='hover:bg-secondary p-4')) sidebar = NavContainer( NavHeaderLi(H3("Email"), cls='p-3'), Li(Select(map(Option, ('alicia@example.com','alicia@gmail.com', 'alicia@yahoo.com')))), *[MailSbLi(i, t, c) for i, t, c in sidebar_group1], Li(Hr()), *[MailSbLi(i, t, c) for i, t, c in sidebar_group2], cls='mt-3') mail_data = json.load(open(pathlib.Path('data/mail.json'))) def format_date(date_str): date_obj = datetime.fromisoformat(date_str) return date_obj.strftime("%Y-%m-%d %I:%M %p") def MailItem(mail): cls_base = 'relative rounded-lg border border-border p-3 text-sm hover:bg-secondary space-y-2' cls = f"{cls_base} {'bg-muted' if mail == mail_data[0] else ''} {'tag-unread' if not mail['read'] else 'tag-mail'}" return Li( DivFullySpaced( DivLAligned( Strong(mail['name']), Span(cls='flex h-2 w-2 rounded-full bg-blue-600') if not mail['read'] else ''), Time(format_date(mail['date']), cls='text-xs')), Small(mail['subject'], href=f"#mail-{mail['id']}"), Div(mail['text'][:100] + '...', cls=TextPresets.muted_sm), DivLAligned( *[Label(A(label, href='#'), cls='uk-label-primary' if label == 'work' else '') for label in mail['labels']]), cls=cls) def MailList(mails): return Ul(cls='js-filter space-y-2 p-4 pt-0')(*[MailItem(mail) for mail in mails]) def MailContent(): return Div(cls='flex flex-col',uk_filter="target: .js-filter")( Div(cls='flex px-4 py-2 ')( H3('Inbox'), TabContainer(Li(A("All Mail",href='#', role='button'),cls='uk-active', uk_filter_control="filter: .tag-mail"), Li(A("Unread",href='#', role='button'), uk_filter_control="filter: .tag-unread"), alt=True, cls='ml-auto max-w-40', )), Div(cls='flex flex-1 flex-col')( Div(cls='p-4')( Div(cls='uk-inline w-full')( Span(cls='uk-form-icon text-muted-foreground')(UkIcon('search')), Input(placeholder='Search'))), Div(cls='flex-1 overflow-y-auto max-h-[600px]')(MailList(mail_data)))) def IconNavItem(*d): return [Li(A(UkIcon(o[0],uk_tooltip=o[1]))) for o in d] def IconNav(*c,cls=''): return Ul(cls=f'uk-iconnav {cls}')(*c) def MailDetailView(mail): top_icons = [('folder','Archive'), ('ban','Move to junk'), ('trash','Move to trash')] reply_icons = [('reply','Reply'), ('reply','Reply all'), ('forward','Forward')] dropdown_items = ['Mark as unread', 'Star read', 'Add Label', 'Mute Thread'] return Container( DivFullySpaced( DivLAligned( DivLAligned(*[UkIcon(o[0],uk_tooltip=o[1]) for o in top_icons]), Div(UkIcon('clock', uk_tooltip='Snooze'), cls='pl-2'), cls='space-x-2 divide-x divide-border'), DivLAligned( *[UkIcon(o[0],uk_tooltip=o[1]) for o in reply_icons], Div(UkIcon('ellipsis-vertical',button=True)), DropDownNavContainer(*map(lambda x: Li(A(x)), dropdown_items)))), DivLAligned( Span(mail['name'][:2], cls='flex h-10 w-10 items-center justify-center rounded-full bg-muted'), Div(Strong(mail['name']), Div(mail['subject']), DivLAligned(P('Reply-To:'), A(mail['email'], href=f"mailto:{mail['email']}"), cls='space-x-1'), P(Time(format_date(mail['date']))), cls='space-y-1'+TextT.sm), cls='m-4 space-x-4'), DividerLine(), P(mail['text'], cls=TextT.sm +'p-4'), DividerLine(), Div(TextArea(id='message', placeholder=f"Reply {mail['name']}"), DivFullySpaced( LabelSwitch('Mute this thread',id='mute'), Button('Send', cls=ButtonT.primary)), cls='space-y-4')) @rt def index(): return Title("Mail Example"),Container( Grid(Div(sidebar, cls='col-span-1'), Div(MailContent(), cls='col-span-2'), Div(MailDetailView(mail_data[0]), cls='col-span-2'), cols_sm=1, cols_md=1, cols_lg=5, cols_xl=5, gap=0, cls='flex-1'), cls=('flex', ContainerT.xl)) serve()"""FrankenUI Forms Example built with MonsterUI (original design by ShadCN)""" from fasthtml.common import * from monsterui.all import * from fasthtml.svg import * app, rt = fast_app(hdrs=Theme.blue.headers()) def HelpText(c): return P(c,cls=TextPresets.muted_sm) def heading(): return Div(cls="space-y-5")( H2("Settings"), Subtitle("Manage your account settings and set e-mail preferences."), DividerSplit()) sidebar = NavContainer( *map(lambda x: Li(A(x)), ("Profile", "Account", "Appearance", "Notifications", "Display")), uk_switcher="connect: #component-nav; animation: uk-animation-fade", cls=(NavT.secondary,"space-y-4 p-4 w-1/5")) def FormSectionDiv(*c, cls='space-y-2', **kwargs): return Div(*c, cls=cls, **kwargs) def FormLayout(title, subtitle, *content, cls='space-y-3 mt-4'): return Container(Div(H3(title), Subtitle(subtitle), DividerLine(), Form(*content, cls=cls))) def profile_form(): content = (FormSectionDiv( LabelInput("Username", placeholder='sveltecult', id='username'), HelpText("This is your public display name. It can be your real name or a pseudonym. You can only change this once every 30 days.")), FormSectionDiv( LabelSelect( Option("Select a verified email to display", value="", selected=True, disabled=True), *[Option(o, value=o) for o in ('m@example.com', 'm@yahoo.com', 'm@cloud.com')], label="Email", id="email"), HelpText("You can manage verified email addresses in your email settings.")), FormSectionDiv( LabelTextArea("Bio", id="bio", placeholder="Tell us a little bit about yourself"), HelpText("You can @mention other users and organizations to link to them."), P("String must contain at least 4 character(s)", cls="text-destructive")), FormSectionDiv( FormLabel("URLs"), HelpText("Add links to your website, blog, or social media profiles."), Input(value="https://www.franken-ui.dev"), Input(value="https://github.com/sveltecult/franken-ui"), Button("Add URL")), Button('Update profile', cls=ButtonT.primary)) return FormLayout('Profile', 'This is how others will see you on the site.', *content) def account_form(): content = ( FormSectionDiv( LabelInput("Name", placeholder="Your name", id="name"), HelpText("This is the name that will be displayed on your profile and in emails.")), FormSectionDiv( LabelInput("Date of Birth", type="date", placeholder="Pick a date", id="date_of_birth"), HelpText("Your date of birth is used to calculate your age.")), FormSectionDiv( LabelSelect(*Options("Select a language", "English", "French", "German", "Spanish", "Portuguese", selected_idx=1, disabled_idxs={0}), label='Language', id="language"), HelpText("This is the language that will be used in the dashboard.")), Button('Update profile', cls=ButtonT.primary)) return FormLayout('Account', 'Update your account settings. Set your preferred language and timezone.', *content) def appearance_form(): def theme_item(bg_color, content_bg, text_bg): common_content = f"space-y-2 rounded-md {content_bg} p-2 shadow-sm" item_row = lambda: Div(cls=f"flex items-center space-x-2 {common_content}")( Div(cls=f"h-4 w-4 rounded-full {text_bg}"), Div(cls=f"h-2 w-[100px] rounded-lg {text_bg}")) return Div(cls=f"space-y-2 rounded-sm {bg_color} p-2")( Div(cls=common_content)( Div(cls=f"h-2 w-[80px] rounded-lg {text_bg}"), Div(cls=f"h-2 w-[100px] rounded-lg {text_bg}")), item_row(), item_row()) common_toggle_cls = "block cursor-pointer items-center rounded-md border-2 border-muted p-1 ring-ring" content = ( FormSectionDiv( LabelSelect(*Options('Select a font family', 'Inter', 'Geist', 'Open Sans', selected_idx=2, disabled_idxs={0}), label='Font Family', id='font_family'), HelpText("Set the font you want to use in the dashboard.")), FormSectionDiv( FormLabel("Theme"), HelpText("Select the theme for the dashboard."), Grid( A(id="theme-toggle-light", cls=common_toggle_cls)(theme_item("bg-[#ecedef]", "bg-white", "bg-[#ecedef]")), A(id="theme-toggle-dark", cls=f"{common_toggle_cls} bg-popover")(theme_item("bg-slate-950", "bg-slate-800", "bg-slate-400")), cols_max=2,cls=('max-w-md','gap-8'))), Button('Update preferences', cls=ButtonT.primary)) return FormLayout('Appearance', 'Customize the appearance of the app. Automatically switch between day and night themes.', *content) notification_items = [ {"title": "Communication emails", "description": "Receive emails about your account activity.", "checked": False, "disabled": False}, {"title": "Marketing emails", "description": "Receive emails about new products, features, and more.", "checked": False, "disabled": False}, {"title": "Social emails", "description": "Receive emails for friend requests, follows, and more.", "checked": True, "disabled": False}, {"title": "Security emails", "description": "Receive emails about your account activity and security.", "checked": True, "disabled": True}] def notifications_form(): def RadioLabel(label): return DivLAligned(Radio(name="notification", checked=(label=="Nothing")), FormLabel(label)) def NotificationCard(item): return Card( Div(cls="space-y-0.5")( FormLabel(Strong(item['title'], cls=TextT.sm), HelpText(item['description'])))) content = Div( FormSectionDiv( FormLabel("Notify me about"), *map(RadioLabel, ["All new messages", "Direct messages and mentions", "Nothing"])), Div( H4("Email Notifications", cls="mb-4"), Grid(*map(NotificationCard, notification_items), cols=1)), LabelCheckboxX("Use different settings for my mobile devices", id="notification_mobile"), HelpText("You can manage your mobile notifications in the mobile settings page."), Button('Update notifications', cls=ButtonT.primary)) return FormLayout('Notifications', 'Configure how you receive notifications.', *content) def display_form(): content = ( Div(cls="space-y-2")( Div(cls="mb-4")( H5("Sidebar"), Subtitle("Select the items you want to display in the sidebar.")), *[Div(CheckboxX(id=f"display_{i}", checked=i in [0, 1, 2]),FormLabel(label)) for i, label in enumerate(["Recents", "Home", "Applications", "Desktop", "Downloads", "Documents"])]), Button('Update display', cls=ButtonT.primary)) return FormLayout('Display', 'Turn items on or off to control what\'s displayed in the app.', *content) @rt def index(): return Title("Forms Example"),Container( heading(), Div(cls="flex gap-x-12")( sidebar, Ul(id="component-nav", cls="uk-switcher max-w-2xl")( Li(cls="uk-active")(profile_form(), *map(Li, [account_form(), appearance_form(), notifications_form(), display_form()]))))) serve()"""FrankenUI Tasks Example built with MonsterUI (original design by ShadCN)""" from fasthtml.common import * from monsterui.all import * from fasthtml.svg import * import json app, rt = fast_app(hdrs=Theme.blue.headers()) def LAlignedCheckTxt(txt): return DivLAligned(UkIcon(icon='check'), P(txt, cls=TextPresets.muted_sm)) with open('data/status_list.json', 'r') as f: data = json.load(f) with open('data/statuses.json', 'r') as f: statuses = json.load(f) def _create_tbl_data(d): return {'Done': d['selected'], 'Task': d['id'], 'Title': d['title'], 'Status' : d['status'], 'Priority': d['priority'] } data = [_create_tbl_data(d) for d in data] page_size = 15 current_page = 0 paginated_data = data[current_page*page_size:(current_page+1)*page_size] priority_dd = [{'priority': "low", 'count': 36 }, {'priority': "medium", 'count': 33 }, {'priority': "high", 'count': 31 }] status_dd = [{'status': "backlog", 'count': 21 },{'status': "todo", 'count': 21 },{'status': "progress", 'count': 20 },{'status': "done",'count': 19 },{'status': "cancelled", 'count': 19 }] def create_hotkey_li(hotkey): return NavCloseLi(A(DivFullySpaced(hotkey[0], Span(hotkey[1], cls=TextPresets.muted_sm)))) hotkeys_a = (('Profile','⇧⌘P'),('Billing','⌘B'),('Settings','⌘S'),('New Team','')) hotkeys_b = (('Logout',''), ) avatar_opts = DropDownNavContainer( NavHeaderLi(P('sveltecult'),NavSubtitle('leader@sveltecult.com')), NavDividerLi(), *map(create_hotkey_li, hotkeys_a), NavDividerLi(), *map(create_hotkey_li, hotkeys_b),) def CreateTaskModal(): return Modal( Div(cls='p-6')( ModalTitle('Create Task'), P('Fill out the information below to create a new task', cls=TextPresets.muted_sm), Br(), Form(cls='space-y-6')( Grid(Div(Select(*map(Option,('Documentation', 'Bug', 'Feature')), label='Task Type', id='task_type')), Div(Select(*map(Option,('In Progress', 'Backlog', 'Todo', 'Cancelled', 'Done')), label='Status', id='task_status')), Div(Select(*map(Option, ('Low', 'Medium', 'High')), label='Priority', id='task_priority'))), TextArea(label='Title', placeholder='Please describe the task that needs to be completed'), DivRAligned( ModalCloseButton('Cancel', cls=ButtonT.ghost), ModalCloseButton('Submit', cls=ButtonT.primary), cls='space-x-5'))), id='TaskForm') page_heading = DivFullySpaced(cls='space-y-2')( Div(cls='space-y-2')( H2('Welcome back!'),P("Here's a list of your tasks for this month!", cls=TextPresets.muted_sm)), Div(DiceBearAvatar("sveltcult",8,8),avatar_opts)) table_controls =(Input(cls='w-[250px]',placeholder='Filter task'), Button("Status"), DropDownNavContainer(map(NavCloseLi,[A(DivFullySpaced(P(a['status']), P(a['count'])),cls='capitalize') for a in status_dd])), Button("Priority"), DropDownNavContainer(map(NavCloseLi,[A(DivFullySpaced(LAlignedCheckTxt(a['priority']), a['count']),cls='capitalize') for a in priority_dd])), Button("View"), DropDownNavContainer(map(NavCloseLi,[A(LAlignedCheckTxt(o)) for o in ['Title','Status','Priority']])), Button('Create Task',cls=(ButtonT.primary, TextPresets.bold_sm), data_uk_toggle="target: #TaskForm")) def task_dropdown(): return Div(Button(UkIcon('ellipsis')), DropDownNavContainer( map(NavCloseLi,[ *map(A,('Edit', 'Make a copy', 'Favorite')), A(DivFullySpaced(*[P(o, cls=TextPresets.muted_sm) for o in ('Delete', '⌘⌫')]))]))) def header_render(col): match col: case "Done": return Th(CheckboxX(), shrink=True) case 'Actions': return Th("", shrink=True) case _: return Th(col, expand=True) def cell_render(col, val): def _Td(*args,cls='', **kwargs): return Td(*args, cls=f'p-2 {cls}',**kwargs) match col: case "Done": return _Td(shrink=True)(CheckboxX(selected=val)) case "Task": return _Td(val, cls='uk-visible@s') # Hide on small screens case "Title": return _Td(val, cls='font-medium', expand=True) case "Status" | "Priority": return _Td(cls='uk-visible@m uk-text-nowrap capitalize')(Span(val)) case "Actions": return _Td(task_dropdown(), shrink=True) case _: raise ValueError(f"Unknown column: {col}") task_columns = ["Done", 'Task', 'Title', 'Status', 'Priority', 'Actions'] tasks_table = Div(cls='mt-4')( TableFromDicts( header_data=task_columns, body_data=paginated_data, body_cell_render=cell_render, header_cell_render=header_render, sortable=True, cls=(TableT.responsive, TableT.sm, TableT.divider))) def footer(): total_pages = (len(data) + page_size - 1) // page_size return DivFullySpaced( Div('1 of 100 row(s) selected.', cls=TextPresets.muted_sm), DivLAligned( DivCentered(f'Page {current_page + 1} of {total_pages}', cls=TextT.sm), DivLAligned(*[UkIconLink(icon=i, button=True) for i in ('chevrons-left', 'chevron-left', 'chevron-right', 'chevrons-right')]))) tasks_ui = Div(DivFullySpaced(DivLAligned(table_controls), cls='mt-8'), tasks_table, footer()) @rt def index(): return Container(page_heading, tasks_ui, CreateTaskModal()) serve()"""FrankenUI Cards Example built with MonsterUI (original design by ShadCN)""" from fasthtml.common import * from fasthtml.components import Uk_input_tag from fasthtml.svg import * from monsterui.all import * import calendar from datetime import datetime app, rt = fast_app(hdrs=Theme.blue.headers()) CreateAccount = Card( Grid(Button(DivLAligned(UkIcon('github'),Div('Github'))),Button('Google')), DividerSplit("OR CONTINUE WITH", text_cls=TextPresets.muted_sm), LabelInput('Email', id='email', placeholder='m@example.com'), LabelInput('Password', id='password',placeholder='Password', type='Password'), header=(H3('Create an Account'),Subtitle('Enter your email below to create your account')), footer=Button('Create Account',cls=(ButtonT.primary,'w-full'))) PaypalSVG_data = "M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z" AppleSVG_data = "M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701" Card1Svg = Svg(viewBox="0 0 24 24", fill="none", stroke="currentColor", stroke_linecap="round", stroke_linejoin="round", stroke_width="2", cls="h-6 w-6 mr-1")(Rect(width="20", height="14", x="2", y="5", rx="2"),Path(d="M2 10h20")) PaypalSvg = Svg(role="img", viewBox="0 0 24 24", cls="h-6 w-6 mr-1")(Path(d=PaypalSVG_data, fill="currentColor")), AppleSvg = Svg(role="img", viewBox="0 0 24 24", cls="h-6 w-6 mr-1")(Path(d=AppleSVG_data, fill="currentColor")) PaymentMethod = Card( Grid(Button(DivCentered(Card1Svg, "Card"), cls='h-20 border-2 border-primary'), Button(DivCentered(PaypalSvg, "PayPal"), cls='h-20'), Button(DivCentered(AppleSvg, "Apple"), cls='h-20')), Form(LabelInput('Name', id='name', placeholder='John Doe'), LabelInput('Card Number', id='card_number', placeholder='m@example.com'), Grid(LabelSelect(*Options(*calendar.month_name[1:],selected_idx=0),label='Expires',id='expire_month'), LabelSelect(*Options(*range(2024,2030),selected_idx=0), label='Year', id='expire_year'), LabelInput('CVV', id='cvv',placeholder='CVV', cls='mt-0'))), header=(H3('Payment Method'),Subtitle('Add a new payment method to your account.'))) area_opts = ('Team','Billing','Account','Deployment','Support') severity_opts = ('Severity 1 (Highest)', 'Severity 2', 'Severity 3', 'Severity 4 (Lowest)') ReportIssue = Card( Grid(Div(LabelSelect(*Options(*area_opts), label='Area', id='area')), Div(LabelSelect(*Options(*severity_opts),label='Severity',id='area'))), LabelInput( label='Subject', id='subject', placeholder='I need help with'), LabelTextArea( label='Description', id='description',placeholder='Please include all information relevant to your issue'), Div(FormLabel('Tags', fr='#tags'), Uk_input_tag(name="Tags",state="danger", value="Spam,Invalid", uk_cloak=True, id='tags')), header=(H3('Report Issue'),Subtitle('What area are you having problems with?')), footer = DivFullySpaced(Button('Cancel'), Button(cls=ButtonT.primary)('Submit'))) monster_desc ="Python-first beautifully designed components because you deserve to focus on features that matter and your app deserves to be beautiful from day one." MonsterUI = Card(H4("Monster UI"), Subtitle(monster_desc), DivLAligned( Div("Python"), DivLAligned(UkIcon('star'),Div("20k"), cls='space-x-1'), Div(datetime.now().strftime("%B %d, %Y")), cls=('space-x-4',TextPresets.muted_sm))) def CookieTableRow(heading, description, active=False): return Tr(Td(H5(heading)), Td(P(description, cls=TextPresets.muted_sm)), Td(Switch(checked=active))) CookieSettings = Card( Table(Tbody( CookieTableRow('Strictly Necessary', 'These cookies are essential in order to use the website and use its features.', True), CookieTableRow('Functional Cookies', 'These cookies allow the website to provide personalized functionality.'), CookieTableRow('Performance Cookies', 'These cookies help to improve the performance of the website.'))), header=(H4('Cookie Settings'),Subtitle('Manage your cookie settings here.')), footer=Button('Save Preferences', cls=(ButtonT.primary, 'w-full'))) team_members = [("Sofia Davis", "m@example.com", "Owner"),("Jackson Lee", "p@example.com", "Member"),] def TeamMemberRow(name, email, role): return DivFullySpaced( DivLAligned( DiceBearAvatar(name, 10,10), Div(P(name, cls=(TextT.sm, TextT.medium)), P(email, cls=TextPresets.muted_sm))), Button(role, UkIcon('chevron-down', cls='ml-4')), DropDownNavContainer(map(NavCloseLi, [ A(Div('Viewer', NavSubtitle('Can view and comment.'))), A(Div('Developer', NavSubtitle('Can view, comment and edit.'))), A(Div('Billing', NavSubtitle('Can view, comment and manage billing.'))), A(Div('Owner', NavSubtitle('Admin-level access to all resources.')))]))) TeamMembers = Card(*[TeamMemberRow(*member) for member in team_members], header = (H4('Team Members'),Subtitle('Invite your team members to collaborate.'))) access_roles = ("Read and write access", "Read-only access") team_members = [("Olivia Martin", "m@example.com", "Read and write access"), ("Isabella Nguyen", "b@example.com", "Read-only access"), ("Sofia Davis", "p@example.com", "Read-only access")] def TeamMemberRow(name, email, role): return DivFullySpaced( DivLAligned(DiceBearAvatar(name, 10,10), Div(P(name, cls=(TextT.sm, TextT.medium)), P(email, cls=TextPresets.muted_sm))), Select(*Options(*access_roles, selected_idx=access_roles.index(role)))) ShareDocument = Card( DivLAligned(Input(value='http://example.com/link/to/document'),Button('Copy link', cls='whitespace-nowrap')), Divider(), H4('People with access', cls=TextPresets.bold_sm), *[TeamMemberRow(*member) for member in team_members], header = (H4('Share this document'),Subtitle('Anyone with the link can view this document.'))) DateCard = Card(Button('Jan 20, 2024 - Feb 09, 2024')) section_content =(('bell','Everything',"Email digest, mentions & all activity."), ('user',"Available","Only mentions and comments"), ('ban', "Ignoring","Turn of all notifications")) def NotificationRow(icon, name, desc): return Li(cls='-mx-1')(A(DivLAligned(UkIcon(icon),Div(P(name),P(desc, cls=TextPresets.muted_sm))))) Notifications = Card( NavContainer( *[NotificationRow(*row) for row in section_content], cls=NavT.secondary), header = (H4('Notification'),Subtitle('Choose what you want to be notified about.')), body_cls='pt-0') TeamCard = Card( DivLAligned( DiceBearAvatar("Isaac Flath", h=24, w=24), Div(H3("Isaac Flath"), P("Library Creator"))), footer=DivFullySpaced( DivHStacked(UkIcon("map-pin", height=16), P("Alexandria, VA")), DivHStacked(*(UkIconLink(icon, height=16) for icon in ("mail", "linkedin", "github")))), cls=CardT.hover) @rt def index(): return Title("Cards Example"),Container(Grid( *map(Div,( Div(PaymentMethod,CreateAccount, TeamCard, cls='space-y-4'), Div(TeamMembers, ShareDocument,DateCard,Notifications, cls='space-y-4'), Div(ReportIssue,MonsterUI,CookieSettings, cls='space-y-4'))), cols_md=1, cols_lg=2, cols_xl=3)) serve()"""FrankenUI Dashboard Example built with MonsterUI (original design by ShadCN)""" from fasthtml.common import * # Bring in all of fasthtml import fasthtml.common as fh # Used to get unstyled components from monsterui.all import * # Bring in all of monsterui, including shadowing fasthtml components with styled components from fasthtml.svg import * import numpy as np import plotly.express as px import pandas as pd import numpy as np app, rt = fast_app(hdrs=Theme.blue.headers()) def generate_chart(num_points=30): df = pd.DataFrame({ 'Date': pd.date_range('2024-01-01', periods=num_points), 'Revenue': np.random.normal(100, 10, num_points).cumsum(), 'Users': np.random.normal(80, 8, num_points).cumsum(), 'Growth': np.random.normal(60, 6, num_points).cumsum()}) fig = px.line(df, x='Date', y=['Revenue', 'Users', 'Growth'], template='plotly_white', line_shape='spline') fig.update_traces(mode='lines+markers') fig.update_layout( margin=dict(l=20, r=20, t=20, b=20), hovermode='x unified', showlegend=True, legend=dict(orientation='h', yanchor='bottom', y=1.02, xanchor='right', x=1), plot_bgcolor='rgba(0,0,0,0)', paper_bgcolor='rgba(0,0,0,0)', xaxis=dict(showgrid=True, gridwidth=1, gridcolor='rgba(0,0,0,0.1)'), yaxis=dict(showgrid=True, gridwidth=1, gridcolor='rgba(0,0,0,0.1)')) return fig.to_html(include_plotlyjs=True, full_html=False, config={'displayModeBar': False}) def InfoCard(title, value, change): return Card(H3(value),P(change, cls=TextPresets.muted_sm), header = H4(title)) rev = InfoCard("Total Revenue", "$45,231.89", "+20.1% from last month") sub = InfoCard("Subscriptions", "+2350", "+180.1% from last month") sal = InfoCard("Sales", "+12,234", "+19% from last month") act = InfoCard("Active Now", "+573", "+201 since last hour") info_card_data = [("Total Revenue", "$45,231.89", "+20.1% from last month"), ("Subscriptions", "+2350", "+180.1% from last month"), ("Sales", "+12,234", "+19% from last month"), ("Active Now", "+573", "+201 since last hour")] top_info_row = Grid(*[InfoCard(*row) for row in info_card_data]) def AvatarItem(name, email, amount): return DivFullySpaced( DivLAligned( DiceBearAvatar(name, 9,9), Div(Strong(name, cls=TextT.sm), Address(A(email,href=f'mailto:{email}')))), fh.Data(amount, cls="ml-auto font-medium", value=amount[2:])) recent_sales = Card( Div(cls="space-y-8")( *[AvatarItem(n,e,d) for (n,e,d) in ( ("Olivia Martin", "olivia.martin@email.com", "+$1,999.00"), ("Jackson Lee", "jackson.lee@email.com", "+$39.00"), ("Isabella Nguyen", "isabella.nguyen@email.com", "+$299.00"), ("William Kim", "will@email.com", "+$99.00"), ("Sofia Davis", "sofia.davis@email.com", "+$39.00"))]), header=Div(H3("Recent Sales"),Subtitle("You made 265 sales this month.")), cls='col-span-3') teams = [["Alicia Koch"],['Acme Inc', 'Monster Inc.'],['Create a Team']] opt_hdrs = ["Personal", "Team", ""] team_dropdown = Select( Optgroup(Option(A("Alicia Koch")), label="Personal Account"), Optgroup(Option(A("Acme Inc")), Option(A("Monster Inc.")), label="Teams"), Option(A("Create a Team")), cls='flex items-center') hotkeys = [('Profile','⇧⌘P'),('Billing','⌘B'),('Settings','⌘S'),('New Team', ''), ('Logout', '')] def NavSpacedLi(t,s): return NavCloseLi(A(DivFullySpaced(P(t),P(s,cls=TextPresets.muted_sm)))) avatar_dropdown = Div( DiceBearAvatar('Alicia Koch',8,8), DropDownNavContainer( NavHeaderLi('sveltecult',NavSubtitle("leader@sveltecult.com")), *[NavSpacedLi(*hk) for hk in hotkeys],)) top_nav = NavBar( team_dropdown, *map(A, ["Overview", "Customers", "Products", "Settings"]), brand=DivLAligned(avatar_dropdown, Input(placeholder='Search'))) @rt def index(): return Title("Dashboard Example"), Container( top_nav, H2('Dashboard'), TabContainer( Li(A("Overview"),cls='uk-active'), *map(lambda x: Li(A(x)), ["Analytics", "Reports", "Notifications"]), alt=True), top_info_row, Grid( Card(Safe(generate_chart(100)), cls='col-span-4'), recent_sales, gap=4,cols_xl=7,cols_lg=7,cols_md=1,cols_sm=1,cols_xs=1), cls=('space-y-4', ContainerT.xl)) serve()"""MonsterUI Help Desk Example - Professional Dashboard with DaisyUI components""" from fasthtml.common import * from monsterui.all import * from datetime import datetime app, rt = fast_app(hdrs=Theme.blue.headers(daisy=True)) def TicketSteps(step): return Steps( LiStep("Submitted", data_content="📝", cls=StepT.success if step > 0 else StepT.primary if step == 0 else StepT.neutral), LiStep("In Review", data_content="🔎", cls=StepT.success if step > 1 else StepT.primary if step == 1 else StepT.neutral), LiStep("Processing", data_content="⚙️", cls=StepT.success if step > 2 else StepT.primary if step == 2 else StepT.neutral), LiStep("Resolved", data_content="✅", cls=StepT.success if step > 3 else StepT.primary if step == 3 else StepT.neutral), cls="w-full") def StatusBadge(status): styles = {'high': AlertT.error, 'medium': AlertT.warning,'low': AlertT.info} alert_type = styles.get(status, AlertT.info) return Alert(f"{status.title()} Priority", cls=(alert_type,"w-32 shadow-sm")) def TicketCard(id, title, description, status, step, department): return Card( CardHeader( DivFullySpaced( Div(H3(f"#{id}", cls=TextT.muted), H4(title), cls='space-y-2'), StatusBadge(status))), CardBody( P(description, cls=(TextT.muted, "mb-6")), DividerSplit(cls="my-6"), TicketSteps(step), DividerSplit(cls="my-6"), DivFullySpaced( Div(Strong("Department"), P(department), cls=('space-y-3', TextPresets.muted_sm)), Div(Strong("Last Updated"), P(Time(datetime.now().strftime('%b %d, %H:%M'))), cls=('space-y-3', TextPresets.muted_sm)), Button("View Details", cls=ButtonT.primary), cls='mt-6')), cls=CardT.hover) def NewTicketModal(): return Modal( ModalHeader(H3("Create New Support Ticket")), ModalBody( Alert( DivLAligned(UkIcon("info"), Span("Please provide as much detail as possible to help us assist you quickly.")), cls=(AlertT.info,"mb-4")), Form( Grid(LabelInput("Title", id="title", placeholder="Brief description of your issue"), LabelSelect(Options("IT Support", "HR", "Facilities", "Finance"), label="Department", id="department")), LabelSelect(Options("Low", "Medium", "High"), label="Priority Level", id="priority"), LabelTextArea("Description", id="description", placeholder="Please provide detailed information about your issue"), DivRAligned( Button("Cancel", cls=ButtonT.ghost, data_uk_toggle="target: #new-ticket"), Button(Loading(cls=LoadingT.spinner), "Submit Ticket", cls=ButtonT.primary, data_uk_toggle="target: #success-toast; target: #new-ticket")), cls='space-y-8')), id="new-ticket") @rt def index(): tickets = [ {'id': "TK-1001", 'title': "Cloud Storage Access Error", 'description': "Unable to access cloud storage with persistent authorization errors. Multiple users affected across marketing department.", 'status': 'high', 'step': 2, 'department': 'IT Support'}, {'id': "TK-1002", 'title': "Email Integration Issue", 'description': "Exchange server not syncing with mobile devices. Affecting external client communications.", 'status': 'medium', 'step': 1, 'department': 'IT Support'}, {'id': "TK-1003", 'title': "Office Equipment Setup", 'description': "New department printer needs configuration and network integration. Required for upcoming client presentation.", 'status': 'low', 'step': 0, 'department': 'Facilities'} ] return Title("Help Desk Dashboard"), Container( Section( DivFullySpaced( H2("Active Tickets"), Button(UkIcon("plus-circle", cls="mr-2"), "New Ticket", cls=ButtonT.primary, data_uk_toggle="target: #new-ticket"), cls='mb-8'), Grid(*[TicketCard(**ticket) for ticket in tickets], cols=1), cls="my-6"), NewTicketModal(), Toast(DivLAligned(UkIcon('check-circle', cls='mr-2'), "Ticket submitted successfully! Our team will review it shortly."), id="success-toast", alert_cls=AlertT.success, cls=(ToastHT.end, ToastVT.bottom)), Loading(htmx_indicator=True, type=LoadingT.dots, cls="fixed top-0 right-0 m-4"), cls="mx-auto max-w-7xl" ) serve()"""FrankenUI Auth Example built with MonsterUI (original design by ShadCN)""" from fasthtml.common import * from monsterui.all import * from fasthtml.svg import * app, rt = fast_app(hdrs=Theme.blue.headers()) @rt def index(): left = Div(cls="col-span-1 hidden flex-col justify-between bg-zinc-900 p-8 text-white lg:flex")( Div(cls=(TextT.bold))("Acme Inc"), Blockquote(cls="space-y-2")( P(cls=TextT.lg)('"This library has saved me countless hours of work and helped me deliver stunning designs to my clients faster than ever before."'), Footer(cls=TextT.sm)("Sofia Davis"))) right = Div(cls="col-span-2 flex flex-col p-8 lg:col-span-1")( DivRAligned(Button("Login", cls=ButtonT.ghost)), DivCentered(cls='flex-1')( Container( DivVStacked( H3("Create an account"), Small("Enter your email below to create your account", cls=TextT.muted)), Form( Input(placeholder="name@example.com"), Button(Span(cls="mr-2", uk_spinner="ratio: 0.54"), "Sign in with Email", cls=(ButtonT.primary, "w-full"), disabled=True), DividerSplit(Small("Or continue with"),cls=TextT.muted), Button(UkIcon('github',cls='mr-2'), "Github", cls=(ButtonT.default, "w-full")), cls='space-y-6'), DivVStacked(Small( "By clicking continue, you agree to our ", A(cls=AT.muted, href="#demo")("Terms of Service")," and ", A(cls=AT.muted, href="#demo")("Privacy Policy"),".", cls=(TextT.muted,"text-center"))), cls="space-y-6"))) return Title("Auth Example"),Grid(left,right,cols=2, gap=0,cls='h-screen') serve()"""FrankenUI Music Example build with MonsterUI (Original design by ShadCN)""" from fasthtml.common import * from monsterui.all import * app, rt = fast_app(hdrs=Theme.blue.headers()) def MusicLi(t,hk=''): return Li(A(DivFullySpaced(t,P(hk,cls=TextPresets.muted_sm)))) music_items = [("About Music", "" ), ("Preferences", "⌘" ), ("Hide Music" , "⌘H" ), ("Hide Others", "⇧⌘H"), ("Quit Music" , "⌘Q" )] file_dd_items = [("New", ""), ("Open Stream URL", "⌘U"), ("Close Window", "⌘W"), ("Library", ""), ("Import", "⌘O"), ("Burn Playlist to Disc", ""), ("Show in Finder", "⇧⌘R"), ("Convert", ""), ("Page Setup", "Print")] edit_actions = [("Undo", "⌘Z"), ("Redo", "⇧⌘Z"), ("Cut", "⌘X"), ("Copy", "⌘C"), ("Paste", "⌘V"), ("Select All", "⌘A"), ("Deselect All", "⇧⌘A")] view_dd_data = ["Show Playing Next", "Show Lyrics", "Show Status Bar", "Hide Sidebar", "Enter Full Screen"] music_headers = NavBar( Button("Music", cls=ButtonT.ghost+TextT.gray),DropDownNavContainer(Li(A("Music"),NavContainer(map(lambda x: MusicLi(*x), music_items)))), Button("File", cls=ButtonT.ghost+TextT.gray), DropDownNavContainer(Li(A("File"), NavContainer(map(lambda x: MusicLi(*x), file_dd_items)))), Button("Edit", cls=ButtonT.ghost+TextT.gray), DropDownNavContainer(Li(A("Edit")),NavContainer( *map(lambda x: MusicLi(*x), edit_actions), Li(A(DivFullySpaced("Smart Dictation",UkIcon("mic")))), Li(A(DivFullySpaced("Emojis & Symbols",UkIcon("globe")))))), Button("View", cls=ButtonT.ghost+TextT.gray),DropDownNavContainer(Li(A("View"),NavContainer(map(lambda x: MusicLi(x), view_dd_data)))), ) # music_headers = NavBarContainer( # NavBarLSide( # NavBarNav( # Li(A("Music"),NavBarNavContainer(map(lambda x: MusicLi(*x), music_items))), # Li(A("File"), NavBarNavContainer(map(lambda x: MusicLi(*x), file_dd_items))), # Li(A("Edit")), # NavBarNavContainer( # *map(lambda x: MusicLi(*x), edit_actions), # Li(A(DivFullySpaced("Smart Dictation",UkIcon("mic")))), # Li(A(DivFullySpaced("Emojis & Symbols",UkIcon("globe"))))), # Li(A("View"), # NavBarNavContainer(map(lambda x: MusicLi(x), view_dd_data))), # Li(A("Account"), # NavBarNavContainer( # NavHeaderLi("Switch Account"), # *map(MusicLi, ("Andy", "Benoit", "Luis", "Manage Family", "Add Account"))))))) def Album(title,artist): img_url = 'https://ucarecdn.com/e5607eaf-2b2a-43b9-ada9-330824b6afd7/music1.webp' return Div( Div(cls="overflow-hidden rounded-md")(Img(cls="transition-transform duration-200 hover:scale-105", src=img_url)), Div(cls='space-y-1')(Strong(title),P(artist,cls=TextT.muted))) listen_now_albums = (("Roar", "Catty Perry"), ("Feline on a Prayer", "Cat Jovi"),("Fur Elise", "Ludwig van Beethovpurr"),("Purrple Rain", "Prince's Cat")) made_for_you_albums = [("Like a Feline", "Catdonna"), ("Livin' La Vida Purrda", "Ricky Catin"), ("Meow Meow Rocket", "Elton Cat"), ("Rolling in the Purr", "Catdelle"), ("Purrs of Silence", "Cat Garfunkel"), ("Meow Me Maybe", "Carly Rae Purrsen"),] music_content = (Div(H3("Listen Now"), cls="mt-6 space-y-1"), Subtitle("Top picks for you. Updated daily."), DividerLine(), Grid(*[Album(t,a) for t,a in listen_now_albums], cls='gap-8'), Div(H3("Made for You"), cls="mt-6 space-y-1"), Subtitle("Your personal playlists. Updated daily."), DividerLine(), Grid(*[Album(t,a) for t,a in made_for_you_albums], cols_xl=6)) tabs = TabContainer( Li(A('Music', href='#'), cls='uk-active'), Li(A('Podcasts', href='#')), Li(A('Live', cls='opacity-50'), cls='uk-disabled'), uk_switcher='connect: #component-nav; animation: uk-animation-fade', alt=True) def podcast_tab(): return Div( Div(cls='space-y-3 mt-6')( H3("New Episodes"), Subtitle("Your favorite podcasts. Updated daily.")), Div(cls="uk-placeholder flex h-[450px] items-center justify-center rounded-md mt-4",uk_placeholder=True)( DivVStacked(cls="space-y-6")( UkIcon("microphone", 3), H4("No episodes added"), Subtitle("You have not added any podcasts. Add one below."), Button("Add Podcast", cls=ButtonT.primary)))) discoved_data = [("play-circle","Listen Now"), ("binoculars", "Browse"), ("rss","Radio")] library_data = [("play-circle", "Playlists"), ("music", "Songs"), ("user", "Made for You"), ("users", "Artists"), ("bookmark", "Albums")] playlists_data = [("library","Recently Added"), ("library","Recently Played")] def MusicSidebarLi(icon, text): return Li(A(DivLAligned(UkIcon(icon), P(text)))) sidebar = NavContainer( NavHeaderLi(H3("Discover")), *[MusicSidebarLi(*o) for o in discoved_data], NavHeaderLi(H3("Library")), *[MusicSidebarLi(*o) for o in library_data], NavHeaderLi(H3("Playlists")),*[MusicSidebarLi(*o) for o in playlists_data], cls=(NavT.primary,'space-y-3','pl-8')) @rt def index(): return Title("Music Example"),Container(music_headers, DividerSplit(), Grid(sidebar, Div(cls="col-span-4 border-l border-border")( Div(cls="px-8 py-6")( DivFullySpaced( Div(cls="max-w-80")(tabs), Button(cls=ButtonT.primary)(DivLAligned(UkIcon('circle-plus')),Div("Add music"))), Ul(id="component-nav", cls="uk-switcher")( Li(*music_content), Li(podcast_tab())))), cols_sm=1, cols_md=1, cols_lg=5, cols_xl=5)) serve() MonsterUI

404 - Page Not Found

The page you're looking for doesn't exist.

# Buttons & Links API Reference See Source See Output DefaultPrimarySecondaryDangerTextLinkGhost [code] def ex_buttons(): return Grid( Button("Default"), Button("Primary", cls=ButtonT.primary), Button("Secondary", cls=ButtonT.secondary), Button("Danger", cls=ButtonT.destructive), Button("Text", cls=ButtonT.text), Button("Link", cls=ButtonT.link), Button("Ghost", cls=ButtonT.ghost), ) [/code] See Source See Output Default LinkMuted LinkText LinkReset LinkPrimary LinkClassic Link [code] def ex_links(): return Div(cls='space-x-4')( A('Default Link'), A('Muted Link', cls=AT.muted), A('Text Link', cls=AT.text), A('Reset Link', cls=AT.reset), A('Primary Link', cls=AT.primary), A('Classic Link', cls=AT.classic),) [/code] ### Button Source [code] Button(*c: Union[str, fastcore.xml.FT], cls: Union[str, enum.Enum] = , submit=True, **kwargs) -> fastcore.xml.FT [/code] > Button with Styling (defaults to `submit` for form submission) **Params** * `c` Contents of `Button` tag (often text) * `cls` Classes in addition to `Button` styling (use `ButtonT` for built in styles) * `submit` Whether the button should submit a form * `kwargs` **Returns:** Button(..., cls='uk-btn') * * * ### ButtonT _Options for styling Buttons_ Option | Value | Option | Value | Option | Value ---|---|---|---|---|--- default | uk-btn-default | ghost | uk-btn-ghost | primary | uk-btn-primary secondary | uk-btn-secondary | destructive | uk-btn-destructive | text | uk-btn-text link | uk-btn-link | xs | uk-btn-xs | sm | uk-btn-sm lg | uk-btn-lg | xl | uk-btn-xl | icon | uk-btn-icon * * * ### AT _Link styles from https://franken-ui.dev/docs/link_ Option | Value | Option | Value ---|---|---|--- muted | uk-link-muted | text | uk-link-text reset | uk-link-reset | primary | uk-link text-primary hover:text-primary-focus underline classic | text-blue-600 hover:text-blue-800 underline | | # Cards API Reference ### Example Usage See Source See Output Header A card with header and footer Input Range Footer Submit Button [code] def ex_card(): return Card( Form(LabelInput("Input"), LabelRange("Range")), header=Div( CardTitle("Header"), P("A card with header and footer",cls=TextPresets.muted_sm)), footer=DivLAligned(Button("Footer Submit Button"))) [/code] See Source See Output #### Creating Custom FastHTML Tags for Markdown Rendering A step by step tutorial to rendering markdown in FastHTML using zero-md inside of DaisyUI chat bubbles Isaac Flath20-October-2024 FastHTMLHTMXWeb Apps Read [code] def ex_card2_wide(): def Tags(cats): return DivLAligned(map(Label, cats)) return Card( DivLAligned( A(Img(src="https://picsum.photos/200/200?random=12", style="width:200px"),href="#"), Div(cls='space-y-3 uk-width-expand')( H4("Creating Custom FastHTML Tags for Markdown Rendering"), P("A step by step tutorial to rendering markdown in FastHTML using zero-md inside of DaisyUI chat bubbles"), DivFullySpaced(map(Small, ["Isaac Flath", "20-October-2024"]), cls=TextT.muted), DivFullySpaced( Tags(["FastHTML", "HTMX", "Web Apps"]), Button("Read", cls=(ButtonT.primary,'h-6'))))), cls=CardT.hover) [/code] See Source See Output #### Creating Custom FastHTML Tags for Markdown Rendering A step by step tutorial to rendering markdown in FastHTML using zero-md inside of DaisyUI chat bubbles Isaac Flath20-October-2024 FastHTMLHTMXWeb Apps Read [code] def ex_card2_tall(): def Tags(cats): return DivLAligned(map(Label, cats)) return Card( Div( A(Img(src="https://picsum.photos/400/200?random=14"), href="#"), Div(cls='space-y-3 uk-width-expand')( H4("Creating Custom FastHTML Tags for Markdown Rendering"), P("A step by step tutorial to rendering markdown in FastHTML using zero-md inside of DaisyUI chat bubbles"), DivFullySpaced(map(Small, ["Isaac Flath", "20-October-2024"]), cls=TextT.muted), DivFullySpaced( Tags(["FastHTML", "HTMX", "Web Apps"]), Button("Read", cls=(ButtonT.primary,'h-6'))))), cls=CardT.hover) [/code] See Source See Output ### Sarah Chen Engineering Lead San Francisco ### James Wilson Senior Developer New York ### Maria Garcia UX Designer London ### Alex Kumar Product Manager Singapore ### Emma Brown DevOps Engineer Toronto ### Marcus Johnson Frontend Developer Berlin [code] def ex_card3(): def team_member(name, role, location="Remote"): return Card( DivLAligned( DiceBearAvatar(name, h=24, w=24), Div(H3(name), P(role))), footer=DivFullySpaced( DivHStacked(UkIcon("map-pin", height=16), P(location)), DivHStacked(*(UkIconLink(icon, height=16) for icon in ("mail", "linkedin", "github"))))) team = [ team_member("Sarah Chen", "Engineering Lead", "San Francisco"), team_member("James Wilson", "Senior Developer", "New York"), team_member("Maria Garcia", "UX Designer", "London"), team_member("Alex Kumar", "Product Manager", "Singapore"), team_member("Emma Brown", "DevOps Engineer", "Toronto"), team_member("Marcus Johnson", "Frontend Developer", "Berlin") ] return Grid(*team, cols_sm=1, cols_md=1, cols_lg=2, cols_xl=3) [/code] ### API Reference ### Card Source [code] Card(*c, header: Union[fastcore.xml.FT, Iterable[fastcore.xml.FT]] = None, footer: Union[fastcore.xml.FT, Iterable[fastcore.xml.FT]] = None, body_cls='space-y-6', header_cls=(), footer_cls=(), cls=(), **kwargs) -> fastcore.xml.FT [/code] > Creates a Card with a header, body, and footer **Params** * `c` Components that go in the body (Main content of the card such as a form, and image, a signin form, etc.) * `header` Component(s) that goes in the header (often a `ModalTitle` and a subtitle) * `footer` Component(s) that goes in the footer (often a `ModalCloseButton`) * `body_cls` classes for the body * `header_cls` classes for the header * `footer_cls` classes for the footer * `cls` class for outermost component * `kwargs` **Returns:** Card component ### CardTitle Source [code] CardTitle(*c, cls=(), **kwargs) [/code] > Creates a card title **Params** * `c` Components (often a string) * `cls` Additional classes on the div * `kwargs` * * * ### CardT _Card styles from UIkit_ Option | Value | Option | Value ---|---|---|--- default | uk-card-default | primary | uk-card-primary secondary | uk-card-secondary | destructive | uk-card-destructive hover | uk-card hover:shadow-lg hover:-translate-y-1 transition-all duration-200 | | The remainder of these are only needed if you're doing something really special. They are used in the `Card` function to generate the boilerplate for you. ### CardContainer Source [code] CardContainer(*c, cls=, **kwargs) -> fastcore.xml.FT [/code] > Creates a card container **Params** * `c` Components (typically `CardHeader`, `CardBody`, `CardFooter`) * `cls` Additional classes on the div * `kwargs` **Returns:** Container for a card ### CardHeader Source [code] CardHeader(*c, cls=(), **kwargs) -> fastcore.xml.FT [/code] > Creates a card header **Params** * `c` Components that goes in the header (often a `ModalTitle` and description) * `cls` Additional classes on the div * `kwargs` **Returns:** Container for the header of a card ### CardBody Source [code] CardBody(*c, cls=(), **kwargs) -> fastcore.xml.FT [/code] > Creates a card body **Params** * `c` Components that go in the body (Main content of the card such as a form, and image, a signin form, etc.) * `cls` Additional classes on the div * `kwargs` **Returns:** Container for the body of a card ### CardFooter Source [code] CardFooter(*c, cls=(), **kwargs) -> fastcore.xml.FT [/code] > Creates a card footer **Params** * `c` Components that go in the footer (often a `ModalCloseButton`) * `cls` Additional classes on the div * `kwargs` **Returns:** Container for the footer of a card # Articles, Containers & Sections API Reference ### ArticleMeta Source [code] ArticleMeta(*c, cls=(), **kwargs) -> fastcore.xml.FT [/code] > A metadata component for use within an Article showing things like date, author etc **Params** * `c` contents of ArticleMeta tag (often other tags) * `cls` Classes in addition to ArticleMeta styling * `kwargs` **Returns:** P(..., cls='uk-article-meta') ### ArticleTitle Source [code] ArticleTitle(*c, cls=(), **kwargs) -> fastcore.xml.FT [/code] > A title component for use within an Article **Params** * `c` contents of ArticleTitle tag (often other tags) * `cls` Classes in addition to ArticleTitle styling * `kwargs` **Returns:** H1(..., cls='uk-article-title') ### Article Source [code] Article(*c, cls=(), **kwargs) -> fastcore.xml.FT [/code] > A styled article container for blog posts or similar content **Params** * `c` contents of Article tag (often other tags) * `cls` Classes in addition to Article styling * `kwargs` **Returns:** Article(..., cls='uk-article') See Source See Output # Sample Article Title By: John Doe lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [code] def ex_articles(): return Article( ArticleTitle("Sample Article Title"), Subtitle("By: John Doe"), P('lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.')) [/code] ### Container Source [code] Container(*c, cls=('mt-5', ), **kwargs) -> fastcore.xml.FT [/code] > Div to be used as a container that often wraps large sections or a page of content **Params** * `c` Contents of Container tag (often other FT Components) * `cls` Classes in addition to Container styling * `kwargs` **Returns:** Container(..., cls='uk-container') * * * ### ContainerT _Max width container sizes from https://franken-ui.dev/docs/container_ Option | Value | Option | Value ---|---|---|--- xs | uk-container-xs | sm | uk-container-sm lg | uk-container-lg | xl | uk-container-xl expand | uk-container-expand | | See Source See Output This is a sample container with custom styling. [code] def ex_containers(): return Container( "This is a sample container with custom styling.", cls=ContainerT.xs, style="background-color: #FFA500; color: #000000") [/code] ### Section Source [code] Section(*c, cls=(), **kwargs) -> fastcore.xml.FT [/code] > Section with styling and margins **Params** * `c` contents of Section tag (often other tags) * `cls` Classes in addition to Section styling * `kwargs` **Returns:** Div(..., cls='uk-section') * * * ### SectionT _Section styles from https://franken-ui.dev/docs/section_ Option | Value | Option | Value | Option | Value ---|---|---|---|---|--- default | uk-section-default | muted | uk-section-muted | primary | uk-section-primary secondary | uk-section-secondary | xs | uk-section-xsmall | sm | uk-section-small lg | uk-section-large | xl | uk-section-xlarge | remove_vertical | uk-section-remove-vertical # Dividers API Reference ### Divider Source [code] Divider(*c, cls=('my-4', ), **kwargs) -> fastcore.xml.FT [/code] > Divider with default styling and margin **Params** * `c` contents of Divider tag (often nothing) * `cls` Classes in addition to Divider styling * `kwargs` **Returns:** Hr(..., cls='uk-divider-icon') or Div(..., cls='uk-divider-vertical') * * * ### DividerT _Divider Styles from https://franken-ui.dev/docs/divider_ Option | Value | Option | Value ---|---|---|--- icon | uk-divider-icon | sm | uk-divider-sm vertical | uk-divider-vertical | | See Source See Output Small Divider * * * Vertical Divider Icon Divider * * * [code] def ex_dividers(): return Div( P("Small Divider"), Divider(cls=DividerT.sm), DivCentered( P("Vertical Divider"), Divider(cls=DividerT.vertical)), DivCentered("Icon Divider"), Divider(cls=DividerT.icon)) [/code] ### DividerSplit Source [code] DividerSplit(*c, cls=(), line_cls=(), text_cls=()) [/code] > Creates a simple horizontal line divider with configurable thickness and vertical spacing **Params** * `c` * `cls` * `line_cls` * `text_cls` See Source See Output Or continue with [code] def ex_dividersplit(): return DividerSplit(P("Or continue with", cls=TextPresets.muted_sm)) [/code] ### DividerLine Source [code] DividerLine(lwidth=2, y_space=4) [/code] > **Params** * `lwidth` * `y_space` See Source See Output * * * [code] def ex_dividerline(): return DividerLine() [/code] # Forms and User Inputs API Reference ### Example Form This form was live coded in a 5 minute video here See Source See Output ### Emergency Contact Form Please fill out the form completely First Name Last Name Email Phone ### Relationship to patient Parent Sibling Friend Spouse Significant Other Relative Child Other Address Address Line 2 City State Zip Submit Form [code] def ex_form(): relationship = ["Parent",'Sibling', "Friend", "Spouse", "Significant Other", "Relative", "Child", "Other"] return Div(cls='space-y-4')( DivCentered( H3("Emergency Contact Form"), P("Please fill out the form completely", cls=TextPresets.muted_sm)), Form(cls='space-y-4')( Grid(LabelInput("First Name",id='fn'), LabelInput("Last Name",id='ln')), Grid(LabelInput("Email", id='em'), LabelInput("Phone", id='ph')), H3("Relationship to patient"), Grid(*[LabelCheckboxX(o) for o in relationship], cols=4, cls='space-y-3'), LabelInput("Address", id='ad'), LabelInput("Address Line 2", id='ad2'), Grid(LabelInput("City", id='ct'), LabelInput("State", id='st')), LabelInput("Zip", id='zp'), DivCentered(Button("Submit Form", cls=ButtonT.primary)))) [/code] See Source See Output Upload Button! Upload Zone [code] def ex_upload(): return Div(Upload("Upload Button!", id='upload1'), UploadZone(DivCentered(Span("Upload Zone"), UkIcon("upload")), id='upload2'), cls='space-y-4') [/code] ### FormLabel Source [code] FormLabel(*c, cls=(), **kwargs) -> fastcore.xml.FT [/code] > A Label with default styling **Params** * `c` contents of FormLabel tag (often text) * `cls` Classes in addition to FormLabel styling * `kwargs` **Returns:** Label(..., cls='uk-form-label') See Source See Output Form Label [code] def ex_formlabel(): return FormLabel("Form Label") [/code] ### Input Source [code] Input(*c, cls=(), **kwargs) -> fastcore.xml.FT [/code] > An Input with default styling **Params** * `c` contents of Input tag (often nothing) * `cls` Classes in addition to Input styling * `kwargs` **Returns:** Input(..., cls='uk-input') See Source See Output Input [code] def ex_input(): return Div( Input(placeholder="Enter text"), LabelInput(label="Input", id='myid')) [/code] ### LabelInput Source [code] LabelInput(label: str | fastcore.xml.FT, lbl_cls='', input_cls='', cls='space-y-2', id='', **kwargs) -> fastcore.xml.FT [/code] > A `FormLabel` and `Input` pair that provides default spacing and links/names them based on id **Params** * `label` FormLabel content (often text) * `lbl_cls` Additional classes for `FormLabel` * `input_cls` Additional classes for `Input` * `cls` Classes on container (default is `'space-y-2'` to prevent scrunched up form elements) * `id` id for `FormLabel` and `Input` (`id`, `name` and `for` attributes are set to this value) * `kwargs` **Returns:** Div(cls='space-y-2')(`FormLabel`, `Input`) ### LabelCheckboxX Source [code] LabelCheckboxX(label: str | fastcore.xml.FT, lbl_cls='', input_cls='', container=functools.partial(, 'div', void_=False), cls='flex items-center space-x-2', id='', **kwargs) -> fastcore.xml.FT [/code] > A FormLabel and CheckboxX pair that provides default spacing and links/names them based on id **Params** * `label` FormLabel content (often text) * `lbl_cls` Additional classes for `FormLabel` * `input_cls` Additional classes for `CheckboxX` * `container` Container to wrap label and input in (default is Div) * `cls` Classes on container (default is 'flex items-center space-x-2') * `id` id for `FormLabel` and `CheckboxX` (`id`, `name` and `for` attributes are set to this value) * `kwargs` **Returns:** Div(cls='flex items-center space-x-2')(`FormLabel`, `CheckboxX`) ### LabelSwitch Source [code] LabelSwitch(label: str | fastcore.xml.FT, lbl_cls='', input_cls='', cls='space-x-2', id='', *, container=functools.partial(, 'div', void_=False)) -> fastcore.xml.FT [/code] > **Params** * `label` FormLabel content (often text) * `lbl_cls` Additional classes for `FormLabel` * `input_cls` Additional classes for `Switch` * `container` Container to wrap label and input in (default is Div) * `cls` Classes on container (default is `'space-x-2'` to prevent scrunched up form elements) * `id` id for `FormLabel` and `Switch` (`id`, `name` and `for` attributes are set to this value) **Returns:** Div(cls='space-y-2')(`FormLabel`, `Switch`) ### LabelRange Source [code] LabelRange(label: str | fastcore.xml.FT, lbl_cls='', input_cls='', cls='space-y-6', id='', value='', min=None, max=None, step=None, label_range=True, *, container=functools.partial(, 'div', void_=False)) -> fastcore.xml.FT [/code] > A FormLabel and Range pair that provides default spacing and links/names them based on id **Params** * `label` FormLabel content (often text) * `lbl_cls` Additional classes for `FormLabel` * `input_cls` Additional classes for `Range` * `container` Container to wrap label and input in (default is Div) * `cls` Classes on container (default is `'space-y-2'` to prevent scrunched up form elements) * `id` id for `FormLabel` and `Range` (`id`, `name` and `for` attributes are set to this value) * `value` Value for the range input * `min` Minimum value * `max` Maximum value * `step` Step size * `label_range` Whether to show the range value label (label for the `Range` component) **Returns:** Div(cls='space-y-2')(`FormLabel`, `Range`) ### LabelTextArea Source [code] LabelTextArea(label: str | fastcore.xml.FT, value='', lbl_cls='', input_cls='', cls='space-y-2', id='', **kwargs) -> fastcore.xml.FT [/code] > **Params** * `label` FormLabel content (often text) * `value` Value for the textarea * `lbl_cls` Additional classes for `FormLabel` * `input_cls` Additional classes for `TextArea` * `cls` Classes on container (default is `'space-y-2'` to prevent scrunched up form elements) * `id` id for `FormLabel` and `TextArea` (`id`, `name` and `for` attributes are set to this value) * `kwargs` **Returns:** Div(cls='space-y-2')(`FormLabel`, `TextArea`) ### LabelRadio Source [code] LabelRadio(label: str | fastcore.xml.FT, lbl_cls='', input_cls='', container=functools.partial(, 'div', void_=False), cls='flex items-center space-x-2', id='', **kwargs) -> fastcore.xml.FT [/code] > A FormLabel and Radio pair that provides default spacing and links/names them based on id **Params** * `label` FormLabel content (often text) * `lbl_cls` Additional classes for `FormLabel` * `input_cls` Additional classes for `Radio` * `container` Container to wrap label and input in (default is Div) * `cls` Classes on container (default is 'flex items-center space-x-2') * `id` id for `FormLabel` and `Radio` (`id`, `name` and `for` attributes are set to this value) * `kwargs` **Returns:** Div(cls='flex items-center space-x-2')(`FormLabel`, `Radio`) ### LabelSelect Source [code] LabelSelect(*option, label: str | fastcore.xml.FT, lbl_cls='', input_cls='', container=functools.partial(, 'div', void_=False), cls='space-y-2', id='', **kwargs) [/code] > A FormLabel and Select pair that provides default spacing and links/names them based on id (usually UkLabelSelect is a better choice) **Params** * `option` Options for the select dropdown (can use `Options` helper function to create) * `label` FormLabel content (often text) * `lbl_cls` Additional classes for `FormLabel` * `input_cls` Additional classes for `Select` * `container` Container to wrap label and input in (default is Div) * `cls` Classes on container (default is 'space-y-2') * `id` id for `FormLabel` and `Select` (`id`, `name` and `for` attributes are set to this value) * `kwargs` ### Progress Source [code] Progress(*c, cls=(), value='', max='100', **kwargs) -> fastcore.xml.FT [/code] > Creates a progress bar **Params** * `c` Components to put in the progress bar (often nothing) * `cls` Additional classes on the progress bar * `value` Value of the progress bar * `max` Max value of the progress bar (defaults to 100 for percentage) * `kwargs` **Returns:** Progress(..., cls='uk-progress') See Source See Output [code] def ex_progress(): return Progress(value=20, max=100) [/code] ### Radio Source [code] Radio(*c, cls=(), **kwargs) -> fastcore.xml.FT [/code] > A Radio with default styling **Params** * `c` contents of Radio tag (often nothing) * `cls` Classes in addition to Radio styling * `kwargs` **Returns:** Input(..., cls='uk-radio', type='radio') See Source See Output Radio [code] def ex_radio(): return Div( Radio(name="radio-group", id="radio1"), LabelRadio(label="Radio", id='radio1',cls='flex items-center space-x-4')) [/code] ### CheckboxX Source [code] CheckboxX(*c, cls=(), **kwargs) -> fastcore.xml.FT [/code] > A Checkbox with default styling **Params** * `c` contents of CheckboxX tag (often nothing) * `cls` Classes in addition to CheckboxX styling * `kwargs` **Returns:** Input(..., cls='uk-checkbox', type='checkbox') See Source See Output Checkbox [code] def ex_checkbox(): return Div( CheckboxX(), LabelCheckboxX(label="Checkbox", id='checkbox1')) [/code] ### Range Source [code] Range(*c, value='', label=True, min=None, max=None, step=None, cls=(), **kwargs) -> fastcore.xml.FT [/code] > A Range with default styling **Params** * `c` contents of Range tag (often nothing) * `value` * `label` * `min` * `max` * `step` * `cls` Classes in addition to Range styling * `kwargs` **Returns:** Input(..., cls='uk-range', type='range') See Source See Output Basic Range Range with Label Multiple Values Custom Range [code] def ex_range(): return Div( Range(), Range(label='kg', value="25,75", min=20, max=75), LabelRange('Basic Range', value='50', min=0, max=100, step=1), LabelRange('Range with Label', value='75', min=0, max=100, step=5, label_range=True), LabelRange('Multiple Values', value='25,75', min=0, max=100, step=5, label_range=True), LabelRange('Custom Range', value='500', min=0, max=1000, step=100, label_range=True) ) [/code] ### Switch Source [code] Switch(*c, cls=(), **kwargs) -> fastcore.xml.FT [/code] > A Switch with default styling **Params** * `c` contents of Switch tag (often nothing) * `cls` Classes in addition to Switch styling * `kwargs` **Returns:** Input(..., cls='uk-toggle-switch uk-toggle-switch-primary min-w-9', type='checkbox') See Source See Output Switch [code] def ex_switch(): return Div( Switch(id="switch"), LabelSwitch(label="Switch", id='switch')) [/code] ### TextArea Source [code] TextArea(*c, cls=(), **kwargs) -> fastcore.xml.FT [/code] > A Textarea with default styling **Params** * `c` contents of TextArea tag (often text) * `cls` Classes in addition to TextArea styling * `kwargs` **Returns:** TextArea(..., cls='uk-textarea') See Source See Output TextArea [code] def ex_textarea(): return Div( TextArea(placeholder="Enter multiple lines of text"), LabelTextArea(label="TextArea", id='myid')) [/code] ### Select Source [code] Select(*option, inp_cls=(), cls=('h-10',), cls_custom='button: uk-input-fake dropdown: w-full', id='', name='', placeholder='', searchable=False, insertable=False, select_kwargs=None, **kwargs) [/code] > Creates a select dropdown with uk styling and option for adding a search box **Params** * `option` Options for the select dropdown (can use `Options` helper function to create) * `inp_cls` Additional classes for the select input * `cls` Classes for the outer div (default h-10 for consistent height) * `cls_custom` Classes for the Uk_Select web component * `id` ID for the select input * `name` Name attribute for the select input * `placeholder` Placeholder text for the select input * `searchable` Whether the select should be searchable * `insertable` Whether to allow user-defined options to be added * `select_kwargs` Additional Arguments passed to Select * `kwargs` See Source See Output Option 1Option 2Option 3 Select Option 1Option 2Option 3 [code] def ex_select(): return Div( Select(map(Option, ["Option 1", "Option 2", "Option 3"])), LabelSelect(map(Option, ["Option 1", "Option 2", "Option 3"]), label="Select", id='myid')) [/code] ### Example: Insertable Select In a production app, the user-inserted option would be saved server-side (db, session etc.) See Source See Output AppleOrangeBananaMango AppleBananaMangoOrange [code] def ex_insertable_select1(): fruit_opts = ['apple', 'orange', 'banana', 'mango'] return Grid( Select(Option('Apple', value='apple'), Option('Orange', value='orange'), Option('Banana', value='banana'), Option('Mango', value='mango'), id="fruit", icon=True, insertable=True, placeholder="Choose a fruit..."), Select(Optgroup(label="Fruit")( *map(lambda l: Option(l.capitalize(), value=l), sorted(fruit_opts))), id="fruit", icon=True, insertable=True, placeholder="Choose a fruit...", cls_custom="button: uk-input-fake justify-between w-full; dropdown: w-full")) [/code] ### Legend Source [code] Legend(*c, cls=(), **kwargs) -> fastcore.xml.FT [/code] > A Legend with default styling **Params** * `c` contents of Legend tag (often other tags) * `cls` Classes in addition to Legend styling * `kwargs` **Returns:** Legend(..., cls='uk-legend') ### Fieldset Source [code] Fieldset(*c, cls=(), **kwargs) -> fastcore.xml.FT [/code] > A Fieldset with default styling **Params** * `c` contents of Fieldset tag (often other tags) * `cls` Classes in addition to Fieldset styling * `kwargs` **Returns:** Fieldset(..., cls='uk-fieldset') # HTML Styling API Reference See Source See Output

Hello, World!

This is a paragraph

[code] def ex_applyclasses(): return apply_classes('

Hello, World!

This is a paragraph

') [/code] # Icons & Images API Reference # Avatars See Source See Output [code] def ex_dicebear(): return DivLAligned( DiceBearAvatar('Isaac Flath',10,10), DiceBearAvatar('Aaliyah',10,10), DiceBearAvatar('Alyssa',10,10)) [/code] ### DiceBearAvatar Source [code] DiceBearAvatar(seed_name: str, h: int = 20, w: int = 20) [/code] > Creates an Avatar using https://dicebear.com/ **Params** * `seed_name` Seed name (ie 'Isaac Flath') * `h` Height * `w` Width # PlaceHolder Images See Source See Output [code] def ex_picsum(): return Grid(PicSumImg(100,100), PicSumImg(100,100, blur=6),PicSumImg(100,100, grayscale=True)) [/code] ### PicSumImg Source [code] PicSumImg(h: int = 200, w: int = 200, id: int = None, grayscale: bool = False, blur: int = None, **kwargs) -> fastcore.xml.FT [/code] > Creates a placeholder image using https://picsum.photos/ **Params** * `h` Height in pixels * `w` Width in pixels * `id` Optional specific image ID to use * `grayscale` Whether to return grayscale version * `blur` Optional blur amount (1-10) * `kwargs` **Returns:** Img tag with picsum image # Icons Icons use Lucide icons - you can find a full list of icons in their docs. See Source See Output [code] def ex_icon(): return Grid( UkIcon('chevrons-right', height=15, width=15), UkIcon('bug', height=15, width=15), UkIcon('phone-call', height=15, width=15), UkIcon('maximize-2', height=15, width=15), UkIcon('thumbs-up', height=15, width=15),) [/code] ### UkIcon Source [code] UkIcon(icon: str, height: int = None, width: int = None, stroke_width: int = None, cls=(), **kwargs) -> fastcore.xml.FT [/code] > Creates an icon using lucide icons **Params** * `icon` Icon name from lucide icons * `height` * `width` * `stroke_width` Thickness of lines * `cls` Additional classes on the `Uk_icon` tag * `kwargs` **Returns:** a lucide icon of the specified size See Source See Output [code] def ex_iconlink(): return DivLAligned( UkIconLink('chevrons-right'), UkIconLink('chevrons-right', button=True, cls=ButtonT.primary)) [/code] ### UkIconLink Source [code] UkIconLink(icon: str, height: int = None, width: int = None, stroke_width: int = None, cls=(), button: bool = False, **kwargs) -> fastcore.xml.FT [/code] > Creates an icon link using lucide icons **Params** * `icon` Icon name from lucide icons * `height` * `width` * `stroke_width` Thickness of lines * `cls` Additional classes on the icon * `button` Whether to use a button (defaults to a link) * `kwargs` **Returns:** a lucide icon button or link of the specified size # Layout (Flex and Grid) API Reference This page covers `Grid`s, which are often used for general structure, `Flex` which is often used for layout of components that are not grid based, padding and positioning that can help you make your layout look good, and dividers that can help break up the page ## Grid See Source See Output Column 1 Item 1 Column 1 Item 2 Column 1 Item 3 Column 2 Item 1 Column 2 Item 2 Column 2 Item 3 Column 3 Item 1 Column 3 Item 2 Column 3 Item 3 [code] def ex_grid(): return Grid( Div( P("Column 1 Item 1"), P("Column 1 Item 2"), P("Column 1 Item 3")), Div( P("Column 2 Item 1"), P("Column 2 Item 2"), P("Column 2 Item 3")), Div( P("Column 3 Item 1"), P("Column 3 Item 2"), P("Column 3 Item 3"))) [/code] ### Grid Source [code] Grid(*div, cols_min: int = 1, cols_max: int = 4, cols_sm: int = None, cols_md: int = None, cols_lg: int = None, cols_xl: int = None, cols: int = None, cls='gap-4', **kwargs) -> fastcore.xml.FT [/code] > Creates a responsive grid layout with smart defaults based on content **Params** * `div` `Div` components to put in the grid * `cols_min` Minimum number of columns at any screen size * `cols_max` Maximum number of columns allowed at any screen size * `cols_sm` Number of columns on small screens * `cols_md` Number of columns on medium screens * `cols_lg` Number of columns on large screens * `cols_xl` Number of columns on extra large screens * `cols` Number of columns on all screens * `cls` Additional classes on the grid (tip: `gap` provides spacing for grids) * `kwargs` **Returns:** Responsive grid component #### Practical Grid Example See Source See Output #### Laptop $999 Add to Cart #### Smartphone $599 Add to Cart #### Headphones $199 Add to Cart #### Smartwatch $299 Add to Cart #### Tablet $449 Add to Cart #### Camera $799 Add to Cart [code] def ex_product_grid(): products = [ {"name": "Laptop", "price": "$999", "img": "https://picsum.photos/200/100?random=1"}, {"name": "Smartphone", "price": "$599", "img": "https://picsum.photos/200/100?random=2"}, {"name": "Headphones", "price": "$199", "img": "https://picsum.photos/200/100?random=3"}, {"name": "Smartwatch", "price": "$299", "img": "https://picsum.photos/200/100?random=4"}, {"name": "Tablet", "price": "$449", "img": "https://picsum.photos/200/100?random=5"}, {"name": "Camera", "price": "$799", "img": "https://picsum.photos/200/100?random=6"}, ] product_cards = [ Card( Img(src=p["img"], alt=p["name"], style="width:100%; height:100px; object-fit:cover;"), H4(p["name"], cls="mt-2"), P(p["price"], cls=TextPresets.bold_sm), Button("Add to Cart", cls=(ButtonT.primary, "mt-2")) ) for p in products ] return Grid(*product_cards, cols_lg=3) [/code] ## Flex Play Flex Box Froggy to get an understanding of flex box. ### DivFullySpaced Source [code] DivFullySpaced(*c, cls='w-full', **kwargs) [/code] > Creates a flex div with it's components having as much space between them as possible **Params** * `c` Components * `cls` Classes for outer div (`w-full` makes it use all available width) * `kwargs` See Source See Output LeftCenterRight [code] def ex_fully_spaced_div(): return DivFullySpaced( Button("Left", cls=ButtonT.primary), Button("Center", cls=ButtonT.secondary), Button("Right", cls=ButtonT.destructive) ) [/code] ### DivCentered Source [code] DivCentered(*c, cls='space-y-4', vstack=True, **kwargs) -> fastcore.xml.FT [/code] > Creates a flex div with it's components centered in it **Params** * `c` Components * `cls` Classes for outer div (`space-y-4` provides spacing between components) * `vstack` Whether to stack the components vertically * `kwargs` **Returns:** Div with components centered in it See Source See Output ### Centered Title This content is centered both horizontally and vertically. [code] def ex_centered_div(): return DivCentered( H3("Centered Title"), P("This content is centered both horizontally and vertically.") ) [/code] ### DivLAligned Source [code] DivLAligned(*c, cls='space-x-4', **kwargs) -> fastcore.xml.FT [/code] > Creates a flex div with it's components aligned to the left **Params** * `c` Components * `cls` Classes for outer div * `kwargs` **Returns:** Div with components aligned to the left See Source See Output #### Left Aligned Title Some text that's left-aligned with the title and image. [code] def ex_l_aligned_div(): return DivLAligned( Img(src="https://picsum.photos/100/100?random=1", style="max-width: 100px;"), H4("Left Aligned Title"), P("Some text that's left-aligned with the title and image.") ) [/code] ### DivRAligned Source [code] DivRAligned(*c, cls='space-x-4', **kwargs) -> fastcore.xml.FT [/code] > Creates a flex div with it's components aligned to the right **Params** * `c` Components * `cls` Classes for outer div * `kwargs` **Returns:** Div with components aligned to the right See Source See Output Action Right-aligned text [code] def ex_r_aligned_div(): return DivRAligned( Button("Action", cls=ButtonT.primary), P("Right-aligned text"), Img(src="https://picsum.photos/100/100?random=3", style="max-width: 100px;") ) [/code] ### DivVStacked Source [code] DivVStacked(*c, cls='space-y-4', **kwargs) -> fastcore.xml.FT [/code] > Creates a flex div with it's components stacked vertically **Params** * `c` Components * `cls` Additional classes on the div (tip: `space-y-4` provides spacing between components) * `kwargs` **Returns:** Div with components stacked vertically See Source See Output ## Vertical Stack First paragraph in the stack Second paragraph in the stack Action Button [code] def ex_v_stacked_div(): return DivVStacked( H2("Vertical Stack"), P("First paragraph in the stack"), P("Second paragraph in the stack"), Button("Action Button", cls=ButtonT.secondary) ) [/code] ### DivHStacked Source [code] DivHStacked(*c, cls='space-x-4', **kwargs) -> fastcore.xml.FT [/code] > Creates a flex div with it's components stacked horizontally **Params** * `c` Components * `cls` Additional classes on the div (`space-x-4` provides spacing between components) * `kwargs` **Returns:** Div with components stacked horizontally See Source See Output #### Column 1 Content for column 1 #### Column 2 Content for column 2 #### Column 3 Content for column 3 [code] def ex_h_stacked_div(): return DivHStacked( Div(H4("Column 1"), P("Content for column 1")), Div(H4("Column 2"), P("Content for column 2")), Div(H4("Column 3"), P("Content for column 3")) ) [/code] * * * ### FlexT _Flexbox modifiers using Tailwind CSS_ Option | Value | Option | Value | Option | Value | Option | Value ---|---|---|---|---|---|---|--- block | flex | inline | inline-flex | left | justify-start | center | justify-center right | justify-end | between | justify-between | around | justify-around | stretch | items-stretch top | items-start | middle | items-center | bottom | items-end | row | flex-row row_reverse | flex-row-reverse | column | flex-col | column_reverse | flex-col-reverse | nowrap | flex-nowrap wrap | flex-wrap | wrap_reverse | flex-wrap-reverse | | | | # Lightbox API Reference See Source See Output Open [code] def ex_lightbox1(): return LightboxContainer( LightboxItem(Button("Open"), href='https://picsum.photos/id/100/1280/720.webp', data_alt='A placeholder image to demonstrate the lightbox', data_caption='This is my super cool caption'), ) [/code] See Source See Output Open [code] def ex_lightbox2(): return LightboxContainer( LightboxItem(Button("Open"), href='https://picsum.photos/id/100/1280/720.webp', data_alt='A placeholder image to demonstrate the lightbox', data_caption='Image 1'), LightboxItem(href='https://picsum.photos/id/101/1280/720.webp', data_alt='A placeholder image to demonstrate the lightbox', data_caption='Image 2'), LightboxItem(href='https://picsum.photos/id/102/1280/720.webp', data_alt='A placeholder image to demonstrate the lightbox', data_caption='Image 3'), ) [/code] See Source See Output mp4YoutubeVimeoIframe [code] def ex_lightbox3(): return LightboxContainer( LightboxItem(Button("mp4"), href='https://yootheme.com/site/images/media/yootheme-pro.mp4'), LightboxItem(Button("Youtube"), href='https://www.youtube.com/watch?v=c2pz2mlSfXA'), LightboxItem(Button("Vimeo"), href='https://vimeo.com/1084537'), LightboxItem(Button("Iframe"), data_type='iframe', href='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4740.819266853735!2d9.99008871708242!3d53.550454675412404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3f9d24afe84a0263!2sRathaus!5e0!3m2!1sde!2sde!4v1499675200938')) [/code] ### LightboxContainer Source [code] LightboxContainer(*lightboxitem, data_uk_lightbox='counter: true', **kwargs) -> fastcore.xml.FT [/code] > Lightbox container that will hold `LightboxItems` **Params** * `lightboxitem` `LightBoxItem`s that will be inside lightbox * `data_uk_lightbox` See https://franken-ui.dev/docs/2.0/lightbox for advanced options * `kwargs` **Returns:** Lightbox ### LightboxItem Source [code] LightboxItem(*c, href, data_alt=None, data_caption=None, cls='', **kwargs) -> fastcore.xml.FT [/code] > Anchor tag with appropriate structure to go inside a `LightBoxContainer` **Params** * `c` Component that when clicked will open the lightbox (often a button) * `href` Href to image, youtube video, vimeo, google maps, etc. * `data_alt` Alt text for the lightbox item/image * `data_caption` Caption for the item that shows below it * `cls` Class for the A tag (often nothing or `uk-btn`) * `kwargs` **Returns:** A(... href, data_alt, cls., ...) # Lists API Reference See Source See Output #### disc List: * Item 1 * Item 2 #### circle List: * Item 1 * Item 2 #### square List: * Item 1 * Item 2 #### decimal List: * Item 1 * Item 2 #### hyphen List: * Item 1 * Item 2 #### bullet List: * Item 1 * Item 2 #### divider List: * Item 1 * Item 2 #### striped List: * Item 1 * Item 2 [code] def ex_lists(): list_options = [(style,str(cls)) for style,cls in ListT.__members__.items()] lists = [Div(H4(f"{style} List:"), Ul(Li("Item 1"), Li("Item 2"), cls=cls)) for style, cls in list_options] return Grid(*lists) [/code] * * * ### ListT _List styles using Tailwind CSS_ Option | Value | Option | Value | Option | Value ---|---|---|---|---|--- disc | list-disc list-inside | circle | list-[circle] list-inside | square | list-[square] list-inside decimal | uk-list uk-list-decimal | hyphen | uk-list uk-list-hyphen | bullet | uk-list uk-list-bullet divider | uk-list uk-list-divider | striped | uk-list uk-list-striped | | # Loading IndicatorsAPI Reference See Source See Output [code] def ex_loading1(): return Loading() [/code] See Source See Output [code] def ex_loading2(): types = [LoadingT.spinner, LoadingT.dots, LoadingT.ring, LoadingT.ball, LoadingT.bars, LoadingT.infinity] sizes = [LoadingT.xs, LoadingT.sm, LoadingT.md, LoadingT.lg] rows = [Div(*[Loading((t,s)) for s in sizes], cls='flex gap-4') for t in types] return Div(*rows, cls='flex flex-col gap-4') [/code] ### Loading Source [code] Loading(cls=(, ), htmx_indicator=False, **kwargs) -> fastcore.xml.FT [/code] > Creates a loading animation component **Params** * `cls` Classes for indicator (generally `LoadingT` options) * `htmx_indicator` Add htmx-indicator class * `kwargs` **Returns:** Span(cls=...) * * * ### LoadingT __ Option | Value | Option | Value | Option | Value ---|---|---|---|---|--- spinner | loading-spinner | dots | loading-dots | ring | loading-ring ball | loading-ball | bars | loading-bars | infinity | loading-infinity xs | loading-xsmall | sm | loading-small | md | loading-medium lg | loading-large | | | | # Markdown + automated HTML styling API Reference See Source See Output # Example Markdown * With **bold** and _italics_ * With a link ### And a subheading > This is a blockquote This supports inline latex: $e^{\pi i} + 1 = 0$ as well as block latex thanks to Katex. $$ \frac{1}{2\pi i} \oint_C \frac{f(z)}{z-z_0} dz $$ And even syntax highlighting thanks to Highlight.js! (Just make sure you set `highlightjs=True` in the headers function) [code] def add(a, b): return a + b [/code] [code] def ex_markdown(): md = '''# Example Markdown + With **bold** and *italics* + With a [link](https://github.com) ### And a subheading > This is a blockquote This supports inline latex: $e^{\\pi i} + 1 = 0$ as well as block latex thanks to Katex. $$ \\frac{1}{2\\pi i} \\oint_C \\frac{f(z)}{z-z_0} dz $$ And even syntax highlighting thanks to Highlight.js! (Just make sure you set `highlightjs=True` in the headers function) ```python def add(a, b): return a + b ``` ''' return render_md(md) [/code] You can overwrite the default styling for markdown rendering with your own css classes with `class_map See Source See Output With custom **bold** style > But no extra quote style because class_map overrides all default styled [code] def ex_markdown2(): md = '''With custom **bold** style\n\n > But no extra quote style because class_map overrides all default styled''' return render_md(md, class_map={'b': 'text-red-500'}) [/code] You can modify the default styling for markdown rendering with your own css classes with `class_map_mods See Source See Output With custom **bold** style > But default quote style because class_map_mods replaces sepecified styles and leaves the rest as default [code] def ex_markdown3(): md = '''With custom **bold** style\n\n > But default quote style because class_map_mods replaces sepecified styles and leaves the rest as default''' return render_md(md, class_map_mods={'b': 'text-red-500'}) [/code] This uses the `apply_classes` function, which can be used to apply classes to html strings. This is useful for applying styles to any html you get from an external source. See Source See Output

Hello, World!

This is a paragraph

[code] def ex_applyclasses(): return apply_classes('

Hello, World!

This is a paragraph

') [/code] One common external source is a markdown renderer. MonsterUI uses tailwind css for styling so you don't get any styling without specifying classes, `apply_classes` can do that for you. See Source See Output # Hi a link [code] def ex_applyclasses2(): from mistletoe import markdown, HTMLRenderer md = markdown('# Hi\n[a link](www.google.com)', renderer=HTMLRenderer) return Safe(apply_classes(md)) [/code] ### apply_classes Source [code] apply_classes(html_str: str, class_map=None, class_map_mods=None) -> str [/code] > Apply classes to html string **Params** * `html_str` Html string * `class_map` Class map * `class_map_mods` Class map that will modify the class map map (useful for small changes to a base class map) **Returns:** Html string with classes applied # Modals API Reference ### Example Modal This is a subtitle See Source See Output Open Modal ## Simple Test Modal With some somewhat brief content to show that it works! Close [code] def ex_modal(): return Div( Button("Open Modal",data_uk_toggle="target: #my-modal" ), Modal(ModalTitle("Simple Test Modal"), P("With some somewhat brief content to show that it works!", cls=TextPresets.muted_sm), footer=ModalCloseButton("Close", cls=ButtonT.primary),id='my-modal')) [/code] ### Modal Source [code] Modal(*c, header=None, footer=None, cls=(), dialog_cls=(), header_cls='p-6', body_cls='space-y-6', footer_cls=(), id='', open=False, **kwargs) -> fastcore.xml.FT [/code] > Creates a modal with the appropriate classes to put the boilerplate in the appropriate places for you **Params** * `c` Components to put in the `ModalBody` (often forms, sign in buttons, images, etc.) * `header` Components that go in the `ModalHeader` (often a `ModalTitle`) * `footer` Components that go in the `ModalFooter` (often a `ModalCloseButton`) * `cls` Additional classes on the outermost `ModalContainer` * `dialog_cls` Additional classes on the `ModalDialog` * `header_cls` Additional classes on the `ModalHeader` * `body_cls` Additional classes on the `ModalBody` * `footer_cls` Additional classes on the `ModalFooter` * `id` id for the outermost container * `open` Whether the modal is open (typically used for HTMX controlled modals) * `kwargs` **Returns:** Fully styled modal FT Component ### ModalCloseButton Source [code] ModalCloseButton(*c, cls=(), htmx=False, **kwargs) -> fastcore.xml.FT [/code] > Creates a button that closes a modal with js **Params** * `c` Components to put in the button (often text and/or an icon) * `cls` Additional classes on the button * `htmx` Whether to use HTMX to close the modal (must add hx_get to a route that closes the modal) * `kwargs` **Returns:** Button(..., cls='uk-modal-close') + `hx_target` and `hx_swap` if htmx is True The remainder of the Modal functions below are used internally by the `Modal` function for you. You shouldn't need to use them unless you're doing something really special. ### ModalTitle Source [code] ModalTitle(*c, cls=(), **kwargs) -> fastcore.xml.FT [/code] > Creates a modal title **Params** * `c` Components to put in the `ModalTitle` (often text) * `cls` Additional classes on the `ModalTitle` * `kwargs` **Returns:** H2(..., cls='uk-modal-title') ### ModalFooter Source [code] ModalFooter(*c, cls=(), **kwargs) -> fastcore.xml.FT [/code] > Creates a modal footer **Params** * `c` Components to put in the `ModalFooter` (often buttons) * `cls` Additional classes on the `ModalFooter` * `kwargs` **Returns:** Div(..., cls='uk-modal-footer') ### ModalBody Source [code] ModalBody(*c, cls=(), **kwargs) -> fastcore.xml.FT [/code] > Creates a modal body **Params** * `c` Components to put in the `ModalBody` (often forms, sign in buttons, images, etc.) * `cls` Additional classes on the `ModalBody` * `kwargs` **Returns:** Div(..., cls='uk-modal-body') ### ModalHeader Source [code] ModalHeader(*c, cls=(), **kwargs) -> fastcore.xml.FT [/code] > Creates a modal header **Params** * `c` Components to put in the `ModalHeader` * `cls` Additional classes on the `ModalHeader` * `kwargs` **Returns:** Div(..., cls='uk-modal-header') ### ModalDialog Source [code] ModalDialog(*c, cls=(), **kwargs) -> fastcore.xml.FT [/code] > Creates a modal dialog **Params** * `c` Components to put in the `ModalDialog` (often `ModalBody`, `ModalHeader`, etc) * `cls` Additional classes on the `ModalDialog` * `kwargs` **Returns:** Div(..., cls='uk-modal-dialog') ### ModalContainer Source [code] ModalContainer(*c, cls=(), **kwargs) -> fastcore.xml.FT [/code] > Creates a modal container that components go in **Params** * `c` Components to put in the modal (often `ModalDialog`) * `cls` Additional classes on the `ModalContainer` * `kwargs` **Returns:** Div(..., cls='uk-modal uk-modal-container') # Navigation (Nav, NavBar, Tabs, etc.) API Reference # Nav, NavBar, DowDownNav, and Tab examples * * * ## Nav See Source See Output * Option 1 * Option 2 * Option 3 [code] def ex_nav1(): mbrs1 = [Li(A('Option 1'), cls='uk-active'), Li(A('Option 2')), Li(A('Option 3'))] return NavContainer(*mbrs1) [/code] See Source See Output * NavHeaderLi * Option 1 * Option 2 * Option 3 * Subtitle Ex NavSubtitle text to be shown * * Parent Name * Child 1 * Child 2 * Child 3 [code] def ex_nav2(): mbrs1 = [Li(A('Option 1'), cls='uk-active'), Li(A('Option 2')), Li(A('Option 3'))] mbrs2 = [Li(A('Child 1')), Li(A('Child 2')),Li(A('Child 3'))] return NavContainer( NavHeaderLi("NavHeaderLi"), *mbrs1, Li(A(href='')(Div("Subtitle Ex",NavSubtitle("NavSubtitle text to be shown")))), NavDividerLi(), NavParentLi( A('Parent Name'), NavContainer(*mbrs2,parent=False), ), ) [/code] ## Navbars Fully responsive simple navbar using the high level API. This will collapse to a hamburger menu on mobile devices. See the Scrollspy example for a more complex navbar example. See Source See Output ### My Blog Page1Page2Page3 Page1Page2Page3 [code] def ex_navbar1(): return NavBar(A("Page1",href='/rt1'), A("Page2",href='/rt2'), A("Page3",href='/rt3'), brand=H3('My Blog')) [/code] See Source See Output Page1Page2 Page1Page2 [code] def ex_navbar2(): return NavBar( A(Input(placeholder='search')), A(UkIcon("rocket")), A('Page1',href='/rt1'), A("Page2", href='/rt3'), brand=DivLAligned(Img(src='/api_reference/logo.svg'),UkIcon('rocket',height=30,width=30))) [/code] ## Drop Down Navs See Source See Output Open DropDown * Item 1 * Item 2 [code] def ex_navdrop(): return Div( Button("Open DropDown"), DropDownNavContainer(Li(A("Item 1",href=''),Li(A("Item 2",href=''))))) [/code] ## Tabs See Source See Output * Active * Item * Item * Disabled [code] def ex_tabs2(): return Container( TabContainer( Li(A("Active",href='javascript:void(0);', cls='uk-active')), Li(A("Item",href='javascript:void(0);')), Li(A("Item",href='javascript:void(0);')), Li(A("Disabled", cls='uk-disabled')))) [/code] A tabs can use any method of navigation (htmx, or href). However, often these are use in conjunction with switchers do to this client side See Source See Output * Active * Item * Item * Disabled * # Tab 1 * # Tab 2 * # Tab 3 [code] def ex_tabs1(): return Container( TabContainer( Li(A("Active",href='#', cls='uk-active')), Li(A("Item",href='#')), Li(A("Item",href='#')), Li(A("Disabled",href='#', cls='uk-disabled')), uk_switcher='connect: #component-nav; animation: uk-animation-fade', alt=True), Ul(id="component-nav", cls="uk-switcher")( Li(H1("Tab 1")), Li(H1("Tab 2")), Li(H1("Tab 3")))) [/code] # API Docs ### NavBar Source [code] NavBar(*c, brand=h3(('Title',),{'class': 'uk-h3 '}), right_cls='items-center space-x-4', mobile_cls='space-y-4', sticky: bool = False, uk_scrollspy_nav: bool | str = False, cls='p-4', scrollspy_cls=, menu_id=None) -> fastcore.xml.FT [/code] > Creates a responsive navigation bar with mobile menu support **Params** * `c` Component for right side of navbar (Often A tag links) * `brand` Brand/logo component for left side * `right_cls` Spacing for desktop links * `mobile_cls` Spacing for mobile links * `sticky` Whether to stick to the top of the page while scrolling * `uk_scrollspy_nav` Whether to use scrollspy for navigation * `cls` Classes for navbar * `scrollspy_cls` Scrollspy class (usually ScrollspyT.*) * `menu_id` ID for menu container (used for mobile toggle) **Returns:** Responsive NavBar ### TabContainer Source [code] TabContainer(*li, cls='', alt=False, **kwargs) -> fastcore.xml.FT [/code] > A TabContainer where children will be different tabs **Params** * `li` Components * `cls` Additional classes on the `Ul` * `alt` Whether to use an alternative tab style * `kwargs` **Returns:** Tab container ### NavContainer Source [code] NavContainer(*li, cls=, parent=True, uk_nav=False, uk_scrollspy_nav=False, sticky=False, **kwargs) -> fastcore.xml.FT [/code] > Creates a navigation container (useful for creating a sidebar navigation). A Nav is a list (NavBar is something different) **Params** * `li` List items are navigation elements (Special `Li` such as `NavParentLi`, `NavDividerLi`, `NavHeaderLi`, `NavSubtitle`, `NavCloseLi` can also be used) * `cls` Additional classes on the nav * `parent` Whether this nav is a _parent_ or _sub_ nav * `uk_nav` True for default collapsible behavior, see frankenui docs for more advanced options * `uk_scrollspy_nav` Activates scrollspy linking each item `A` tags `href` to content's `id` attribute * `sticky` Whether to stick to the top of the page while scrolling * `kwargs` **Returns:** FT Component that is a list of `Li` styled for a sidebar navigation menu * * * ### NavT __ Option | Value | Option | Value ---|---|---|--- default | uk-nav-default | primary | uk-nav-primary secondary | uk-nav-secondary | | ### NavCloseLi Source [code] NavCloseLi(*c, cls=(), **kwargs) -> fastcore.xml.FT [/code] > Creates a navigation list item with a close button **Params** * `c` Components * `cls` Additional classes on the li * `kwargs` **Returns:** Navigation list item with a close button ### NavSubtitle Source [code] NavSubtitle(*c, cls=, **kwargs) -> fastcore.xml.FT [/code] > Creates a navigation subtitle **Params** * `c` Components * `cls` Additional classes on the div * `kwargs` **Returns:** Navigation subtitle ### NavHeaderLi Source [code] NavHeaderLi(*c, cls=(), **kwargs) -> fastcore.xml.FT [/code] > Creates a navigation list item with a header **Params** * `c` Components * `cls` Additional classes on the li * `kwargs` **Returns:** Navigation list item with a header ### NavDividerLi Source [code] NavDividerLi(*c, cls=(), **kwargs) -> fastcore.xml.FT [/code] > Creates a navigation list item with a divider **Params** * `c` Components * `cls` Additional classes on the li * `kwargs` **Returns:** Navigation list item with a divider ### NavParentLi Source [code] NavParentLi(*nav_container, cls=(), **kwargs) -> fastcore.xml.FT [/code] > Creates a navigation list item with a parent nav for nesting **Params** * `nav_container` `NavContainer` container for a nested nav with `parent=False`) * `cls` Additional classes on the li * `kwargs` **Returns:** Navigation list item ### DropDownNavContainer Source [code] DropDownNavContainer(*li, cls=, parent=True, uk_nav=False, uk_dropdown=True, **kwargs) -> fastcore.xml.FT [/code] > A Nav that is part of a DropDown **Params** * `li` Components * `cls` Additional classes on the nav * `parent` Whether to use a parent nav * `uk_nav` True for default collapsible behavior, see https://franken-ui.dev/docs/nav#component-options for more advanced options * `uk_dropdown` Whether to use a dropdown * `kwargs` **Returns:** DropDown nav container # Alerts & Toasts API Reference ### Alerts The simplest alert is a div wrapped with a span: See Source See Output This is a plain alert [code] def ex_alerts1(): return Alert("This is a plain alert") [/code] Alert colors are defined by the alert styles: See Source See Output Your purchase has been confirmed! [code] def ex_alerts2(): return Alert("Your purchase has been confirmed!", cls=AlertT.success) [/code] It often looks nice to use icons in alerts: See Source See Output Please enter a valid email. [code] def ex_alerts3(): return Alert( DivLAligned(UkIcon('triangle-alert'), P("Please enter a valid email.")), cls=AlertT.error) [/code] ### Alert Source [code] Alert(*c, cls='', **kwargs) -> fastcore.xml.FT [/code] > Alert informs users about important events. **Params** * `c` Content for Alert (often text and/or icon) * `cls` Class for the alert (often an `AlertT` option) * `kwargs` **Returns:** Div(Span(...), cls='alert', role='alert') * * * ### AlertT _Alert styles from DaisyUI_ Option | Value | Option | Value ---|---|---|--- info | alert-info | success | alert-success warning | alert-warning | error | alert-error * * * ### Toasts To define a toast with a particular location, add horizontal or vertical toast type classes: See Source See Output First Example Toast [code] def ex_toasts1(): return Toast("First Example Toast", cls=(ToastHT.start, ToastVT.bottom)) [/code] To define toast colors, set the class of the alert wrapped by the toast: See Source See Output Second Example Toast [code] def ex_toasts2(): return Toast("Second Example Toast", alert_cls=AlertT.info) [/code] ### Toast Source [code] Toast(*c, cls='', alert_cls='', **kwargs) -> fastcore.xml.FT [/code] > Toasts are stacked announcements, positioned on the corner of page. **Params** * `c` Content for toast (often test) * `cls` Classes for toast (often `ToastHT` and `ToastVT` options) * `alert_cls` classes for altert (often `AlertT` options) * `kwargs` **Returns:** Div(Alert(...), cls='toast') * * * ### ToastHT _Horizontal position for Toast_ Option | Value | Option | Value ---|---|---|--- start | toast-start | center | toast-center end | toast-end | | * * * ### ToastVT _Vertical position for Toast_ Option | Value | Option | Value ---|---|---|--- top | toast-top | middle | toast-middle bottom | toast-bottom | | # Carousel Sliders API Reference Here is a simple example of a slider: See Source See Output [code] def ex_sliders_1(): return Slider(*[Img(src=f'https://picsum.photos/200/200?random={i}') for i in range(10)]) [/code] Here is a slider with cards: See Source See Output ### Card 0 Card 0 content ### Card 1 Card 1 content ### Card 2 Card 2 content ### Card 3 Card 3 content ### Card 4 Card 4 content ### Card 5 Card 5 content ### Card 6 Card 6 content ### Card 7 Card 7 content ### Card 8 Card 8 content ### Card 9 Card 9 content [code] def ex_sliders_2(): def _card(i): return Card(H3(f'Card {i}'), P(f'Card {i} content')) return Slider(*[_card(i) for i in range(10)]) [/code] Here is a slider with cards and autoplay: See Source See Output ### Card 0 Card 0 content ### Card 1 Card 1 content ### Card 2 Card 2 content ### Card 3 Card 3 content ### Card 4 Card 4 content ### Card 5 Card 5 content ### Card 6 Card 6 content ### Card 7 Card 7 content ### Card 8 Card 8 content ### Card 9 Card 9 content [code] def ex_sliders_3(): def _card(i): return Card(H3(f'Card {i}'), P(f'Card {i} content')) return Slider(*[_card(i) for i in range(10)], items_cls='gap-10', uk_slider='autoplay: true; autoplay-interval: 1000') [/code] Typically you want to use the `Slider` component, but if you need more control you can use the `SliderContainer`, `SliderItems`, and `SliderNav` components. ### Slider Source [code] Slider(*c, cls='', items_cls='gap-4', nav=True, nav_cls='', **kwargs) -> fastcore.xml.FT [/code] > Creates a slider with optional navigation arrows **Params** * `c` Items to show in slider * `cls` Classes for slider container * `items_cls` Classes for items container * `nav` Whether to show navigation arrows * `nav_cls` Classes for navigation arrows * `kwargs` **Returns:** SliderContainer(SliderItems(..., cls='gap-4'), SliderNav?) ### SliderContainer Source [code] SliderContainer(*c, cls='', uk_slider=True, **kwargs) -> fastcore.xml.FT [/code] > Creates a slider container **Params** * `c` Components * `cls` Additional classes on the container * `uk_slider` See FrankenUI Slider docs for more options * `kwargs` **Returns:** Div(..., cls='relative', uk_slider=True, ...) ### SliderItems Source [code] SliderItems(*c, cls='', **kwargs) -> fastcore.xml.FT [/code] > Creates a slider items container **Params** * `c` Components * `cls` Additional classes for the items * `kwargs` **Returns:** Div(..., cls='uk-slider-items uk-grid', ...) ### SliderNav Source [code] SliderNav(cls='uk-position-small uk-hidden-hover', prev_cls='absolute left-0 top-1/2 -translate-y-1/2', next_cls='absolute right-0 top-1/2 -translate-y-1/2', **kwargs) -> fastcore.xml.FT [/code] > Navigation arrows for Slider component **Params** * `cls` Additional classes for the navigation * `prev_cls` Additional classes for the previous navigation * `next_cls` Additional classes for the next navigation * `kwargs` **Returns:** Left and right navigation arrows for Slider component # Steps API Reference See Source See Output * Account Created * Profile Setup * Verification [code] def ex_steps2(): return Steps( LiStep("Account Created", cls=StepT.primary), LiStep("Profile Setup", cls=StepT.neutral), LiStep("Verification", cls=StepT.neutral), cls="w-full") [/code] See Source See Output * Project Planning * Design Phase * Development * Testing * Deployment [code] def ex_steps3(): return Steps( LiStep("Project Planning", cls=StepT.success, data_content="📝"), LiStep("Design Phase", cls=StepT.success, data_content="💡"), LiStep("Development", cls=StepT.primary, data_content="🛠️"), LiStep("Testing", cls=StepT.neutral, data_content="🔎"), LiStep("Deployment", cls=StepT.neutral, data_content="🚀"), cls=(StepsT.vertical, "min-h-[400px]")) [/code] # API Docs ### Steps Source [code] Steps(*li, cls='', **kwargs) -> fastcore.xml.FT [/code] > Creates a steps container **Params** * `li` Each `Li` represent a step (generally use `LiStep`) * `cls` class for Steps (generally a `StepsT` option) * `kwargs` **Returns:** Ul(..., cls='steps') * * * ### StepsT _Options for Steps_ Option | Value | Option | Value ---|---|---|--- vertical | steps-vertical | horizonal | steps-horizonal ### LiStep Source [code] LiStep(*c, cls='', data_content=None, **kwargs) -> fastcore.xml.FT [/code] > Creates a step list item **Params** * `c` Description for Step that goes next to bubble (often text) * `cls` Additional step classes (generally a `StepT` component) * `data_content` Content for inside bubble (defaults to number, often an emoji) * `kwargs` **Returns:** Li(..., cls='step') * * * ### StepT _Step styles for LiStep_ Option | Value | Option | Value | Option | Value ---|---|---|---|---|--- primary | step-primary | secondary | step-secondary | accent | step-accent info | step-info | success | step-success | warning | step-warning error | step-error | neutral | step-neutral | | # Tables API Reference See Source See Output Name | Age | City ---|---|--- Alice | 25 | New York Bob | 30 | San Francisco Charlie | 35 | London Total | 90 [code] def ex_tables0(): return Table( Thead(Tr(Th('Name'), Th('Age'), Th('City'))), Tbody(Tr(Td('Alice'), Td('25'), Td('New York')), Tr(Td('Bob'), Td('30'), Td('San Francisco')), Tr(Td('Charlie'), Td('35'), Td('London'))), Tfoot(Tr(Td('Total'), Td('90')))) [/code] See Source See Output Name | Age | City ---|---|--- Alice | 25 | New York Bob | 30 | San Francisco Charlie | 35 | London Total | 90 [code] def ex_tables1(): header = ['Name', 'Age', 'City'] body = [['Alice', '25', 'New York'], ['Bob', '30', 'San Francisco'], ['Charlie', '35', 'London']] footer = ['Total', '90'] return TableFromLists(header, body, footer) [/code] See Source See Output NAME | AGE | CITY ---|---|--- Alice | 30 years | New York Bob | 25 years | London [code] def ex_tables2(): def body_render(k, v): match k.lower(): case 'name': return Td(v, cls='font-bold') case 'age': return Td(f"{v} years") case _: return Td(v) header_data = ['Name', 'Age', 'City'] body_data =[{'Name': 'Alice', 'Age': 30, 'City': 'New York'}, {'Name': 'Bob', 'Age': 25, 'City': 'London'}] return TableFromDicts(header_data, body_data, header_cell_render=lambda v: Th(v.upper()), body_cell_render=body_render) [/code] ### Table Source [code] Table(*c, cls=(, , , ), **kwargs) -> fastcore.xml.FT [/code] > Creates a table **Params** * `c` Components (typically `Thead`, `Tbody`, `Tfoot`) * `cls` Additional classes on the table * `kwargs` **Returns:** Table component ### TableFromLists Source [code] TableFromLists(header_data: Sequence, body_data: Sequence[Sequence], footer_data=None, header_cell_render=, body_cell_render=, footer_cell_render=, cls=(, , , ), sortable=False, **kwargs) -> fastcore.xml.FT [/code] > Creates a Table from a list of header data and a list of lists of body data **Params** * `header_data` List of header data * `body_data` List of lists of body data * `footer_data` List of footer data * `header_cell_render` Function(content) -> FT that renders header cells * `body_cell_render` Function(key, content) -> FT that renders body cells * `footer_cell_render` Function(key, content) -> FT that renders footer cells * `cls` Additional classes on the table * `sortable` Whether to use sortable table * `kwargs` **Returns:** Table from lists ### TableFromDicts Source [code] TableFromDicts(header_data: Sequence, body_data: Sequence[dict], footer_data=None, header_cell_render=, body_cell_render= at 0x7f7524465e40>, footer_cell_render= at 0x7f7524465ee0>, cls=(, , , ), sortable=False, **kwargs) -> fastcore.xml.FT [/code] > Creates a Table from a list of header data and a list of dicts of body data **Params** * `header_data` List of header data * `body_data` List of dicts of body data * `footer_data` List of footer data * `header_cell_render` Function(content) -> FT that renders header cells * `body_cell_render` Function(key, content) -> FT that renders body cells * `footer_cell_render` Function(key, content) -> FT that renders footer cells * `cls` Additional classes on the table * `sortable` Whether to use sortable table * `kwargs` **Returns:** Styled Table * * * ### TableT __ Option | Value | Option | Value | Option | Value ---|---|---|---|---|--- divider | uk-table-divider | striped | uk-table-striped | hover | uk-table-hover sm | uk-table-sm | lg | uk-table-lg | justify | uk-table-justify middle | uk-table-middle | responsive | uk-table-responsive | | ### Tbody Source [code] Tbody(*rows, cls=(), sortable=False, **kwargs) [/code] > **Params** * `rows` * `cls` * `sortable` * `kwargs` ### Th Source [code] Th(*c, cls=(), shrink=False, expand=False, small=False) [/code] > **Params** * `c` Components that go in the cell * `cls` Additional classes on the cell container * `shrink` Whether to shrink the cell * `expand` Whether to expand the cell * `small` Whether to use a small table **Returns:** Table cell ### Td Source [code] Td(*c, cls=(), shrink=False, expand=False, small=False) [/code] > **Params** * `c` Components that go in the cell * `cls` Additional classes on the cell container * `shrink` Whether to shrink the cell * `expand` Whether to expand the cell * `small` Whether to use a small table **Returns:** Table cell # Theme and Headers API Reference To get headers with a default theme use `hdrs=Theme..headers()`. For example for the blue theme you would use `hdrs=Theme.blue.headers()`. The theme integrated together different frameworks and allows tailwind, FrankenUI, HighlighJS, and DaisyUI components to work well together. Tailwind, FrankenUI and DaisyUI are imported by default. You must use DaisyUI headers to use anything in the `daisy` module, and FrankenUI headers to use anything in the `franken` module. HighlightJS is not added by default, but you can add it by setting `highlightjs=True` in the headers function. The `render_md` function will use HighlightJS for code blocks. Theme options are: Theme.slate Theme.stone Theme.gray Theme.neutral Theme.red Theme.rose Theme.orange Theme.green Theme.blue Theme.yellow Theme.violet Theme.zinc ### Theme Picker See Source See Output ZincSlateStoneGrayNeutralRedRoseOrangeGreenBlueYellowVioletNoneSmallMediumLargeNoneSmallMediumLargeSmallDefaultLightDark [code] def ex_theme_switcher(): return ThemePicker() [/code] ### ThemePicker Source [code] ThemePicker(color=True, radii=True, shadows=True, font=True, mode=True, cls='p-4', custom_themes=[]) [/code] > Theme picker component with configurable sections **Params** * `color` * `radii` * `shadows` * `font` * `mode` * `cls` * `custom_themes` Themes are controlled with `bg-background text-foreground` classes on the `Body` tag. `fast_app` and `FastHTML` will do this for you automatically so you typically do not have to do anything ### fast_app Source [code] fast_app(*args, pico=False, db_file: Optional[str] = None, render: Optional[] = None, hdrs: Optional[tuple] = None, ftrs: Optional[tuple] = None, tbls: Optional[dict] = None, before: Union[tuple, NoneType, fasthtml.core.Beforeware] = None, middleware: Optional[tuple] = None, live: bool = False, debug: bool = False, routes: Optional[tuple] = None, exception_handlers: Optional[dict] = None, on_startup: Optional[] = None, on_shutdown: Optional[] = None, lifespan: Optional[] = None, default_hdrs=True, surreal: Optional[bool] = True, htmx: Optional[bool] = True, exts: Union[list, str, NoneType] = None, secret_key: Optional[str] = None, key_fname: str = '.sesskey', session_cookie: str = 'session_', max_age: int = 31536000, sess_path: str = '/', same_site: str = 'lax', sess_https_only: bool = False, sess_domain: Optional[str] = None, htmlkw: Optional[dict] = None, bodykw: Optional[dict] = None, reload_attempts: Optional[int] = 1, reload_interval: Optional[int] = 1000, static_path: str = '.', body_wrap: = , nb_hdrs: bool = False) [/code] > Create a FastHTML or FastHTMLWithLiveReload app with `bg-background text-foreground` to bodykw for frankenui themes **Params** * `db_file` Database file name, if needed * `render` Function used to render default database class * `hdrs` Additional FT elements to add to * `ftrs` Additional FT elements to add to end of * `tbls` Experimental mapping from DB table names to dict table definitions * `before` Functions to call prior to calling handler * `middleware` Standard Starlette middleware * `live` Enable live reloading * `debug` Passed to Starlette, indicating if debug tracebacks should be returned on errors * `routes` Passed to Starlette * `exception_handlers` Passed to Starlette * `on_startup` Passed to Starlette * `on_shutdown` Passed to Starlette * `lifespan` Passed to Starlette * `default_hdrs` Include default FastHTML headers such as HTMX script? * `pico` Include PicoCSS header? * `surreal` Include surreal.js/scope headers? * `htmx` Include HTMX header? * `exts` HTMX extension names to include * `secret_key` Signing key for sessions * `key_fname` Session cookie signing key file name * `session_cookie` Session cookie name * `max_age` Session cookie expiry time * `sess_path` Session cookie path * `same_site` Session cookie same site policy * `sess_https_only` Session cookie HTTPS only? * `sess_domain` Session cookie domain * `htmlkw` Attrs to add to the HTML tag * `bodykw` Attrs to add to the Body tag * `reload_attempts` Number of reload attempts when live reloading * `reload_interval` Time between reload attempts in ms * `static_path` Where the static file route points to, defaults to root dir * `body_wrap` FT wrapper for body contents * `nb_hdrs` If in notebook include headers inject headers in notebook DOM? * `args` ### FastHTML Source [code] FastHTML(*args, pico=False, debug=False, routes=None, middleware=None, title: str = 'FastHTML page', exception_handlers=None, on_startup=None, on_shutdown=None, lifespan=None, hdrs=None, ftrs=None, exts=None, before=None, after=None, surreal=True, htmx=True, default_hdrs=True, sess_cls=, secret_key=None, session_cookie='session_', max_age=31536000, sess_path='/', same_site='lax', sess_https_only=False, sess_domain=None, key_fname='.sesskey', body_wrap=, htmlkw=None, nb_hdrs=False) [/code] > Create a FastHTML app and adds `bg-background text-foreground` to bodykw for frankenui themes **Params** * `debug` * `routes` * `middleware` * `title` * `exception_handlers` * `on_startup` * `on_shutdown` * `lifespan` * `hdrs` * `ftrs` * `exts` * `before` * `after` * `surreal` * `htmx` * `default_hdrs` * `sess_cls` * `secret_key` * `session_cookie` * `max_age` * `sess_path` * `same_site` * `sess_https_only` * `sess_domain` * `key_fname` * `body_wrap` * `htmlkw` * `nb_hdrs` * `args` * `pico` # Typography API Reference Ready to go semantic options that cover most of what you need based on the HTML spec See Source See Output Titled # Titled # Level 1 Heading (H1) ## Level 2 Heading (H2) ### Level 3 Heading (H3) #### Level 4 Heading (H4) ##### Level 5 Heading (H5) ###### Level 6 Heading (H6) [code] def ex_headings(): return Div( Titled("Titled"), H1("Level 1 Heading (H1)"), H2("Level 2 Heading (H2)"), H3("Level 3 Heading (H3)"), H4("Level 4 Heading (H4)"), H5("Level 5 Heading (H5)"), H6("Level 6 Heading (H6)"), ) [/code] See Source See Output ## Semantic HTML Elements Demo Here's an example of _emphasized (Em)_ and **strong (Strong)** text. Some _italic text (I)_ and smaller text (Small) in a paragraph. You can highlight (Mark) text, show ~~deleted (Del)~~ and inserted (Ins) content. Chemical formulas use subscripts (Sub) and superscripts (Sup) like H2O. > The only way to do great work is to love what you do. > > Steve Jobs (Cite) As Shakespeare wrote, "All the world's a stage (Q)". Posted on 2024-01-29 Mozilla Foundation (Address) 331 E Evelyn Ave (Address) Mountain View, CA 94041 (Address) USA (Address) HTML (Dfn) (HyperText Markup Language (Abbr)) is the standard markup language for documents designed to be displayed in a web browser. Press `Ctrl (Kbd)` \+ `C (Kbd)` to copy. The command returned: Hello, World! (Samp) Let x (Var) be the variable in the equation. Figure 1: An example image with caption (Caption)Click to show more information (Summary) This is the detailed content that is initially hidden (P) 123 (Data) is a number, and here's a Meter showing progress: Temperature: (with low/high/optimum values) €42.00 \- price example with semantic value Form calculation result: The sum is 42 (Output) ### Blog Post Title (H3) By John Doe • 5 min read (Small) Article content here... This text has _proper name annotation (U)_ and this is ~~outdated information (S)~~ that's been superseded. [code] def ex_semantic_elements(): return Div( H2("Semantic HTML Elements Demo"), # Text formatting examples P("Here's an example of ", Em("emphasized (Em)"), " and ", Strong("strong (Strong)"), " text."), P("Some ", I("italic text (I)"), " and ", Small("smaller text (Small)"), " in a paragraph."), P("You can ", Mark("highlight (Mark)"), " text, show ", Del("deleted (Del)"), " and ", Ins("inserted (Ins)"), " content."), P("Chemical formulas use ", Sub("subscripts (Sub)"), " and ", Sup("superscripts (Sup)"), " like H", Sub("2"), "O."), # Quote examples Blockquote( P("The only way to do great work is to love what you do."), Cite("Steve Jobs (Cite)")), P("As Shakespeare wrote, ", Q("All the world's a stage (Q)"), "."), # Time and Address P("Posted on ", Time("2024-01-29", datetime="2024-01-29")), Address( "Mozilla Foundation (Address)", Br(), "331 E Evelyn Ave (Address)", Br(), "Mountain View, CA 94041 (Address)", Br(), "USA (Address)"), # Technical and definition examples P( Dfn("HTML (Dfn)"), " (", Abbr("HyperText Markup Language (Abbr)", title="HyperText Markup Language"), ") is the standard markup language for documents designed to be displayed in a web browser."), P("Press ", Kbd("Ctrl (Kbd)"), " + ", Kbd("C (Kbd)"), " to copy."), P("The command returned: ", Samp("Hello, World! (Samp)")), P("Let ", Var("x (Var)"), " be the variable in the equation."), # Figure with caption Figure( PicSumImg(), Caption("Figure 1: An example image with caption (Caption)")), # Interactive elements Details( Summary("Click to show more information (Summary)"), P("This is the detailed content that is initially hidden (P)")), # Data representation P( Data("123 (Data)", value="123"), " is a number, and here's a Meter showing progress: ", Meter(value=0.6, min=0, max=1)), P( "Temperature: ", Meter(value=-1, min=-10, max=40, low=0, high=30, optimum=21), " (with low/high/optimum values)"), P( Data("€42.00", value="42"), " - price example with semantic value"), # Output example P("Form calculation result: ", Output("The sum is 42 (Output)", form="calc-form", for_="num1 num2")), # Meta information example Section( H3("Blog Post Title (H3)"), Small("By John Doe • 5 min read (Small)"), P("Article content here...")), # Text decoration examples P("This text has ",U("proper name annotation (U)"), " and this is ",S("outdated information (S)"), " that's been superseded."), cls='space-y-4' ) [/code] See Source See Output `This is a CodeSpan element` > This is a blockquote element [code] #This is a CodeBlock element def add(a,b): return a+b [/code] [code] def ex_other(): return Div( CodeSpan("This is a CodeSpan element"), Blockquote("This is a blockquote element"), CodeBlock("#This is a CodeBlock element\n\ndef add(a,b): return a+b")) [/code] Styling text is possibly the most common style thing to do, so we have a couple of helpers for discoverability inside python. `TextPresets` is intended to be combinations are are widely applicable and used often, where `TextT` is intended to be more flexible options for you to combine together yourself. ##### TextPresets.* See Source See Output This is muted_sm text This is muted_lg text This is bold_sm text This is bold_lg text This is md_weight_sm text This is md_weight_muted text [code] def ex_textpresets(): return Grid(*[Div(P(f"This is {preset.name} text", cls=preset.value)) for preset in TextPresets]) [/code] ##### TextT.* See Source See Output This is paragraph text This is lead text This is meta text This is gray text This is italic text This is xs text This is sm text This is lg text This is xl text This is light text This is normal text This is medium text This is bold text This is extrabold text This is primary text This is secondary text This is success text This is warning text This is error text This is info text This is left text This is right text This is center text This is justify text This is start text This is end text This is top text This is middle text This is bottom text This is truncate text This is break_ text This is nowrap text This is underline text This is highlight text [code] def ex_textt(): return Grid(*[Div(P(f"This is {s.name} text", cls=s.value)) for s in TextT]) [/code] ### API Reference * * * ### TextPresets _Common Typography Presets_ Option | Value | Option | Value ---|---|---|--- muted_sm | text-gray-500 dark:text-gray-200 text-sm | muted_lg | text-gray-500 dark:text-gray-200 text-lg bold_sm | font-bold text-sm | bold_lg | font-bold text-lg md_weight_sm | text-sm font-medium | md_weight_muted | font-medium text-gray-500 dark:text-gray-200 * * * ### TextT _Text Styles from https://franken-ui.dev/docs/text_ Option | Value | Option | Value | Option | Value | Option | Value ---|---|---|---|---|---|---|--- paragraph | uk-paragraph | lead | uk-text-lead | meta | uk-text-meta | gray | text-gray-500 dark:text-gray-200 italic | italic | xs | text-xs | sm | text-sm | lg | text-lg xl | text-xl | light | font-normal | normal | font-light | medium | font-medium bold | font-bold | extrabold | font-extrabold | muted | text-gray-500 dark:text-gray-200 | primary | text-primary secondary | text-secondary | success | text-success | warning | text-warning | error | text-error info | text-info | left | text-left | right | text-right | center | text-center justify | text-justify | start | text-start | end | text-end | top | align-top middle | align-middle | bottom | align-bottom | truncate | uk-text-truncate | break_ | uk-text-break nowrap | uk-text-nowrap | underline | underline | highlight | bg-yellow-200 dark:bg-yellow-800 text-black | | ### H1 Source [code] H1(*c: fastcore.xml.FT | str, cls: enum.Enum | str | tuple = (), **kwargs) -> fastcore.xml.FT [/code] > H1 with styling and appropriate size **Params** * `c` Contents of H1 tag (often text) * `cls` Classes in addition to H1 styling * `kwargs` **Returns:** H1(..., cls='uk-h1') ### H2 Source [code] H2(*c: fastcore.xml.FT | str, cls: enum.Enum | str | tuple = (), **kwargs) -> fastcore.xml.FT [/code] > H2 with styling and appropriate size **Params** * `c` Contents of H2 tag (often text) * `cls` Classes in addition to H2 styling * `kwargs` **Returns:** H2(..., cls='uk-h2') ### H3 Source [code] H3(*c: fastcore.xml.FT | str, cls: enum.Enum | str | tuple = (), **kwargs) -> fastcore.xml.FT [/code] > H3 with styling and appropriate size **Params** * `c` Contents of H3 tag (often text) * `cls` Classes in addition to H3 styling * `kwargs` **Returns:** H3(..., cls='uk-h3') ### H4 Source [code] H4(*c: fastcore.xml.FT | str, cls: enum.Enum | str | tuple = (), **kwargs) -> fastcore.xml.FT [/code] > H4 with styling and appropriate size **Params** * `c` Contents of H4 tag (often text) * `cls` Classes in addition to H4 styling * `kwargs` **Returns:** H4(..., cls='uk-h4') ### H5 Source [code] H5(*c: fastcore.xml.FT | str, cls: enum.Enum | str | tuple = (), **kwargs) -> fastcore.xml.FT [/code] > H5 with styling and appropriate size **Params** * `c` Contents of H5 tag (often text) * `cls` Classes in addition to H5 styling * `kwargs` **Returns:** H5(..., cls='text-lg font-semibold') ### H6 Source [code] H6(*c: fastcore.xml.FT | str, cls: enum.Enum | str | tuple = (), **kwargs) -> fastcore.xml.FT [/code] > H6 with styling and appropriate size **Params** * `c` Contents of H6 tag (often text) * `cls` Classes in addition to H6 styling * `kwargs` **Returns:** H6(..., cls='text-base font-semibold') ### CodeSpan Source [code] CodeSpan(*c, cls=(), **kwargs) -> fastcore.xml.FT [/code] > A CodeSpan with Styling **Params** * `c` Contents of CodeSpan tag (inline text code snippets) * `cls` Classes in addition to CodeSpan styling * `kwargs` **Returns:** Code(..., cls='uk-codespan') ### Blockquote Source [code] Blockquote(*c: fastcore.xml.FT | str, cls: enum.Enum | str | tuple = (), **kwargs) -> fastcore.xml.FT [/code] > Blockquote with Styling **Params** * `c` Contents of Blockquote tag (often text) * `cls` Classes in addition to Blockquote styling * `kwargs` **Returns:** Blockquote(..., cls='uk-blockquote') ### CodeBlock Source [code] CodeBlock(*c: str, cls: enum.Enum | str | tuple = (), code_cls: enum.Enum | str | tuple = (), **kwargs) -> fastcore.xml.FT [/code] > CodeBlock with Styling **Params** * `c` Contents of Code tag (often text) * `cls` Classes for the outer container * `code_cls` Classes for the code tag * `kwargs` **Returns:** Div(Pre(Code(..., cls='uk-codeblock), cls='multiple tailwind styles'), cls='uk-block') ### Em Source [code] Em(*c: fastcore.xml.FT | str, cls: enum.Enum | str | tuple = (), **kwargs) -> fastcore.xml.FT [/code] > Styled emphasis text **Params** * `c` Contents of Em tag (emphasis) * `cls` Additional classes * `kwargs` **Returns:** Additional args for Em tag ### Strong Source [code] Strong(*c: fastcore.xml.FT | str, cls: enum.Enum | str | tuple = (), **kwargs) -> fastcore.xml.FT [/code] > Styled strong text **Params** * `c` Contents of Strong tag * `cls` Additional classes * `kwargs` **Returns:** Additional args for Strong tag ### I Source [code] I(*c: fastcore.xml.FT | str, cls: enum.Enum | str | tuple = (), **kwargs) -> fastcore.xml.FT [/code] > Styled italic text **Params** * `c` Contents of I tag (italics) * `cls` Additional classes * `kwargs` **Returns:** Additional args for I tag ### Small Source [code] Small(*c: fastcore.xml.FT | str, cls: enum.Enum | str | tuple = (), **kwargs) -> fastcore.xml.FT [/code] > Styled small text **Params** * `c` Contents of Small tag * `cls` Additional classes * `kwargs` **Returns:** Additional args for Small tag ### Mark Source [code] Mark(*c: fastcore.xml.FT | str, cls: enum.Enum | str | tuple = (), **kwargs) -> fastcore.xml.FT [/code] > Styled highlighted text **Params** * `c` Contents of Mark tag (highlighted text) * `cls` Additional classes * `kwargs` **Returns:** Additional args for Mark tag ### Sub Source [code] Sub(*c: fastcore.xml.FT | str, cls: enum.Enum | str | tuple = (), **kwargs) -> fastcore.xml.FT [/code] > Styled subscript text **Params** * `c` Contents of Sub tag (subscript) * `cls` Additional classes * `kwargs` **Returns:** Additional args for Sub tag ### Sup Source [code] Sup(*c: fastcore.xml.FT | str, cls: enum.Enum | str | tuple = (), **kwargs) -> fastcore.xml.FT [/code] > Styled superscript text **Params** * `c` Contents of Sup tag (superscript) * `cls` Additional classes * `kwargs` **Returns:** Additional args for Sup tag ### Del Source [code] Del(*c: fastcore.xml.FT | str, cls: enum.Enum | str | tuple = (), **kwargs) -> fastcore.xml.FT [/code] > Styled deleted text **Params** * `c` Contents of Del tag (deleted text) * `cls` Additional classes * `kwargs` **Returns:** Additional args for Del tag ### Ins Source [code] Ins(*c: fastcore.xml.FT | str, cls: enum.Enum | str | tuple = (), **kwargs) -> fastcore.xml.FT [/code] > Styled inserted text **Params** * `c` Contents of Ins tag (inserted text) * `cls` Additional classes * `kwargs` **Returns:** Additional args for Ins tag ### Dfn Source [code] Dfn(*c: fastcore.xml.FT | str, cls: enum.Enum | str | tuple = (), **kwargs) -> fastcore.xml.FT [/code] > Styled definition term with italic and medium weight **Params** * `c` Contents of Dfn tag (definition) * `cls` Additional classes * `kwargs` **Returns:** Additional args for Dfn tag ### Abbr Source [code] Abbr(*c: fastcore.xml.FT | str, cls: enum.Enum | str | tuple = (), title: str = None, **kwargs) -> fastcore.xml.FT [/code] > Styled abbreviation with dotted underline **Params** * `c` Contents of Abbr tag * `cls` Additional classes * `title` Title attribute for abbreviation * `kwargs` **Returns:** Additional args for Abbr tag ### Q Source [code] Q(*c: fastcore.xml.FT | str, cls: enum.Enum | str | tuple = (), **kwargs) -> fastcore.xml.FT [/code] > Styled quotation mark **Params** * `c` Contents of Q tag (quote) * `cls` Additional classes * `kwargs` **Returns:** Additional args for Q tag ### Kbd Source [code] Kbd(*c: fastcore.xml.FT | str, cls: enum.Enum | str | tuple = (), **kwargs) -> fastcore.xml.FT [/code] > Styled keyboard input with subtle background **Params** * `c` Contents of Kbd tag (keyboard input) * `cls` Additional classes * `kwargs` **Returns:** Additional args for Kbd tag ### Samp Source [code] Samp(*c: fastcore.xml.FT | str, cls: enum.Enum | str | tuple = (), **kwargs) -> fastcore.xml.FT [/code] > Styled sample output with subtle background **Params** * `c` Contents of Samp tag (sample output) * `cls` Additional classes * `kwargs` **Returns:** Additional args for Samp tag ### Var Source [code] Var(*c: fastcore.xml.FT | str, cls: enum.Enum | str | tuple = (), **kwargs) -> fastcore.xml.FT [/code] > Styled variable with italic monospace **Params** * `c` Contents of Var tag (variable) * `cls` Additional classes * `kwargs` **Returns:** Additional args for Var tag ### Figure Source [code] Figure(*c: fastcore.xml.FT | str, cls: enum.Enum | str | tuple = (), **kwargs) -> fastcore.xml.FT [/code] > Styled figure container with card-like appearance **Params** * `c` Contents of Figure tag * `cls` Additional classes * `kwargs` **Returns:** Additional args for Figure tag ### Caption Source [code] Caption(*c: fastcore.xml.FT | str, cls: enum.Enum | str | tuple = (), **kwargs) -> fastcore.xml.FT [/code] > Styled caption text **Params** * `c` * `cls` * `kwargs` ### Details Source [code] Details(*c: fastcore.xml.FT | str, cls: enum.Enum | str | tuple = (), **kwargs) -> fastcore.xml.FT [/code] > Styled details element **Params** * `c` Contents of Details tag * `cls` Additional classes * `kwargs` **Returns:** Additional args for Details tag ### Summary Source [code] Summary(*c: fastcore.xml.FT | str, cls: enum.Enum | str | tuple = (), **kwargs) -> fastcore.xml.FT [/code] > Styled summary element **Params** * `c` Contents of Summary tag * `cls` Additional classes * `kwargs` **Returns:** Additional args for Summary tag ### Meter Source [code] Meter(*c: fastcore.xml.FT | str, value: float = None, min: float = None, max: float = None, cls: enum.Enum | str | tuple = (), **kwargs) -> fastcore.xml.FT [/code] > Styled meter element **Params** * `c` Contents of Meter tag * `value` Current value * `min` Minimum value * `max` Maximum value * `cls` Additional classes * `kwargs` **Returns:** Additional args for Meter tag ### Data Source [code] Data(*c: fastcore.xml.FT | str, value: str = None, cls: enum.Enum | str | tuple = (), **kwargs) -> fastcore.xml.FT [/code] > Styled data element **Params** * `c` Contents of Data tag * `value` Value attribute * `cls` Additional classes * `kwargs` **Returns:** Additional args for Data tag ### Output Source [code] Output(*c: fastcore.xml.FT | str, form: str = None, for_: str = None, cls: enum.Enum | str | tuple = (), **kwargs) -> fastcore.xml.FT [/code] > Styled output element for form results **Params** * `c` Contents of Output tag * `form` ID of form this output belongs to * `for_` IDs of elements this output is for * `cls` Additional classes * `kwargs` **Returns:** Additional args for Output tag ### Address Source [code] Address(*c: fastcore.xml.FT | str, cls: enum.Enum | str | tuple = (), **kwargs) -> fastcore.xml.FT [/code] > Styled address element **Params** * `c` Contents of Address tag * `cls` Additional classes * `kwargs` **Returns:** Additional args for Address tag ### Time Source [code] Time(*c: fastcore.xml.FT | str, cls: enum.Enum | str | tuple = (), datetime: str = None, **kwargs) -> fastcore.xml.FT [/code] > Styled time element **Params** * `c` Contents of Time tag * `cls` Additional classes * `datetime` datetime attribute * `kwargs` **Returns:** Additional args for Time tag *[HyperText Markup Language (Abbr)]: HyperText Markup Language # MonterUI Page Layout Guide This guide will discuss 3 tools for laying out your app pages, Grid, Flexbox, and Columns. This page will discuss the strengths and when to use each individually, and then a section for how to combine them for more complex layouts at the end. > Note: This guide is designed to get you started building layouts quickly, not to teach you all the details needed to build every possible custom layout with pixel-perfect control. To get more detailed and lower-level control, explore the tailwind docs. This guide is for creating flexible layouts you envision, but does not discuss responsiveness to make different layouts that are both mobile and desktop friendly. Stay tunes for a responsiveness guide that will help with that! # Grid Grids are best for regular predictable layouts with lots of the same shape of things that may need to change a lot for different screen sizes. I think the best way to see what it can do is to see a bunch of examples, so here they are! ## Minimal Image Cards This is a minimal example of a grid that just shows image and text. This is the foundation for many more complex layouts so make sure to understand what's going on here first before moving on! A grid lays things out in a...grid. As you can see, we have evenly sized cards by default. See Source See Output Image 0 Image 1 Image 2 Image 3 Image 4 Image 5 [code] def picsum_img(seed): return Img(src=f'https://picsum.photos/300/200?random={seed}') Grid(*[Card(picsum_img(i),P(f"Image {i}")) for i in range(6)]) [/code] ## Dashboard Example However, they don't have to be evenly sized! By providing `row-span-{int}` and `col-span-{int}` we can control how many rows or columns specific grid elements take up. By doing this, we can create a grid that has lots of different shapes and types of elements. Let's look at a dashboard layout at an examples of this. See Source See Output ### SideBar Range For Filters A search Bar Choose Product Line Product Line AProduct Line BProduct Line CProduct Line D Include Inactive Users Include Users without order Include Users without email Total Users ### 1,234 Active Now ### 342 Revenue ### $45,678 Conversion ### 2.4% ### Monthly Revenue Chart Goes Here ### User Growth Chart Goes Here [code] def StatCard(title, value, color='primary'): "A card with a statistics. Since there is no row/col span class it will take up 1 slot" return Card(P(title, cls=TextPresets.muted_sm), H3(value, cls=f'text-{color}'),) stats = [StatCard(*data) for data in [ ("Total Users", "1,234", "blue-600"), ("Active Now", "342", "green-600"), ("Revenue", "$45,678", "purple-600"), ("Conversion", "2.4%", "amber-600")]] def ChartCard(title): "A card for a chart. col-span-2 means it will take up 2 columns" return Div(cls="col-span-2")( Card(H3(title),Div("Chart Goes Here", cls="h-64 uk-background-muted"))) chart_cards = [ChartCard(title) for title in ("Monthly Revenue", "User Growth")] sidebar = Form( H3("SideBar"), LabelRange("Range For Filters", min=0, max=100), LabelInput("A search Bar"), LabelSelect(map(Option, ["Product Line A", "Product Line B", "Product Line C", "Product Line D"]), label="Choose Product Line"), LabelCheckboxX("Include Inactive Users"), LabelCheckboxX("Include Users without order"), LabelCheckboxX("Include Users without email"), # This sidebar will take up 2 rows b/c of row-span-2 cls='row-span-2 space-y-5' ) Container(Grid(sidebar, *stats, *chart_cards, cols=5)) [/code] # Flexbox Using Grid for the overall layout, and flex for the individual elements is a powerful pattern. With `MonsterUI` you can do quite a bit without knowing anything about flexbox, which is what will be taught here. However, flexbox is well worth learning about it in more detail. You will run into situations where you need more flexbox knowledge than is covered here to build your vision. Thankfully you can get that knowledge by playing a fantastic tutorial game called FlexBox Froggy! ## Forms Often you want to stack things horizontally. You can use the `DivHStacked` component to do this. `DivHStacked` is a helper function for flexbox and creates a div with these classes by default `cls=(FlexT.block, FlexT.row, FlexT.middle, 'space-x-4')`. See Source See Output ### Form with Input Groups Search Users Filter Tags Email List SubmitCancel [code] def InputGroup(label, placeholder='', button_text='Submit', cls=''): # Div H Stacked makes the label and input show up on the same row instead of putting the input on a newline return DivHStacked( FormLabel(label, cls='whitespace-nowrap'), Input(placeholder=placeholder)) Container( H3("Form with Input Groups"), Form(cls='space-y-4')( InputGroup("Search Users", "Enter username..."), InputGroup("Filter Tags", "Add tags...", "Add"), InputGroup("Email List", "Enter email...", "Subscribe"), Div(*( Button(UkIcon(icon, cls='mr-2'), text) for icon, text in [("rocket", "Submit"), ("circle-x", "Cancel")]), cls='space-x-4'))) [/code] ## Avatar You can use this same `DivHStacked` to align things like text next to images. And you can use `DivVStacked` to stack things vertically to create design structures you like. `DivVStacked` works by using `cls=(FlexT.block,FlexT.column,FlexT.middle)` See Source See Output John Doe [email protected] +1-123-456-7890 [code] # DivHStacked makes the a single row so text is to on same line as avatar DivHStacked( DiceBearAvatar("user"), # DivVStacked stacks things vertically together and centers it with flex DivVStacked( P("John Doe", cls=TextT.lg), P("[email protected]", cls=TextT.muted), P("+1-123-456-7890"), cls=TextT.muted)) [/code] ## Pricing Card These can be combined with icons and other styling to create larger components like a pricing card. See Source See Output ## Pro Plan ### $99 per month * Unlimited users * 24/7 priority support * Custom branding options * Advanced analytics dashboard * Full API access * Priority request queue Subscribe Now [code] features = [ "Unlimited users", "24/7 priority support", "Custom branding options", "Advanced analytics dashboard", "Full API access", "Priority request queue" ] def PricingCard(plan, price, features): "Create a polished pricing card with consistent styling" return Card( DivVStacked( # Center and veritcally stack the plan name and price H2(plan), H3(price, cls='text-primary'), P('per month',cls=TextT.muted), cls='space-y-1'), # DivHStacked makes green check and feature Li show up on same row instead of newline Ul(*[DivHStacked(UkIcon('check', cls='text-green-500 mr-2'), Li(feature)) for feature in features], cls='space-y-4'), Button("Subscribe Now", cls=(ButtonT.primary, 'w-full'))) DivVStacked(PricingCard("Pro Plan", "$99", features)) [/code] ## Footer Or you can combine things to make advanced footers that have titles, organized links, and icons! In this example we add another flex helper function, `DivFullySpaced`. `DivFullySpaced` is a flex class that puts as much space between items as possible See Source See Output ### Company Name * * * #### Company AboutBlogCareersPress Kit #### Resources DocumentationHelp CenterStatusContact Sales #### Legal Terms of ServicePrivacy PolicyCookie SettingsAccessibility * * * © 2024 Company Name. All rights reserved. [code] def FooterLinkGroup(title, links): # DivVStacked centers and makes title and each link stack vertically return DivVStacked( H4(title), *[A(text, href=f"#{text.lower().replace(' ', '-')}", cls=TextT.muted) for text in links]) company = ["About", "Blog", "Careers", "Press Kit"] resource = ["Documentation", "Help Center", "Status", "Contact Sales"] legal = ["Terms of Service", "Privacy Policy", "Cookie Settings", "Accessibility"] Container(cls='uk-background-muted py-12')(Div( # Company Name and social icons will be on the same row with as much sapce between as possible DivFullySpaced( H3("Company Name"), # DivHStacked makes the icons be on the same row in a group DivHStacked(*[UkIcon(icon, cls=TextT.lead) for icon in ['twitter', 'facebook', 'github', 'linkedin']])), DividerLine(), DivFullySpaced( # Each child will be spread out as much as possible based on number of children FooterLinkGroup("Company", company), FooterLinkGroup("Resources", resource), FooterLinkGroup("Legal", legal)), DividerLine(), P("© 2024 Company Name. All rights reserved.", cls=TextT.lead+TextT.sm), cls='space-y-8 p-8')) [/code] ## Dashboard See Source See Output ## Welcome back, Isaac! Here's what's happening with your projects today. Total Projects ### 12 +2.5% from last month Hours Logged ### 164 +12.3% from last month Tasks Complete ### 64% -4.1% from last month Team Velocity ### 23 +8.4% from last month ### Recent Activity Sarah Chen completed Project Alpha deployment 2h ago James Wilson commented on Project Beta 4h ago Maria Garcia uploaded new design files 6h ago Alex Kumar started Sprint Planning 8h ago [code] def StatsCard(label, value, change): color = 'green' if change[0] == '+' else 'red' return Card(DivVStacked( # Stacks vertically and centers all elements P(label, cls=TextPresets.muted_sm), H3(value), P(f"{change}% from last month", cls=f"text-{color}-600 text-sm"))) def RecentActivity(user, action, time): return DivHStacked( # Makes Avatar and text be on same row DiceBearAvatar(user, h=8, w=8), P(f"{user} {action}", cls="flex-1"), P(time, cls=TextPresets.muted_sm)) DivVStacked( # Centers the entire dashboard layout # Page header DivVStacked( # Stacks vertically and centers the title/subtitle H2("Welcome back, Isaac!"), P("Here's what's happening with your projects today.",cls=TextT.muted)), # DivHStacked puts all the stats cards on the same row DivHStacked(*(StatsCard(label, value, change) for label, value, change in [ ("Total Projects", "12", "+2.5"), ("Hours Logged", "164", "+12.3"), ("Tasks Complete", "64%", "-4.1"), ("Team Velocity", "23", "+8.4")] )), # Recent activity Card(*(RecentActivity(user, action, time) for user, action, time in [ ("Sarah Chen", "completed Project Alpha deployment", "2h ago"), ("James Wilson", "commented on Project Beta", "4h ago"), ("Maria Garcia", "uploaded new design files", "6h ago"), ("Alex Kumar", "started Sprint Planning", "8h ago")]), header=H3("Recent Activity"), ), cls="space-y-6" ) [/code] ## Columns Columns are a great for sections that have a lot of text. See Source See Output # Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor. [code] Container( H1("Lorem Ipsum", cls="text-center mb-8"), # Use 2 columns for the main content Div(cls="columns-2 gap-12")( P("""Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."""), DivCentered(cls='mt-8')( P("""Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.""", cls=(TextT.lg, TextT.bold, TextT.center, TextT.italic, "text-primary"))), P("""Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."""), P("""Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor."""))) [/code] # Padding & Margin & Spacing, Oh my! (MonsterUI Spacing Guide) This guide will cover some essentials about how to properly space apps and what the differences are between: * Padding * Margin * Spacing * Gap Manipulating the space between components can make a huge difference to the percieved quality of the page. Being able to tweak the spacing can have a big impact! > Tip: I find it works best to get everything on the page without adjusting spacing much, and adjusting spacing at the end. ## Abreviations: First a few abbreviations that are helpful to know with tailwind (and a convention we follow in `MonsterUI`). * `t`, `b`, `l`, `r` = top, bottom, left, right * `p`, `m` = padding, margin * `x`, `y` = horizontal, vertical That means: * `mt` means margin on top of the element * `px` means padding on the x axis (both left and right) * `space-y` means apply spacing on the y axis (both top and bottom) ## Padding vs Margin Margin applies space to the left of the component, and padding applies space on the left inside of the component. Please reference the example with cards below: * `ml-20` applies space to the left of the card (outside the card) * `pl-20` applies space on the left inside of the card (inside the card) This means that if you want to move the whole thing but keep the actual container unchanged, use margin. If you want to change the container by adding space inside of it, use padding. See Source See Output #### A Simple Card with ml-20 #### A Simple Card with pl-20 [code] Grid( Card(H4("A Simple Card with ml-20",style='background-color: red'), cls='ml-20'), Card(H4("A Simple Card with pl-20", style='background-color: red'), cls='pl-20')) [/code] ## Space vs gap Spacing and gap are both about setting the space between components. * Spacing applies margin to every element except for the first element in a group. * Gap creates a gap between every element in flexbox elements and grids. > Rule of thumb: Use Gap when using grids. Let's take a look at some grid examples. #### Grid See Source See Output #### A Simple Card #### A Simple Card #### A Simple Card #### A Simple Card #### A Simple Card #### A Simple Card [code] Grid( Card(H4("A Simple Card")), Card(H4("A Simple Card")), Card(H4("A Simple Card")), Card(H4("A Simple Card")), Card(H4("A Simple Card")), Card(H4("A Simple Card")), cls='') [/code] #### Grid with gap See Source See Output #### A Simple Card #### A Simple Card #### A Simple Card #### A Simple Card #### A Simple Card #### A Simple Card [code] Grid( Card(H4("A Simple Card")), Card(H4("A Simple Card")), Card(H4("A Simple Card")), Card(H4("A Simple Card")), Card(H4("A Simple Card")), Card(H4("A Simple Card")), cls='gap-4') [/code] #### Grid with space See Source See Output #### A Simple Card #### A Simple Card #### A Simple Card #### A Simple Card #### A Simple Card #### A Simple Card [code] Grid( Card(H4("A Simple Card")), Card(H4("A Simple Card")), Card(H4("A Simple Card")), Card(H4("A Simple Card")), Card(H4("A Simple Card")), Card(H4("A Simple Card")), cls='space-x-4 space-y-4') [/code] ### Grid with no gap or space The first example has no gap or not space applied. As expected this means the cards are flush with each other. Often this is not what you want, because a little space between cards looks much nicer. ### Grid with gap The second example has the same grid but with gap applied. As youc an see, this gives constent space between all elements of the grid looks great! ### Grid with space The third example has the same grid but with space applied. As you can see, it's not really what we want. However it's a really good illustration of how space works so let's notice a few things about it: **X Axis** * The first card is flush with the left side of the page (no margin) * The card below it isn't flush with the left side of the page (has margin) **Y Axis** * The first card is flush with the heading immediately above it (no margin) * The card top it's right isn't flush with the heading above it (has margin) So `space` applies margin to every element except for the first element in a group! > Tip: Use your browser developer tools to inspect the examples Next, let's look at a form example where `gap` isn't a good choice but `space` works beautifully! See Source See Output ### My Form Name Phone Email [code] Form(DivCentered(H3("My Form")), LabelInput("Name"), Grid(LabelInput("Phone"), LabelInput("Email"), cols=2), cls='') [/code] See Source See Output ### My Form with gap Name Phone Email [code] Form(DivCentered(H3("My Form with gap")), LabelInput("Name"), Grid(LabelInput("Phone"), LabelInput("Email"), cols=2), cls='gap-y-5') [/code] See Source See Output ### My Form with Spacing Name Phone Email [code] Form(DivCentered(H3("My Form with Spacing")), LabelInput("Name"), Grid(LabelInput("Phone"), LabelInput("Email"), cols=2), cls='space-y-5') [/code] ### Form with no gap or space The top form looks a bit scrunched with defaults, but it's certainly passable. There is a bit of a space between the label and it's associated input because of the defaults in MonsterUI. ### Form with gap The second form with gap is identical to the first. Because we're not in a flex element or a grid, it doesn't do anything at all! ### Form with space `Space-y-5` adds vertical space between each child which really spreads out the form for a nice aesthetic. If you recall from the grid example, it does not apply this margin to the first element - but in this situation (and many others) we do not want the spacing above the top element (heading) to be the same as the spacing between the form elements. > Tip: Use your browser developer tools to inspect the examples # Further reading For further reading, check out the Tailwind CSS guide, which other users have found to be a useful as an additional guide.