UI Kit & Components
A comprehensive gallery of all built-in components available in Minima+.
This page showcases all the UI components provided by the Minima+ theme. These components are designed to be highly configurable, accessible, and responsive.
Buttons
Primary and secondary buttons with various sizes.
Primary
Primary Button </a>
{% include components/button.html text="Primary Button" link="#" style="primary" %}
Outline
Outline Button </a>
{% include components/button.html text="Outline Button" link="#" style="outline" %}
Sizes
Small </a>
Default </a>
Large </a>
{% include components/button.html text="Small" link="#" style="primary" size="sm" %}
{% include components/button.html text="Default" link="#" style="primary" %}
{% include components/button.html text="Large" link="#" style="primary" size="lg" %}
Alerts
Use alerts to provide feedback or call attention to important information.
Information
This is an informative message for the user.
Success
Your action has been completed successfully.
Warning
Please be careful with this action.
Error
Something went wrong. Please try again.
{% include components/alert.html type="info" title="Info" content="..." %}
{% include components/alert.html type="success" title="Success" content="..." %}
{% include components/alert.html type="warning" title="Warning" content="..." %}
{% include components/alert.html type="danger" title="Error" content="..." %}
Cards
Cards are versatile containers for content, often used in grids.
Feature Card
This is a standard feature card with an icon.
Link Card
Cards can also act as links to other pages.
{% include components/card.html title="Card Title" description="..." icon="..." link="..." %}
Tabs
Organize content into tabbed views.
```liquid
{% include components/tabs.html id="example-tabs" tabs="Tab 1:Content 1,Tab 2:Content 2" %}
```
## Accordion
Collapsible content sections, perfect for FAQs.
```liquid
{% assign items = "Q1:A1,Q2:A2" | split: "," %}
{% include components/accordion.html items=items id="my-accordion" %}
```
## Code Tabs
Specialized tabs for showing code in multiple languages or package managers.
```liquid
{% include components/code-tabs.html id="example" %}
```liquid
{% include components/stats-counter.html stats="100:Users,50:Cities" %}
```
## API Endpoint
Document REST API endpoints with a clean interface.
```liquid
{% include components/endpoint.html method="POST" path="/api/v1/users" description="..." ... %}
```
## Mermaid Diagrams
Render complex diagrams using a simple text-based syntax.
npm install @esegments/minima-plus
yarn add @esegments/minima-plus
pnpm add @esegments/minima-plus
...
...
{% include components/code-tabs.html id="example" end=true %}
```
## Stats Counter
Animated counters for displaying impressive numbers.
10K+ Downloads
500+ Stars
POST
/api/v1/users
Auth Required
Create a new user account.
Parameters
| Name | Type | In | Description |
|---|---|---|---|
|
string
|
query |
Request Body
"{\"name\": \"John Doe\", \"email\": \"john@example.com\"}"Responses
graph TD
A[Start] --> B{Is it working?}
B -- Yes --> C[Great!]
B -- No --> D[Fix it]
D --> B
```markdown
graph TD
A[Start] --> B{Is it working?}
...
```
*Note: Set `mermaid: true` in your page front matter to enable this.*