Core concepts
Hover, focus, and other states
Using variants to style elements on press, hover, focus, and more.
Press, hover, and focus
Prefix a class with a variant to apply it conditionally. Pressable, TouchableOpacity and TextInput track their own press, hover and focus state:
<Pressable className="rounded-full bg-violet-500 px-5 py-2 transition hover:bg-violet-600 active:scale-95 active:bg-violet-700">
<Text className="font-semibold text-white">Save changes</Text>
</Pressable>
<TextInput
placeholder="Focus me"
className="rounded-lg border border-gray-300 px-3 py-2 placeholder:text-gray-400 focus:border-sky-500 focus:ring-3 focus:ring-sky-500/20"
/>
hover: applies on pointer devices (web, iPad with a trackpad). On touch screens, use active: for press feedback.
Styling based on parent and sibling state
Groups
Mark a parent with group and style children with group-* variants. Groups can be named (group/item and group-hover/item:):
<Pressable className="group rounded-lg p-4 active:bg-sky-500">
<Text className="font-semibold text-gray-900 group-active:text-white">New project</Text>
<Text className="text-gray-500 group-active:text-white">Create a new project from a template.</Text>
</Pressable>
Peers
Mark a sibling with peer and use peer-* variants on the elements after it. On native a peer can be any sibling, not just a previous one.
Data and ARIA attributes
Props named data-* and aria-* drive data-[state=open]: and aria-checked: variants, which is how shadcn-style components are styled.
Supported variants
hover:, active:, focus:, focus-visible:, focus-within:
Pointer hover, press and focus state.
The disabled prop, aria-disabled, or editable={false}.
Parent, sibling and ancestor state.
Children written in JSX with matching data-*, aria-* or state.
first:, last:, odd:, even:, nth-*
Position among siblings (the parent must be an AstraWind component).
The element's data-* and aria-* props.
placeholderTextColor and selectionColor on TextInput.
dark:, motion-safe:, motion-reduce:
Color scheme and the OS reduce motion setting.
ios:, android:, web:, native:
The platform (AstraWind additions).