Pyxie Components Guide

Learn how to create and organize interactive components using FastHTML in Pyxie.

UI Components

Here are some examples of reusable UI components you can add to your markdown:

Alert Messages

Alerts help draw attention to important information. They come in different styles and can include icons for better visual hierarchy:

The alerts above use DaisyUI's alert component combined with Lucide icons. You can customize their appearance using different color schemes like alert-info, alert-success, alert-warning, or alert-error.

Call to Action

Call to action components help guide users towards important actions. They work best when placed strategically within your content:

Notice how the call to action uses a contrasting background (bg-base-200) to stand out from the regular content. This is just one way to style these components - you can adjust the colors, padding, and border radius to match your design.

Interactive Elements

While static content is great for documentation, interactive elements can make your content more engaging and help users better understand complex topics.

Expandable Section

Expandable sections are perfect for progressive disclosure - showing additional details only when users need them:

The expandable section above uses DaisyUI's collapse component with a smooth animation. It's great for:

• Hiding lengthy explanations
• Organizing FAQs
• Showing code examples
• Revealing additional details

DaisyUI Button Variants

Buttons are fundamental to any interface. DaisyUI provides several button styles that you can mix and match:

Each button variant serves a different purpose:

• btn-primary for main actions
• btn-secondary for alternative actions
• btn-accent for special emphasis
• btn-ghost for subtle actions
• btn-link for navigation-style buttons

Data Input Components

Forms are essential for collecting user input.

Contact Form Example

Here's a basic contact form that demonstrates proper form structure and styling:

The form above uses Fieldset to group related inputs, which helps with:

• Semantic HTML structure
• Improved accessibility
• Visual organization
• Logical grouping of form elements

Login Form Example

For a more focused data entry experience, you might want a compact form like this login example:

This login form demonstrates several best practices:

• Clear visual hierarchy with proper spacing
• Appropriate input types for different data
• Consistent styling with the rest of the UI
• Compact layout for focused tasks

Remember that all these components can be customized further using DaisyUI's utility classes and color schemes. You can adjust sizes, colors, spacing, and more to match your site's design language.