Skip to Content
DocumentationAPI

API Reference

Core Composers

Animation Composer ($animation)

$animation
  .property(property, steps)  // Animate a specific property
  .duration(duration)         // Set animation duration
  .delay(delay)              // Set animation delay
  .easing(easing)            // Set animation timing function
  .fillMode(mode)            // Set animation fill mode
  .iterationCount(count)     // Set animation iteration count

Preset Animations

  • fadeIn - Fade in animation
  • fadeOut - Fade out animation
  • slideUpFromBottom(by) - Slide up from bottom
  • slideDownFromTop(by) - Slide down from top
  • slideLeftFromRight(by) - Slide left from right
  • slideRightFromLeft(by) - Slide right from left
  • zoomIn(scale) - Zoom in animation
  • zoomOut(scale) - Zoom out animation
  • spin - Continuous rotation animation
  • infinite - Make animation loop infinitely

Property Animations

  • rotate(angles) - Animate rotation
  • x(steps) - Animate X position
  • y(steps) - Animate Y position
  • scale(steps) - Animate scale
  • blur(steps) - Animate blur
  • opacity(steps) - Animate opacity

Color Composer ($color)

$color(color)
  .define(value)           // Define color configuration
  .color(value)           // Set color value
  .opacity(value)         // Set opacity
  .outputType(value)      // Set output type (inline/background/color/border/outline/fill)

Color Modifiers

  • secondary - Use secondary color
  • tertiary - Use tertiary color
  • transparent - Make color transparent
  • interactive - Enable interactive states
  • hover - Apply hover state
  • active - Apply active state
  • muted - Apply muted state
  • highlight(ratio) - Adjust color brightness
  • foreground - Use as foreground color

Output Types

  • asBg - Use as background
  • asColor - Use as text color
  • asBorder - Use as border color
  • asOutline - Use as outline color
  • asFill - Use as fill color
  • withBorder - Add border

Common Composer ($common)

Layout

  • width(width) - Set width
  • height(height) - Set height
  • size(size) - Set both width and height
  • fullWidth - Set width to 100%
  • fullHeight - Set height to 100%
  • square - Make element square
  • circle - Make element circular
  • aspectRatio(ratio) - Set aspect ratio

Positioning

  • relative - Set position relative
  • absolute - Set position absolute
  • fixed - Set position fixed
  • z(z) - Set z-index
  • left(left) - Set left position
  • right(right) - Set right position
  • top(top) - Set top position
  • bottom(bottom) - Set bottom position
  • inset(inset) - Set all positions

Spacing

  • p(value) - Set padding on all sides
  • px(value) - Set horizontal padding
  • py(value) - Set vertical padding
  • pt(value) - Set top padding
  • pb(value) - Set bottom padding
  • pl(value) - Set left padding
  • pr(value) - Set right padding
  • m(value) - Set margin on all sides
  • mx(value) - Set horizontal margin
  • my(value) - Set vertical margin
  • mt(value) - Set top margin
  • mb(value) - Set bottom margin
  • ml(value) - Set left margin
  • mr(value) - Set right margin

Other

  • disabled - Apply disabled state
  • round - Add border radius
  • notSelectable - Prevent text selection
  • cursor(cursor) - Set cursor style
  • overflowHidden - Hide overflow
  • lineClamp(lines) - Limit text to number of lines

Flex Composer ($flex)

$flex
  .direction(direction)     // Set flex direction
  .wrap(wrap)              // Set flex wrap
  .justify(justify)        // Set justify content
  .align(align)            // Set align items
  .gap(gap)                // Set gap between items
  .order(order)            // Set order
  .grow(grow)              // Set flex grow
  .shrink(shrink)          // Set flex shrink
  .basis(basis)            // Set flex basis

Direction

  • row - Set flex direction to row
  • column - Set flex direction to column
  • horizontal - Alias for row
  • vertical - Alias for column
  • x - Alias for row
  • y - Alias for column
  • reverse - Reverse flex direction

Alignment

  • alignCenter - Center items vertically
  • alignStart - Align items to start
  • alignEnd - Align items to end
  • alignStretch - Stretch items vertically
  • alignBaseline - Align items to baseline

Justification

  • justifyCenter - Center items horizontally
  • justifyStart - Justify items to start
  • justifyEnd - Justify items to end
  • justifyBetween - Space items between
  • justifyAround - Space items around
  • justifyEvenly - Space items evenly

Other

  • center - Center items both vertically and horizontally
  • wrap - Enable flex wrap
  • inline - Make flex container inline

Font Composer ($font)

$font
  .family(family)          // Set font family
  .size(size)             // Set font size
  .weight(weight)         // Set font weight
  .style(style)           // Set font style
  .lineHeight(height)     // Set line height
  .letterSpacing(spacing) // Set letter spacing
  .align(align)           // Set text align
  .decoration(decoration) // Set text decoration
  .transform(transform)   // Set text transform
  .whitespace(whitespace) // Set whitespace handling

Line Height

  • copyLineHeight - Set line height for copy text
  • headingLineHeight - Set line height for headings
  • balance - Balance text lines
  • resetLineHeight - Reset line height

Text Transform

  • uppercase - Transform text to uppercase
  • lowercase - Transform text to lowercase
  • capitalize - Capitalize text

Text Decoration

  • underline - Add underline

Text Alignment

  • left - Align text left
  • center - Align text center
  • right - Align text right

Font Weight

  • w100 through w900 - Set font weight (100-900)
  • normal - Set normal font weight

