Chainable styling library for React. Built on top of [Stitches](https://stitches.dev).
npm install tile-cssChainable styling library for React. Built on top of Stitches.
``bash`
npm install tile-css
User card (CodeSandbox):
`tsx
import React from "react";
import { HStack, VStack, View, style } from "tile-css";
export function UserCard(props: {}) {
return (
Azer Koçulu
Founder of Sway and Ray Labs.
);
}
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:
`tsx
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 transformpadding
.border(10, { color: "blue" })
.round(5) // Round by 5px
.text(24) // font-size: 24px
.mobile(style().padding(0)) // Set to 0, if user is on mobile
.element();
export const App = () => {
return (
Hello
World
);
};
`
The Accessibility module in Tile provides methods for enhancing the accessibility of your React components. Currently, it focuses on text selection control.
`ts
import { View } from "tile-css"
const AccessibleQuote = View('blockquote')
.selection({
bg: 'rgba(0, 123, 255, 0.2)',
fg: 'navy'
})
.element();
export const ImportantMessage = () => (
This quote is selectable with custom highlight colors.
It enhances readability and indicates that the text can be copied.
);
`
Methods:
* selection(options: SelectionOptions)
Methods for controlling the alignment of content within flex and grid containers.
`tsx
import { View } from "tile-css"
const Container = View('100%', '100vh')
.align({ x: 'center', y: 'end' }) // align contents to bottom center
.element();
export const AppLayout = () => (
);
`
Methods:
* Frame(width?, height?, align?)
* VStack(elementTagOrOptions?, options?)
* HStack(elementTagOrOptions?, options?)
* center(options?: FlexOptions)
* align(options: AlignmentOptions)
Set the aspect ratio of an element.
`tsx
import { View } from "tile-css"
const SquareElement = View()
.aspect(1)
.bg("red")
.element();
export const SquareDemo = () => (
`
Methods:
Apply backdrop filter effects to elements.
`tsx
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 }) => (
);
`
Methods:
* backdrop(options?: BackdropOptions)
Methods for applying and manipulating border styles in React components.
`typescript
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 }) => (
);
`
Methods:
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.
`tsx
import { View } from "tile-css"
const ResponsiveCard = View()
.box({
display: 'flex',
flexDir: 'column',
justify: 'center',
items: 'center',
})
.element();
export const Card = ({ children }) => (
);
`
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)
Methods for applying color-related styles to React components.
`tsx
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 }) => (
);
`
Methods:
* color(options: ColorOptions)
* fg(color: string)
* bg(options: BGOptions)
* placeholder(fg: string)
* fill(options: BGOptions)
Methods for setting cursor styles in React components.
`tsx
import { View, Cursor } from "tile-css"
const InteractiveElement = View()
.size(100)
.bg('lightblue')
.cursor(Cursor.Pointer)
.element();
export const CursorDemo = () =>
`
Methods:
* cursor(value: Cursor | CursorOptions)
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)
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
Methods for applying outline styles to React components.
Methods:
* outline(widthOrOptions, options?)
* OutlineOptions
Methods for creating responsive and scalable layouts in React components.
`typescript`
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
Methods for controlling scrolling behavior and customizing scrollbars in React components.
`typescript`
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)
Methods for applying styles to various element states, pseudo-elements, and custom selectors in React components.
`typescript`
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)
Methods for applying box shadow styles to React components.
`typescript`
const LightShadowBox = View()
.shadow()
.size(200)
.element();
Methods:
* shadow(options: ShadowOptions | number)
Methods for setting dimensions of React components.
`tsx
import { View } from "tile-css"
const ResponsiveSquare = View()
.size(600, 300) // width: 600px, height: 300px
.bg('lightblue')
.element();
export const SquareDemo = () =>
`
Methods:
* width(width, options?)
* height(height, options?)
* size(widthOrOptions, heightOrOptions?)
Methods for applying spacing styles to React components.
`tsx
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 }) => (
);
`
Methods:
* margin(options: number | string | BoxSides, override?: BoxSides)
* padding(options: number | string | BoxSides, override?: BoxSides)
Methods for applying text styles to React components.
`ts
const Info = View('p')
.sans(16, {
color: 'gray.800',
weight: 500,
leading: 1.6,
tracking: '0.5px'
})
.element();
export const InfoSection = () => (
This paragraph demonstrates responsive typography with hover effects.
);
`
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)
Methods for applying CSS transforms to React components.
`typescript
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 }) => (
);
``
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)