Component Library
Interactive showcase of all UI components used throughout the Psilobase. Each component includes usage examples and code snippets.
Buttons
Interactive button styles for actions and navigation.
Primary Buttons
Secondary Buttons
<button class="btn btn--primary">Primary Button</button>
<button class="btn btn--secondary">Secondary Button</button>
<button class="btn btn--outline">Outline Button</button>
Cards
Versatile containers for content organization.
Basic Card
Card body content with text and other elements.
Featured Card
Highlighted card for special content.
<div class="card">
<div class="card__header">
<h3 class="card__title">Card Title</h3>
</div>
<div class="card__body">
<p>Card content...</p>
</div>
</div>
Alerts & Messages
Feedback messages for different states and actions.
<div class="alert alert--success">Success message</div>
<div class="alert alert--warning">Warning message</div>
<div class="alert alert--danger">Error message</div>
<div class="alert alert--info">Info message</div>
Form Elements
Input fields, selects, and form controls.
<div class="form-group">
<label for="input-id">Label</label>
<input type="text" id="input-id" class="form-control">
</div>
Badges & Tags
Labels for categories, status, and metadata.
<span class="badge badge--primary">Badge</span>
Tables
Data tables with responsive design.
| Species | Type | Potency | Status |
|---|---|---|---|
| Psilocybe cubensis | Psilocybin | Medium | Active |
| Amanita muscaria | Muscimol | Variable | Caution |
| Pleurotus ostreatus | Culinary | None | Edible |
<table class="data-table">
<thead>
<tr><th>Header</th></tr>
</thead>
<tbody>
<tr><td>Data</td></tr>
</tbody>
</table>
Tabs & Accordions
Collapsible content sections for organization.
Content for tab 1 goes here.
<div class="tabs">
<div class="tabs__header">
<button class="tabs__tab">Tab 1</button>
</div>
<div class="tabs__content">
<div class="tabs__panel">Content</div>
</div>
</div>
Progress Indicators
Visual progress feedback for loading and completion.
<div class="progress">
<div class="progress__bar" style="width: 50%"></div>
</div>
Navigation
Navigation patterns and breadcrumbs.
<nav class="breadcrumb">
<a href="#">Home</a>
<span>/</span>
<span>Page</span>
</nav>
Info Boxes
Highlighted content blocks for important information.
Primary Info Box
Important information highlighted in primary color.
Success Info Box
Positive information or confirmation messages.
Warning Info Box
Cautionary information that requires attention.
<div class="info-box info-box--primary">
<h3>Title</h3>
<p>Content...</p>
</div>
Usage Guidelines
Best Practices
- Use appropriate components for their intended purpose
- Maintain consistency in component usage across pages
- Follow accessibility guidelines (ARIA labels, keyboard navigation)
- Test components in both light and dark modes
- Ensure responsive behavior on all screen sizes
- Use semantic HTML elements when possible
Customization
All components support customization through CSS custom properties and modifier classes. See individual component documentation for specific customization options.