Tile

Chainable styling library for React. Built on top of Stitches.

Install

npm install tile-css

Usage Examples

User card (CodeSandbox):

import React from "react";
import { HStack, VStack, View, style } from "tile-css";

export function UserCard(props: {}) {
  return (
    <Container>
      <ProfilePhoto src="https://cldup.com/JuBBlQRbI1.jpg" />
      <User>
        <h1>Azer Koçulu</h1>
        Founder of Sway and Ray Labs.
      </User>
    </Container>
  );
}

const Container = HStack() // Horizontal stack
  .size(350)
  .space({ gap: 20, inner: 16, outer: 24 })
  .border(10, { color: "#eee" })
  .round(18, { rightBottom: 0 }) // disable round for right bottom
  .align({ y: "center" })
  .element();

const ProfilePhoto = View("img")
  .size(100, 100)
  .round("100%")
  .shadow()
  .element();

const User = VStack()
  .fg("#666")
  .sans(16, { leading: 1.25 })
  .select(
    "h1",
    style().margin(0).fg("#222").text(28, { weight: 700, tracking: -2 })
  )
  .element();

In addition to Frame, you can use HStack (orders items horizontally) and VStack (vertically) factory methods:

import { Frame, style } from 'tile-css';

const TestBox = Vstack("90vw", "90vh") // Vertically ordered items
  .align({ x: "center", y: "end" }) // align content to bottom center
  .scale(2.5) // Apply `scale` transform
  .border(10, { color: "blue" })
  .round(5) // Round by 5px
  .text(24) // font-size: 24px
  .mobile(style().padding(0)) // Set `padding` to 0, if user is on mobile
  .element();

export const App = () => {
  return (
    <TestBox>
      <div>Hello</div>
      <div>World</div>
    </TestBox>
  );
};

API

Accessibility

The Accessibility module in Tile provides methods for enhancing the accessibility of your React components. Currently, it focuses on text selection control.

import { View } from "tile-css"

const AccessibleQuote = View('blockquote')
  .selection({
    bg: 'rgba(0, 123, 255, 0.2)',
    fg: 'navy'
  })
  .element();

export const ImportantMessage = () => (
  <AccessibleQuote>
    This quote is selectable with custom highlight colors.
    It enhances readability and indicates that the text can be copied.
  </AccessibleQuote>
);

Methods:

• selection(options: SelectionOptions)

Alignment

Methods for controlling the alignment of content within flex and grid containers.

import { View } from "tile-css"

const Container = View('100%', '100vh')
  .align({ x: 'center', y: 'end' }) // align contents to bottom center
  .element();

export const AppLayout = () => (
  <ResponsiveLayout>
    <Header />
    <MainContent />
    <Footer />
  </ResponsiveLayout>
);

Methods:

• Frame(width?, height?, align?)
• VStack(elementTagOrOptions?, options?)
• HStack(elementTagOrOptions?, options?)
• center(options?: FlexOptions)
• align(options: AlignmentOptions)

Aspect

Set the aspect ratio of an element.

import { View } from "tile-css"

const SquareElement = View()
  .aspect(1)
  .bg("red")
  .element();

export const SquareDemo = () => (<SquareElement />)

Methods:

• aspect(ratio: number)

Backdrop

Apply backdrop filter effects to elements.

import { View } from "tile-css"

const FrostedGlassCard = View(300, 200)
  .backdrop({
    blur: 10,
    saturate: "180%",
    brightness: "105%"
  })
  .bg('rgba(255, 255, 255, 0.2)')
  .border(1, { color: 'rgba(255, 255, 255, 0.3)' })
  .round(15)
  .padding(20)
  .element();

export const GlassCard = ({ children }) => (
  <FrostedGlassCard>{children}</FrostedGlassCard>
);

Methods:

• backdrop(options?: BackdropOptions)

Border

Methods for applying and manipulating border styles in React components.

import { View } from "tile-css"

const FancyButton = View('button')
  .size(200, 50)
  .color({ fg: 'blue', bg: 'white' })
  .border(2, { color: 'blue' })
  .round({ x: 25, y: 10 })
  .onHover(
    style()
      .color({ bg: 'blue', fg: 'white' })
      .border(2, { color: 'white' })
  )
  .element();

export const CustomButton = ({ children }) => (
  <FancyButton>{children}</FancyButton>
);

Methods:

• border
• stroke
• round

Box

Methods for creating and manipulating layout containers. Use these functions to set dimensions, position elements, and control other box model properties in your React components.

import { View } from "tile-css"

const ResponsiveCard = View()
  .box({
    display: 'flex',
    flexDir: 'column',
    justify: 'center',
    items: 'center',

  })
  .element();

export const Card = ({ children }) => (
  <ResponsiveCard>{children}</ResponsiveCard>
);

Methods:

• Frame(width?, height?, align?)
• VStack(elementTagOrOptions?, options?)
• HStack(elementTagOrOptions?, options?)
• frame(options: BoxOptions)
• display(display: string, options?: BoxOptions)
• absolute(xOrOptions, y?, options?)
• position(x, y, options?)
• pin(xOrOptions, y?, options?)
• relative(options: BoxOptions)
• opacity(value: number | string)
• zIndex(value: number)
• content(value: string)
• box(options: BoxOptions)

Colors

Methods for applying color-related styles to React components.

import { View } from "tile-css"