Other

  • ellipsis - Add text ellipsis
  • nowrap - Prevent text wrapping
  • antialiased - Enable font smoothing
  • secondary - Use secondary font
  • tertiary - Use tertiary font

Grid Composer ($grid)

$grid
  .template(template)      // Set grid template
  .columns(columns)       // Set grid columns
  .rows(rows)            // Set grid rows
  .gap(gap)              // Set grid gap
  .area(area)            // Set grid area
  .column(column)        // Set grid column
  .row(row)              // Set grid row
  .start(start)          // Set grid start
  .end(end)              // Set grid end
  .span(span)            // Set grid span

Alignment

  • alignItemsCenter - Center items vertically
  • alignItemsStart - Align items to start
  • alignItemsEnd - Align items to end
  • alignItemsStretch - Stretch items vertically

Justification

  • justifyItemsCenter - Center items horizontally
  • justifyItemsStart - Justify items to start
  • justifyItemsEnd - Justify items to end
  • justifyItemsStretch - Stretch items horizontally

Content Alignment

  • alignContentCenter - Center content
  • alignContentStart - Align content to start
  • alignContentEnd - Align content to end
  • alignContentStretch - Stretch content
  • alignContentBetween - Space content between
  • alignContentAround - Space content around
  • alignContentEvenly - Space content evenly

Flow

  • flowRow - Set grid auto-flow to row
  • flowColumn - Set grid auto-flow to column
  • flowRowDense - Set grid auto-flow to row dense
  • flowColumnDense - Set grid auto-flow to column dense

Other

  • center - Center grid items
  • inline - Make grid container inline

Shadow Composer ($shadow)

$shadow
  .define(value)          // Define shadow configuration
  .color(color)          // Set shadow color
  .blur(blur)            // Set shadow blur
  .spread(spread)        // Set shadow spread
  .offset(offset)        // Set shadow offset
  .inset(value)          // Set shadow inset
  .opacity(value)        // Set shadow opacity

Size Composer ($size)

$size
  .base(value)           // Set base size
  .rem(value)           // Set size in rem units
  .level(level)         // Set size level
  .px(value)            // Set size in pixels
  .em(value)            // Set size in em units

Size Properties

  • width - Set width
  • height - Set height
  • size - Set both width and height
  • minSize - Set minimum size
  • maxSize - Set maximum size
  • minWidth - Set minimum width
  • maxWidth - Set maximum width
  • minHeight - Set minimum height
  • maxHeight - Set maximum height

Spacing Properties

  • marginX - Set horizontal margin
  • marginY - Set vertical margin
  • marginTop - Set top margin
  • marginBottom - Set bottom margin
  • marginLeft - Set left margin
  • marginRight - Set right margin
  • margin - Set all margins
  • paddingX - Set horizontal padding
  • paddingY - Set vertical padding
  • paddingTop - Set top padding
  • paddingBottom - Set bottom padding
  • paddingLeft - Set left padding
  • paddingRight - Set right padding
  • padding - Set all padding
  • gap - Set gap

Transform Properties

  • transformX - Set X transform
  • transformY - Set Y transform
  • transformXY - Set both X and Y transform

Surface Composer ($surface)

$surface(config)
  .padding(padding)      // Set padding
  .radius(radius)       // Set border radius
  .shadow(shadow)       // Set box shadow

Properties

  • padding - Set padding
  • paddingX - Set horizontal padding
  • paddingY - Set vertical padding
  • radius - Set border radius
  • height - Set height
  • width - Set width
  • circle - Make surface circular
  • size - Set both width and height

Padding Removal

  • noPT - Remove top padding
  • noPB - Remove bottom padding
  • noPL - Remove left padding
  • noPR - Remove right padding

Transition Composer ($transition)

$transition
  .property(property)    // Set transition property
  .duration(duration)    // Set transition duration
  .delay(delay)         // Set transition delay
  .easing(easing)       // Set transition timing function

Preset Transitions

  • slowRelease - Slow release transition
  • all - Transition all properties
  • colors - Transition color properties
  • common - Common transition properties

Theme System

Theme Creation

createTheme<T extends ComposableThemeInputObject>(themeInput: T): ComposableTheme<T>

Theme Variants

createThemeVariant<T extends ComposableThemeInputObject>(
  sourceTheme: ComposableTheme<T>,
  variantInput: ThemeVariantInputObject<T>
): ThemeVariant<T>

Theme Composition

composeThemeVariants<T extends ComposableThemeInputObject>(
  sourceTheme: ComposableTheme<T>,
  variants: ThemeVariant<T>[]
): ThemeVariant<T>

Themed Values

createThemedValue<V extends ThemedValueInput>(
  path: string,
  defaultValue: V
): ThemedValue<V>

Utility Functions

Style Resolution

resolveStylesInput(styles?: StylesInput): Array<AnyStyledComposer>

Theme Hooks

useThemeValue<T>(themedValue: ThemedValueGetter<T>): T

Built-in Components

The library provides a comprehensive set of styled HTML and SVG components through the UI export:

import { UI } from 'stylings'
 
// HTML Elements
<UI.div>...</UI.div>
<UI.button>...</UI.button>
<UI.input />
<UI.form>...</UI.form>
 
// SVG Elements
<UI.svg>...</UI.svg>
<UI.path />
<UI.circle />

All components support the following props:

  • as - Change the underlying HTML element
  • styles - Apply styles using composers
Last updated on
ConventionsPerformance