Headings

H1

H2

H3

H4

H5

H6

Buttons

Semantic Typography

EidosUI provides strong emphasis for important text, italic styling for emphasis, and small text for fine print. You can also use highlighted text to draw attention to specific words.

When working with technical content, you might reference variables or show inline code. For keyboard shortcuts, use Ctrl + C styling. Sample output looks like Hello, World!.

Design is not just what it looks like and feels like. Design is how it works.— Steve Jobs

Sometimes you need to show deleted text or use abbreviations like HTML. Meeting scheduled for 2024-01-15.

def hello_world():
    print('Hello from EidosUI!')
    return True

Tables

Table Tags

DataTable from Lists

DataTable from Dictionaries

Tabs

HTMX-Based Tabs

Tabs in EidosUI use HTMX for server-side state management. Click the tabs below to see them in action:

Each tab demonstrates different semantic HTML elements, loaded dynamically via HTMX.

Implementation Example

# Initialize tab container on your page
TabContainer(initial_tab_url="/tab/typography", target_id="demo-tabs")

# Server route for each tab
@app.get("/tab/typography")
def tab_typography():
    return Div(
        TabList(
            ("Typography", "/tab/typography"),
            ("Lists", "/tab/lists"),
            ("Code", "/tab/code"),
            selected=0,
            hx_target="#demo-tabs"
        ),
        TabPanel(
            # Tab content here
        )
    )

Forms

Text Inputs

Numeric and Date Inputs

Contact Inputs

Text Areas

Select Dropdowns

File Upload

Input States

Special Inputs

Form Layout Example

Lucide Icons