CMS Dashboard Component for Svelte

Quickly setup a dashboard for your CMS in your Svelte application with the help of this <Dashboard /> component. This package comes with several smaller components that can be used in conjuntion or without the <Dashboard /> component, such as:

• <Card>: Define well-separated sections of your page with the help of <Card> components.
• <Analytics>: This component integrates ChartJS to display custom charts on the dashboard. Pass your data and let the component handle everything else for you.
• <Tile>: Reusable tiles with icons for an improved user experience.
• <Overview>: Generate an overview based on arbitrary data. Define your legends, colors, and let the component visualize sections of your data.
• <Chips>: Display tags in a list with an add and remove callback functions.
• <Sidebar>: Define your links for your collapsible sidebar using this component.

You can configure how the dashboard is displayed by defining the following props and subcomponents inside the <Dashboard /> component:

// Define your components inside cards
<Card title="Pageviews" subTitle="Last 30 days">
    <Analytics
        data={[{
            label: 'October 32',
            count: 837,
        }, { ... }]}
        buttonLabel="View analytics"
        buttonLink="/analytics"
        title="Total pageviews"
    />
</Card>

<Card title="Manage content">
    <Tile
        icon="edit"
        iconType="success"
        title="Publish a post"
        subTitle="Build your audience"
        link="/posts"
    />
</Card>

<Card title="SEO overview">
    <Overview
        type="posts"
        text="Get on overview of your posts performance"
        data={[{
            label: 'Underperforming',
            count: 50,
            color: '#E74C3C'
        }, { ... }]}
    />
</Card>

<Card title="Tags">
    <Chips
        items={['JS', 'CSS', 'HTML']}
        add={() => { ... }} // Pass your add callback functionality here
        remove={() => { ... }} // Pass your remove callback functionality here
    />
</Card>

This component comes with the following features:

• Configurable: Customize the appearance of your dashboard and components within through their props.
• Responsive design: The layout is fully responsive that adapts perfectly for all device resolutions like mobiles, tablets and desktops. A collapsible sidebar menu helps with keeping the main content in focus.
• Easy to style: Styles can be configured via Sass variables through the stylesheet provided with the component, making it easy to change your color theme, font sizes, or spacing.
• Cross-browser compatible: The component was tested on major browsers (Chrome, Firefox, Edge) to ensure cross-browser compatibility.