const KittenButton = View('button')
  .fg("#ff0")
  .bg({
    url: 'https://placekitten.com/100x100.jpg',
    size: 'cover'
  })
  .element();

export const FancyButton = ({ children }) => (
  <KittenButton>{children}</KittenButton>
);

Methods:

• color(options: ColorOptions)
• fg(color: string)
• bg(options: BGOptions)
• placeholder(fg: string)
• fill(options: BGOptions)

Cursor

Methods for setting cursor styles in React components.

import { View, Cursor } from "tile-css"

const InteractiveElement = View()
  .size(100)
  .bg('lightblue')
  .cursor(Cursor.Pointer)
  .element();

export const CursorDemo = () => <InteractiveElement />;

Methods:

• cursor(value: Cursor | CursorOptions)

Flex

Methods for creating and manipulating flex layouts in React components.

Methods:

• VStack(elementTagOrOptions?, options?)
• HStack(elementTagOrOptions?, options?)
• flex(options: FlexOptions)
• hstack(options?: FlexOptions)
• vstack(options?: FlexOptions)
• center(options?: FlexOptions)
• flex(options: FlexOptions)

Grid

Methods for creating and manipulating grid layouts in React components.

Methods:

• Grid(options: GridOptions)
• columns(template: string | number, options?: GridOptions)
• rows(template: string | number, options?: GridOptions)
• grid(options: GridOptions)
• GridOptions

Outline

Methods for applying outline styles to React components.

Methods:

• outline(widthOrOptions, options?)
• OutlineOptions

Responsive

Methods for creating responsive and scalable layouts in React components.

const ResponsiveBox = View()
  .mobile(style().width('100%').bg('red'))
  .element();

Methods:

• geometry(options: MediaQueryOptions, styles: Chain | CSS)
• media(breakpoint: string, styles: Chain | CSS)
• mobile(styles: Chain | CSS)
• desktop(styles: Chain | CSS)
• portrait(styles: Chain | CSS)
• landscape(styles: Chain | CSS)
• Size Breakpoints
• Device Aliases
• Specific Device Aliases
• Orientation Aliases
• High-resolution Screens

Scroll

Methods for controlling scrolling behavior and customizing scrollbars in React components.

const VerticalScrollableBox = View()
  .scroll({ y: true }) // Enable vertical scrolling
  .size(300)
  .element();

Methods:

• ScrollView(options?: ScrollOptions)
• scroll(options: ScrollOptions)
• customScrollbar(options: CustomScrollbarOptions)
• overflow(value: boolean | OverflowValue | OverflowOptions)
• scroll(options: ScrollOptions)

Selectors

Methods for applying styles to various element states, pseudo-elements, and custom selectors in React components.

const HoverBox = View()
  .bg('blue')
  .onHover(style().bg('darkblue'))
  .element();

Methods:

• onHover(styles: Chain | CSS)
• onFocus(styles: Chain | CSS)
• onActive(styles: Chain | CSS)
• before(styles: Chain | CSS)
• after(styles: Chain | CSS)
• attr(styles: Chain | CSS, attributeName: string, options?: AttrSelectorOptions)

Shadow

Methods for applying box shadow styles to React components.

const LightShadowBox = View()
  .shadow()
  .size(200)
  .element();

Methods:

• shadow(options: ShadowOptions | number)

Size

Methods for setting dimensions of React components.

import { View } from "tile-css"

const ResponsiveSquare = View()
  .size(600, 300) // width: 600px, height: 300px
  .bg('lightblue')
  .element();

export const SquareDemo = () => <ResponsiveSquare />;

Methods:

• width(width, options?)
• height(height, options?)
• size(widthOrOptions, heightOrOptions?)

Spacing

Methods for applying spacing styles to React components.

import { View } from "tile-css"

const SpacedCard = View()
  .size(200)
  .padding({ x: 20, y: 15 }) // left, right: 20px -- top, bottom: 15px
  .margin(10, { right: 0 }) // 10px around, except right
  .element();

export const CardWithSpacing = ({ children }) => (
  <SpacedCard>{children}</SpacedCard>
);

Methods:

• margin(options: number | string | BoxSides, override?: BoxSides)
• padding(options: number | string | BoxSides, override?: BoxSides)

Text

Methods for applying text styles to React components.

const Info = View('p')
  .sans(16, {
    color: 'gray.800',
    weight: 500,
    leading: 1.6,
    tracking: '0.5px'
  })
  .element();

export const InfoSection = () => (
  <Info>
    This paragraph demonstrates responsive typography with hover effects.
  </Info>
);

Methods:

• text(sizeOrOptions: string | number | TextOptions, options?: TextOptions)
• sans(sizeOrOptions: string | number | TextOptions, options?: TextOptions)
• mono(sizeOrOptions: string | number | TextOptions, options?: TextOptions)
• serif(sizeOrOptions: string | number | TextOptions, options?: TextOptions)
• ellipsis()
• text(sizeOrOptions: string | number | TextOptions, options?: TextOptions)

Transform

Methods for applying CSS transforms to React components.

const Card = View('div')
  .scale(1.5) // zoom in by 1.5
  .rotate(90) // 90deg
  .translate(-25, -10) // x, y
  .element();

export const InteractiveCard = ({ children }) => (
  <Card>{children}</Card>
);

Methods:

• rotate(angle: string | number)
• scale(x: number, y?: number)
• translate(x: string | number, y?: string | number)
• skew(x: string | number, y?: string | number)
• transform(value: string)

Sponsor