Circum-Components Svelte Themes

Circum Components

Minimalist component library with accessibility in mind.

Circum Components

This project is brand new. Come back later!

Components

  • Button
  • Dropdown menu
  • Text Input
  • Search input
  • Number input
  • Text area
  • Banner
  • Breadcrumb
  • Checkbox
  • Radio button
  • Range slider
  • Link
  • Toggle/ Switch
  • Tile
  • Tag
  • Grid

CSS Variables

You need to define those variables in one of your css file or you can import global.css in your +layout.svelte to get our default style.

.light-theme {
    --primary: #384abe;
    --secondary: #384abe;
    --black: #000000;
    --white: #ffffff;
    --radius-0_5: 0.5rem;
    --radius-1: 1rem;
    --radius-2: 2rem;
    --font: 'Inter';
    --disabled: #7e7e7e;
    --primary-text-color: #ffffff;
    --secondary-text-color: #000000;
}

.dark-theme {
    --primary: #384abe;
    --secondary: #384abe;
    --black: #000000;
    --white: #ffffff;
    --gray-100: #0b0c0c;
    --gray-90: #18181c;
    --gray-80: #292930;
    --radius-0_5: 0.5rem;
    --radius-1: 1rem;
    --radius-2: 2rem;
    --font: 'Inter';
    --disabled: #7e7e7e;
    --primary-text-color: #ffffff;
    --secondary-text-color: #000000;
}

Top categories

Loading Svelte Themes