Adding new sections

Although it’s not required, you can create folders for new sections.

To show the section on the left side navigation, add it to the navigation config file at src/common/config.ts.

Example:

    type Chapter = {
        text: string;
        slug: string;
    };
    type Menu = {
        text: string;
        link: string;
        chapters?: Chapter[];
    };
    type MenuMap = Map<string, Menu>;

    type SidebarSection = {
        header: string;
        menu: MenuMap;
    };

    export const SIDEBAR: SidebarSection[] = [
        {
            header: "Core",
            menu: new Map<string, Menu>([
                [
                    "core/introduction",
                    { text: "Introduction", link: "/core/introduction" },
                ],
                ["core/colors", { text: "Colors", link: "/core/colors" }],
                ["core/typography", { text: "Typography", link: "/core/typography" }],
                ["core/shadows", { text: "Shadows", link: "/core/shadows" }],
            ]),
        },
        {
            header: "Components",
            menu: new Map<string, Menu>([
                [
                    "components/accordions",
                    { text: "Accordions", link: "/components/accordions" },
                ],
                ["components/alerts", { text: "Alerts", link: "/components/alerts" }],
                ["components/badges", { text: "Badges", link: "/components/badges" }],
                [
                    "components/buttons",
                    {
                    text: "Buttons",
                    link: "/components/buttons",
                    chapters: [
                        { text: "Overview", slug: "overview" },
                        ...
                    ],
                    },
                ],
                ["components/inputs", { text: "Inputs", link: "/components/inputs" }],
                ["components/table", { text: "Table", link: "/components/table" }],
            ]),
        },
        {
            header: "Patterns",
            menu: new Map<string, Menu>([
                [
                    "patterns/introduction",
                    { text: "Introduction", link: "/patterns/introduction" },
                ],
            ]),
        },
    ];

Adding new pages

To add new pages just create an .astro or markdown file in src/pages/[section]/my-page.md(x). Remember to add it to the navigation config in src/config.ts so it shows up in the left side navigation.

You’re free to organize the pages however you want.

Customizing Core section (colors, typography, shadows…)

If you want to customize the default colors, typography or shadows you can find the configuration file at src/common/design.config.ts.

Feel free to add new pages to the Core section

Customizing the page layout

You can find the css for the pages in src/styles/index.css.

Adding your components

Astro is great for design systems because it allows you to import components from different frameworks like react, vue or svelte.

To get started check how the Button component is used in the src/pages/buttons/index.mdx file.

You can import your component library or create your own and document it easily.

.component-preview utility

There’s a class called .component-preview that you can use to wrap your component in a grid, and it will look like this:

Have fun!

Astro Design System template was made by @jordienr for personal and commercial use.