Ui/Ux Programming Tutorials, Guides & Best Practices

npx shadcn-ui@latest add theme

npx shadcn-ui@latest add [component] --overwrite

var options = {
    chart: {
        type: 'area'
    },
    series: [{
        name: 'Visitors',
        data: [31, 40, 28, 51, 42, 109, 100]
    }],
    xaxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
    },
    title: {
        text: 'Website Visitors',
        align: 'center'
    }
}

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

ApexCharts are responsive by default, but you can further customize how charts behave on different screen sizes.

Emotion is a performant and flexible CSS-in-JS library that provides both styled and traditional CSS approaches.

• Very fast and lightweight.
• Flexible API that supports multiple styling methods.
• Excellent TypeScript support.

No preview available for this content.

• Clean, modern look following Material Design.
• Easy to use for rapid prototyping.

• Less flexible than Tailwind CSS.
• Heavier, may impact performance.