Exo - Astro Components Library

A tree-shakeable collection of Astro components published as a single npm package.

🚀 Project Structure

``text
/
├── src/
│ └── components/
│ ├── toggle-group/
│ │ └── ToggleGroup.astro
│ ├── tree/
│ │ └── Tree.astro
│ └── typography/
│ └── Typography.astro
├── package.json
├── tsconfig.json
└── README.md
`

📦 Installation

`sh
npm install exo-ds
`

🎯 Usage

The package is tree-shakeable, so you can import only the components you need:

$3

`astro
---
import ToggleGroup from 'exo-ds/toggle-group';
---


`

$3

`astro
---
import Typography from 'exo-ds/typography';
---

Heading 1
Heading 2
Paragraph text
`

$3

`astro
---
import Tree from 'exo-ds/tree';
---

name: "project",
type: "folder",
open: true,
children: [
{
name: "src",
type: "folder",
children: [
{ name: "index.ts", type: "file" },
{ name: "utils.ts", type: "file" }
]
},
{ name: "package.json", type: "file" }
]
}} />
`

🧞 Commands

| Command | Action |
| :------------ | :------------------------- |
| npm install | Install all dependencies |
| npm publish | Publish the package to npm |

📝 Publishing

To publish the package:

1. Update the version in package.json if needed
2. Run npm publish

🔧 Development

The package uses Astro components and TypeScript. All components are located in src/components/ and can be imported individually for optimal tree-shaking.

📦 Available Components

- ToggleGroup - Toggle group component (exo-ds/toggle-group)
- Typography - Semantic HTML typography elements (exo-ds/typography)
- Variants: h1, h2, h3, h4, h5, h6, p
- Tree - File/folder tree structure with collapsible folders (exo-ds/tree`)
- Accepts JSON data structure
- Supports icons and collapsible/non-collapsible modes