The Simple Svelte Component Library that uses css variables & container queries to make your life easier.
Presenting the simple components you would expect to see in any modern component library.
Using svelte components is easy and supports a number of intuitive properties, such as:
Our shorthand properties like bg and fg are just syntactic sugar for CSS
variables scoped to components, like --card-bg and
--button-width.
Because we use CSS variables, you can inject variables wherever you like in your component heirarchy, as in this nav bar with custom buttons:
We use container queries out of the box. This "Card" has a sidebar, for example, but because the card is small, the sidebar will be in the "expander" mode, regardless of the screen size.
We use modern CSS features like filter and
transform
to handle affordances, so changing color schemes should be a snap and only
require changing a single value.
We also use features like <dialog>
and the
<Tooltip>
and <DropdownMenu>
as well as with a custom
<Select><Tooltip>
and <DropdownMenu>
as well as with a custom
<Select>Start by installing our library:
Once you have that, you will need to make sure to import our styles somewhere in your project, such as at the top level, in order to define the CSS variables we depend on. You can also select a theme or set of themes if you like.
Now you're ready to import and use our components anywhere you like in the project.
We use CSS variables wherever possible, so if you want to change up things like colors at a component level, you can simply inject the appropriate CSS variables into the component's style tag.