1. Typography & Content Blocks

Basic Formatting

Code:

**Bold Text**
*Italic Text*
<u>Underline</u>
~~Strikethrough~~
`Inline Code`

Result:

• Bold Text
• Italic Text
• Underline
• Strikethrough
• Inline Code

Custom Text Styling (<Text>)

Use the <Text> component to apply inline Tailwind classes.

Code:

<Text className="text-blue-600 font-bold">Blue Bold Text</Text>
<Text className="bg-yellow-200 text-yellow-900 px-1 rounded">Highlight</Text>
<Text className="bg-green-100 text-green-700 px-2 py-0.5 rounded-full text-xs font-bold uppercase border border-green-200">Status Badge</Text>

Result:

• Blue Bold Text
• Highlight
• Status Badge

Sections & Blocks (<Section>)

Use ! to force text colors inside the block.

Code:

<Section className="!text-purple-900 bg-purple-50 border-l-4 border-purple-500 p-4 my-4 rounded-r">
  **Info Block:** This section uses `bg-purple-50` and `border-l-4`.
  1. Even lists inside inherit the color.
  2. Because we used `!text-purple-900`.
</Section>

Result:

2. Links & Downloads

Standard & External Links

Code:

[Internal Link](/about)
[External Link](https://google.com)

Result:

• Internal Link
• External Link

Open in New Tab (+newTab)

Append +newTab to the URL to force it to open in a new window.

Code:

[Open in New Tab](/about+newTab)

Result:
Open in New Tab

Download Link (With Counter)

Use the format /download-page?id=ID to automatically trigger the counter.

Code:

[Download Syllabus](/download-page?id=1001)

Result:
Download Syllabus^..

Alignments

The reason text-justify isn't working is that your <Text> component renders an HTML <span> tag, which is an inline element by default. The CSS property text-align: justify (which text-justify applies) only works on block-level elements (like <div> or <p>).

justify

centre

right

left

BoxHeader

Default

Code:

<BoxHeader>Default BoxHeader</BoxHeader>

Result:

custom: (use !)

Code:

<BoxHeader className="!bg-blue-700">Default BoxHeader</BoxHeader>

Result:

3. Lists

Standard Ordered & Unordered

Code:

1. First Item
2. Second Item

* Bullet A
* Bullet B

Result:

1. 1.
   First Item
2. 2.
   Second Item

• Bullet A
• Bullet B

Loose but not loose list

One space will treat as normal list, but in case of two, it will treat as loose least

1. 1.
   item-1
2. 2.
   item-2
   Description
3. 3.
   item-3

Loose List (More Spacing)

Add blank lines between items.

Code:

1. **Step One**
   Description here.


2. **Step Two**
   Description here.

Result:

1. 1.

   Step One
   Description here.

2. 2.

   Step Two
   Description here.

Customized Markers (<List>)

Code:

<List marker="text-blue-600 font-bold">
1. Step One (Bold Blue)
2. Step Two (Bold Blue)
</List>

Result:

Custom Padding

Code:

<List className="pl-20">
1. This list has extra indentation (pl-20).
</List>

Result:

Nested Lists

Code:

1. Parent Item
    * Child Item
        * Grandchild
2. Parent Item 2

Result:

1. 1.
   Parent Item

   • Child Item
     • Grandchild
2. 2.
   Parent Item 2

4. Accordions

Default Accordion

Code:

<Accordion title="Expanded by Default">
  The content is immediately visible.
</Accordion>

Result:

Closed Accordion

Code:

<Accordion title="Click to Reveal" close>
  This content was hidden.
</Accordion>

Result:

Colored Header

Code:

<Accordion 
  title="Critical Warning" 
  close
  summaryClassName="!bg-red-600 hover:!bg-red-700 !text-white"
>
  Alert content here.
</Accordion>

Result:

Nested Accordion (Visual Hierarchy)

We use summaryClassName on the inner accordion to give it a distinct look from the parent.

Code:

<Accordion title="Outer (Default Dark)" close>
  This is the outer content.
  
  <Accordion 
    title="Inner (Light/Distinct)" 
    close 
    className="ml-4 mt-4"
    summaryClassName="!bg-slate-100 dark:!bg-slate-800 !text-slate-900 dark:!text-slate-200"
  >
    This is nested inside! It uses a lighter background to distinguish it from the parent.
  </Accordion>
</Accordion>

Result:

5. Images & Figures

Standard Image

Code:

![Placeholder Image](https://picsum.photos/id/15/800/400)

Result:
Placeholder Image

Custom Figure

Use <Figure> for styling and explicit captions.

Code:

<Figure 
  src="https://picsum.photos/id/28/800/400" 
  alt="Scenery"
  caption="Figure 1: Custom border and blue caption."
  imgClassName="border-4 border-blue-100 dark:border-slate-700 shadow-lg"
  captionClassName="text-blue-600 font-semibold not-italic"
  width="50%"
  align="center"
/>

Result:

Figure 1: Custom border and blue caption.

6. Buttons

Icons are provided by Lucide React. Available icons: download, external, arrow, chevron, file, play, info, alert, check.
You can use any icon name from the Lucide website. You can use kebab-case or PascalCase.

Variants

Code:

<ButtonGroup>
  <Button href="#">Primary</Button>
  <Button href="#" variant="secondary">Secondary</Button>
  <Button href="#" variant="outline">Outline</Button>
  <Button href="#" variant="ghost">Ghost</Button>
  <Button href="#" variant="danger">Danger</Button>
</ButtonGroup>

Result:

Sizes & Icons

Code:

<ButtonGroup>
  <Button href="#" size="sm" icon="play">Small Play</Button>
  <Button href="#" size="md" icon="info">Medium Info</Button>
  <Button href="#" size="lg" icon="arrow">Large Arrow</Button>
  <DownloadButton href="#">Download</DownloadButton>
</ButtonGroup>

Result:

Layouts (Vertical)

Code:

<ButtonGroup vertical>
  <Button href="#" className="w-full sm:w-auto">Option 1</Button>
  <Button href="#" variant="secondary" className="w-full sm:w-auto">Option 2</Button>
</ButtonGroup>

Result:

7. Tables

A. CSV Table (Easiest)

Code:

<CsvTable 
  caption="Class Routine" 
  data={`
    Time, Subject, Teacher
    10:00 AM, Anatomy, Dr. Smith
    11:00 AM, Physiology, Dr. Doe
  `} 
/>

Result:

B. Markdown Table (TableBox)

Code:

<TableBox caption="System Comparison">

| Feature | Basic | Pro |
| :--- | :---: | ---: |
| Users | 1 | Unlimited |
| Storage | 5GB | 1TB |

</TableBox>

Result:

8. Tailwind Reference

Common Utility Classes

Full Spacing Scale (Padding/Margin)

These values work for p (padding), m (margin), gap, h (height), w (width), etc.