Atom (HtmlAtom)
The foundational building block for all HTML-based components. Provides base styling system, preset integration, and powerful component composition capabilities.
Import
HtmlAtom can render any HTML element using the as prop. By default, it renders a div.
Default div element
Section Title
Section content with semantic HTML
Code
<script lang="ts">
import { HtmlAtom } from '@svelte-atoms/core';
</script>
<HtmlAtom>Default div element</HtmlAtom>
<HtmlAtom as="button" class="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
Click me
</HtmlAtom>The base prop enables powerful component composition. You can use any component
as a base and add additional styling or behavior.
HtmlAtom provides lifecycle hooks for animations and transitions: enter, exit, animate, and initial.
Use the variants system to define reusable style combinations with type-safe props.
Code
<script lang="ts">
import { HtmlAtom, defineVariants } from '@svelte-atoms/core';
const variants = defineVariants({
variants: {
variant: {
primary: { class: 'bg-blue-500 text-white' },
secondary: { class: 'bg-gray-500 text-white' }
},
size: {
sm: { class: 'px-2 py-1 text-sm' },
md: { class: 'px-4 py-2' },
lg: { class: 'px-6 py-3 text-lg' }
}
}
});
</script>
<HtmlAtom
as="button"
variants={variants}
variant="primary"
size="md"
>
Styled Button
</HtmlAtom>HtmlAtom is perfect for building custom components with full TypeScript support and element-specific props.
Prop
Type
Default
Description
bond
Bond<BondStateProps, BondState<BondStateProps>, BondElements> | undefined
undefined
Bond
base
B | undefined
undefined
Base
preset
PresetModuleName | (string & {}) | undefined
''
Preset
variants
Variants | undefined
undefined
Variant definition or function to resolve variants
- VariantDefinition: Static variant config with base, variants, compoundVariants, defaultVariants
- Function: Dynamic function that receives bond and props, returns props (legacy)