{"id":22505134,"url":"https://github.com/azer/tile","last_synced_at":"2025-08-13T07:14:17.585Z","repository":{"id":251801110,"uuid":"838457538","full_name":"azer/tile","owner":"azer","description":"Chainable styling library for React.","archived":false,"fork":false,"pushed_at":"2024-12-06T09:08:45.000Z","size":215,"stargazers_count":13,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-06T09:32:20.789Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/azer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-05T17:19:05.000Z","updated_at":"2024-12-06T09:08:48.000Z","dependencies_parsed_at":"2024-08-05T21:48:00.198Z","dependency_job_id":"037ee17c-ed80-4720-a0d7-c06cc660037d","html_url":"https://github.com/azer/tile","commit_stats":null,"previous_names":["azer/tile"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azer%2Ftile","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azer%2Ftile/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azer%2Ftile/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azer%2Ftile/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/azer","download_url":"https://codeload.github.com/azer/tile/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228540829,"owners_count":17934030,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-07T00:14:51.360Z","updated_at":"2024-12-07T00:14:51.967Z","avatar_url":"https://github.com/azer.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tile\n\nChainable styling library for React. Built on top of [Stitches](https://stitches.dev).\n\n## Install\n\n```bash\nnpm install tile-css\n```\n\n## Usage Examples\n\nUser card ([CodeSandbox](https://codesandbox.io/p/sandbox/ffmc6k?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cm0v3lp4k00063b6l4umqvti2%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cm0v3lp4k00023b6lti7m5prh%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cm0v3lp4k00033b6lyy0840qq%2522%257D%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cm0v3lp4k00053b6lol0uceck%2522%257D%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cm0v3lp4k00023b6lti7m5prh%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm0v3lp4k00013b6l74t8wyjp%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.tsx%2522%257D%255D%252C%2522id%2522%253A%2522cm0v3lp4k00023b6lti7m5prh%2522%252C%2522activeTabId%2522%253A%2522cm0v3lp4k00013b6l74t8wyjp%2522%257D%252C%2522cm0v3lp4k00053b6lol0uceck%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm0v3lp4k00043b6lhj90wyrl%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%257D%255D%252C%2522id%2522%253A%2522cm0v3lp4k00053b6lol0uceck%2522%252C%2522activeTabId%2522%253A%2522cm0v3lp4k00043b6lhj90wyrl%2522%257D%252C%2522cm0v3lp4k00033b6lyy0840qq%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522cm0v3lp4k00033b6lyy0840qq%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D)):\n\n```tsx\nimport React from \"react\";\nimport { HStack, VStack, View, style } from \"tile-css\";\n\nexport function UserCard(props: {}) {\n  return (\n    \u003cContainer\u003e\n      \u003cProfilePhoto src=\"https://cldup.com/JuBBlQRbI1.jpg\" /\u003e\n      \u003cUser\u003e\n        \u003ch1\u003eAzer Koçulu\u003c/h1\u003e\n        Founder of Sway and Ray Labs.\n      \u003c/User\u003e\n    \u003c/Container\u003e\n  );\n}\n\nconst Container = HStack() // Horizontal stack\n  .size(350)\n  .space({ gap: 20, inner: 16, outer: 24 })\n  .border(10, { color: \"#eee\" })\n  .round(18, { rightBottom: 0 }) // disable round for right bottom\n  .align({ y: \"center\" })\n  .element();\n\nconst ProfilePhoto = View(\"img\")\n  .size(100, 100)\n  .round(\"100%\")\n  .shadow()\n  .element();\n\nconst User = VStack()\n  .fg(\"#666\")\n  .sans(16, { leading: 1.25 })\n  .select(\n    \"h1\",\n    style().margin(0).fg(\"#222\").text(28, { weight: 700, tracking: -2 })\n  )\n  .element();\n```\n\nIn addition to `Frame`, you can use `HStack` (orders items horizontally) and `VStack` (vertically) factory methods:\n\n```tsx\nimport { Frame, style } from 'tile-css';\n\nconst TestBox = Vstack(\"90vw\", \"90vh\") // Vertically ordered items\n  .align({ x: \"center\", y: \"end\" }) // align content to bottom center\n  .scale(2.5) // Apply `scale` transform\n  .border(10, { color: \"blue\" })\n  .round(5) // Round by 5px\n  .text(24) // font-size: 24px\n  .mobile(style().padding(0)) // Set `padding` to 0, if user is on mobile\n  .element();\n\nexport const App = () =\u003e {\n  return (\n    \u003cTestBox\u003e\n      \u003cdiv\u003eHello\u003c/div\u003e\n      \u003cdiv\u003eWorld\u003c/div\u003e\n    \u003c/TestBox\u003e\n  );\n};\n```\n\n## API\n\n### [Accessibility](./docs/accessibility.md)\n\nThe Accessibility module in Tile provides methods for enhancing the accessibility of your React components. Currently, it focuses on text selection control.\n\n```ts\nimport { View } from \"tile-css\"\n\nconst AccessibleQuote = View('blockquote')\n  .selection({\n    bg: 'rgba(0, 123, 255, 0.2)',\n    fg: 'navy'\n  })\n  .element();\n\nexport const ImportantMessage = () =\u003e (\n  \u003cAccessibleQuote\u003e\n    This quote is selectable with custom highlight colors.\n    It enhances readability and indicates that the text can be copied.\n  \u003c/AccessibleQuote\u003e\n);\n```\n\nMethods:\n\n* [selection(options: SelectionOptions)](./docs/accessibility.md#selection-options-selectionoptions-)\n\n### [Alignment](./docs/align.md)\n\nMethods for controlling the alignment of content within flex and grid containers.\n\n```tsx\nimport { View } from \"tile-css\"\n\nconst Container = View('100%', '100vh')\n  .align({ x: 'center', y: 'end' }) // align contents to bottom center\n  .element();\n\nexport const AppLayout = () =\u003e (\n  \u003cResponsiveLayout\u003e\n    \u003cHeader /\u003e\n    \u003cMainContent /\u003e\n    \u003cFooter /\u003e\n  \u003c/ResponsiveLayout\u003e\n);\n```\n\nMethods:\n\n* [Frame(width?, height?, align?)](./docs/align.md#frame-width-height-align-)\n* [VStack(elementTagOrOptions?, options?)](./docs/align.md#vstack-elementtagoroptions-options-)\n* [HStack(elementTagOrOptions?, options?)](./docs/align.md#hstack-elementtagoroptions-options-)\n* [center(options?: FlexOptions)](./docs/align.md#center-options-flexoptions-)\n* [align(options: AlignmentOptions)](./docs/align.md#align-options-alignmentoptions-)\n\n### [Aspect](./docs/aspect.md)\n\nSet the aspect ratio of an element.\n\n```tsx\nimport { View } from \"tile-css\"\n\nconst SquareElement = View()\n  .aspect(1)\n  .bg(\"red\")\n  .element();\n\nexport const SquareDemo = () =\u003e (\u003cSquareElement /\u003e)\n```\n\nMethods:\n\n* [aspect(ratio: number)](./docs/aspect.md#aspect-ratio-number-)\n\n## [Backdrop](./docs/backdrop.md)\n\nApply backdrop filter effects to elements.\n\n```tsx\nimport { View } from \"tile-css\"\n\nconst FrostedGlassCard = View(300, 200)\n  .backdrop({\n    blur: 10,\n    saturate: \"180%\",\n    brightness: \"105%\"\n  })\n  .bg('rgba(255, 255, 255, 0.2)')\n  .border(1, { color: 'rgba(255, 255, 255, 0.3)' })\n  .round(15)\n  .padding(20)\n  .element();\n\nexport const GlassCard = ({ children }) =\u003e (\n  \u003cFrostedGlassCard\u003e{children}\u003c/FrostedGlassCard\u003e\n);\n```\n\nMethods:\n\n* [backdrop(options?: BackdropOptions)](./docs/backdrop.md#backdrop-options-backdropoptions-)\n\n## [Border](./docs/border.md)\n\nMethods for applying and manipulating border styles in React components.\n\n```typescript\nimport { View } from \"tile-css\"\n\nconst FancyButton = View('button')\n  .size(200, 50)\n  .color({ fg: 'blue', bg: 'white' })\n  .border(2, { color: 'blue' })\n  .round({ x: 25, y: 10 })\n  .onHover(\n    style()\n      .color({ bg: 'blue', fg: 'white' })\n      .border(2, { color: 'white' })\n  )\n  .element();\n\nexport const CustomButton = ({ children }) =\u003e (\n  \u003cFancyButton\u003e{children}\u003c/FancyButton\u003e\n);\n```\n\nMethods:\n\n* [border](./docs/border.md#border)\n* [stroke](./docs/border.md#stroke)\n* [round](./docs/border.md#round)\n\n## [Box](./docs/box.md)\n\nMethods for creating and manipulating layout containers. Use these functions to set dimensions, position elements, and control other box model properties in your React components.\n\n```tsx\nimport { View } from \"tile-css\"\n\nconst ResponsiveCard = View()\n  .box({\n    display: 'flex',\n    flexDir: 'column',\n    justify: 'center',\n    items: 'center',\n\n  })\n  .element();\n\nexport const Card = ({ children }) =\u003e (\n  \u003cResponsiveCard\u003e{children}\u003c/ResponsiveCard\u003e\n);\n```\n\nMethods:\n\n* [Frame(width?, height?, align?)](./docs/box.md#frame-width-height-align-)\n* [VStack(elementTagOrOptions?, options?)](./docs/box.md#vstack-elementtagoroptions-options-)\n* [HStack(elementTagOrOptions?, options?)](./docs/box.md#hstack-elementtagoroptions-options-)\n* [frame(options: BoxOptions)](./docs/box.md#frame-options-boxoptions-)\n* [display(display: string, options?: BoxOptions)](./docs/box.md#display-display-string-options-boxoptions-)\n* [absolute(xOrOptions, y?, options?)](./docs/box.md#absolute-xoroptions-y-options-)\n* [position(x, y, options?)](./docs/box.md#position-x-y-options-)\n* [pin(xOrOptions, y?, options?)](./docs/box.md#pin-xoroptions-y-options-)\n* [relative(options: BoxOptions)](./docs/box.md#relative-options-boxoptions-)\n* [opacity(value: number | string)](./docs/box.md#opacity-value-number-string-)\n* [zIndex(value: number)](./docs/box.md#zindex-value-number-)\n* [content(value: string)](./docs/box.md#content-value-string-)\n* [box(options: BoxOptions)](./docs/box.md#box-options-boxoptions-)\n\n## [Colors](./docs/colors.md)\n\nMethods for applying color-related styles to React components.\n\n```tsx\nimport { View } from \"tile-css\"\n\nconst KittenButton = View('button')\n  .fg(\"#ff0\")\n  .bg({\n    url: 'https://placekitten.com/100x100.jpg',\n    size: 'cover'\n  })\n  .element();\n\nexport const FancyButton = ({ children }) =\u003e (\n  \u003cKittenButton\u003e{children}\u003c/KittenButton\u003e\n);\n```\n\nMethods:\n\n* [color(options: ColorOptions)](./docs/colors.md#color-options-coloroptions-)\n* [fg(color: string)](./docs/colors.md#fg-color-string-)\n* [bg(options: BGOptions)](./docs/colors.md#bg-options-bgoptions-)\n* [placeholder(fg: string)](./docs/colors.md#placeholder-fg-string-)\n* [fill(options: BGOptions)](./docs/colors.md#fill-options-bgoptions-)\n\n## [Cursor](./docs/cursor.md)\n\nMethods for setting cursor styles in React components.\n\n```tsx\nimport { View, Cursor } from \"tile-css\"\n\nconst InteractiveElement = View()\n  .size(100)\n  .bg('lightblue')\n  .cursor(Cursor.Pointer)\n  .element();\n\nexport const CursorDemo = () =\u003e \u003cInteractiveElement /\u003e;\n```\n\nMethods:\n\n* [cursor(value: Cursor | CursorOptions)](./docs/cursor.md#cursor-value-cursor-cursoroptions-)\n\n## [Flex](./docs/flex.md)\n\nMethods for creating and manipulating flex layouts in React components.\n\nMethods:\n\n* [VStack(elementTagOrOptions?, options?)](./docs/flex.md#vstack-elementtagoroptions-options-)\n* [HStack(elementTagOrOptions?, options?)](./docs/flex.md#hstack-elementtagoroptions-options-)\n* [flex(options: FlexOptions)](./docs/flex.md#flex-options-flexoptions-)\n* [hstack(options?: FlexOptions)](./docs/flex.md#hstack-options-flexoptions-)\n* [vstack(options?: FlexOptions)](./docs/flex.md#vstack-options-flexoptions-)\n* [center(options?: FlexOptions)](./docs/flex.md#center-options-flexoptions-)\n* [flex(options: FlexOptions)](./docs/flex.md#flex-options-flexoptions-)\n\n## [Grid](./docs/grid.md)\n\nMethods for creating and manipulating grid layouts in React components.\n\nMethods:\n\n* [Grid(options: GridOptions)](./docs/grid.md#grid-options-gridoptions-)\n* [columns(template: string | number, options?: GridOptions)](./docs/grid.md#columns-template-string-number-options-gridoptions-)\n* [rows(template: string | number, options?: GridOptions)](./docs/grid.md#rows-template-string-number-options-gridoptions-)\n* [grid(options: GridOptions)](./docs/grid.md#grid-options-gridoptions-)\n* [GridOptions](./docs/grid.md#gridoptions)\n\n## [Outline](./docs/outline.md)\n\nMethods for applying outline styles to React components.\n\nMethods:\n\n* [outline(widthOrOptions, options?)](./docs/outline.md#outline-widthoroptions-options-)\n* [OutlineOptions](./docs/outline.md#outlineoptions)\n\n## [Responsive](./docs/responsive.md)\n\nMethods for creating responsive and scalable layouts in React components.\n\n```typescript\nconst ResponsiveBox = View()\n  .mobile(style().width('100%').bg('red'))\n  .element();\n```\n\nMethods:\n\n* [geometry(options: MediaQueryOptions, styles: Chain | CSS)](./docs/responsive.md#geometry-options-mediaqueryoptions-styles-chain-css-)\n* [media(breakpoint: string, styles: Chain | CSS)](./docs/responsive.md#media-breakpoint-string-styles-chain-css-)\n* [mobile(styles: Chain | CSS)](./docs/responsive.md#mobile-styles-chain-css-)\n* [desktop(styles: Chain | CSS)](./docs/responsive.md#desktop-styles-chain-css-)\n* [portrait(styles: Chain | CSS)](./docs/responsive.md#portrait-styles-chain-css-)\n* [landscape(styles: Chain | CSS)](./docs/responsive.md#landscape-styles-chain-css-)\n* [Size Breakpoints](./docs/responsive.md#size-breakpoints)\n* [Device Aliases](./docs/responsive.md#device-aliases)\n* [Specific Device Aliases](./docs/responsive.md#specific-device-aliases)\n* [Orientation Aliases](./docs/responsive.md#orientation-aliases)\n* [High-resolution Screens](./docs/responsive.md#high-resolution-screens)\n\n## [Scroll](./docs/scroll.md)\n\nMethods for controlling scrolling behavior and customizing scrollbars in React components.\n\n```typescript\nconst VerticalScrollableBox = View()\n  .scroll({ y: true }) // Enable vertical scrolling\n  .size(300)\n  .element();\n```\n\nMethods:\n\n* [ScrollView(options?: ScrollOptions)](./docs/scroll.md#scrollview-options-scrolloptions-)\n* [scroll(options: ScrollOptions)](./docs/scroll.md#scroll-options-scrolloptions-)\n* [customScrollbar(options: CustomScrollbarOptions)](./docs/scroll.md#customscrollbar-options-customscrollbaroptions-)\n* [overflow(value: boolean | OverflowValue | OverflowOptions)](./docs/scroll.md#overflow-value-boolean-overflowvalue-overflowoptions-)\n* [scroll(options: ScrollOptions)](./docs/scroll.md#scroll-options-scrolloptions-)\n\n## [Selectors](./docs/selectors.md)\n\nMethods for applying styles to various element states, pseudo-elements, and custom selectors in React components.\n\n```typescript\nconst HoverBox = View()\n  .bg('blue')\n  .onHover(style().bg('darkblue'))\n  .element();\n```\n\nMethods:\n\n* [onHover(styles: Chain | CSS)](./docs/selectors.md#onhover-styles-chain-css-)\n* [onFocus(styles: Chain | CSS)](./docs/selectors.md#onfocus-styles-chain-css-)\n* [onActive(styles: Chain | CSS)](./docs/selectors.md#onactive-styles-chain-css-)\n* [before(styles: Chain | CSS)](./docs/selectors.md#before-styles-chain-css-)\n* [after(styles: Chain | CSS)](./docs/selectors.md#after-styles-chain-css-)\n* [attr(styles: Chain | CSS, attributeName: string, options?: AttrSelectorOptions)](./docs/selectors.md#attr-styles-chain-css-attributename-string-options-attrselectoroptions-)\n\n## [Shadow](./docs/shadow.md)\n\nMethods for applying box shadow styles to React components.\n\n```typescript\nconst LightShadowBox = View()\n  .shadow()\n  .size(200)\n  .element();\n```\n\nMethods:\n\n* [shadow(options: ShadowOptions | number)](./docs/shadow.md#shadow-options-shadowoptions-number-)\n\n## [Size](./docs/size.md)\n\nMethods for setting dimensions of React components.\n\n```tsx\nimport { View } from \"tile-css\"\n\nconst ResponsiveSquare = View()\n  .size(600, 300) // width: 600px, height: 300px\n  .bg('lightblue')\n  .element();\n\nexport const SquareDemo = () =\u003e \u003cResponsiveSquare /\u003e;\n```\n\nMethods:\n\n* [width(width, options?)](./docs/size.md#width-width-options-)\n* [height(height, options?)](./docs/size.md#height-height-options-)\n* [size(widthOrOptions, heightOrOptions?)](./docs/size.md#size-widthoroptions-heightoroptions-)\n\n## [Spacing](./docs/spacing.md)\n\nMethods for applying spacing styles to React components.\n\n```tsx\nimport { View } from \"tile-css\"\n\nconst SpacedCard = View()\n  .size(200)\n  .padding({ x: 20, y: 15 }) // left, right: 20px -- top, bottom: 15px\n  .margin(10, { right: 0 }) // 10px around, except right\n  .element();\n\nexport const CardWithSpacing = ({ children }) =\u003e (\n  \u003cSpacedCard\u003e{children}\u003c/SpacedCard\u003e\n);\n```\n\nMethods:\n\n* [margin(options: number | string | BoxSides, override?: BoxSides)](./docs/spacing.md#margin-options-number-string-boxsides-override-boxsides-)\n* [padding(options: number | string | BoxSides, override?: BoxSides)](./docs/spacing.md#padding-options-number-string-boxsides-override-boxsides-)\n\n## [Text](./docs/text.md)\n\nMethods for applying text styles to React components.\n\n```ts\nconst Info = View('p')\n  .sans(16, {\n    color: 'gray.800',\n    weight: 500,\n    leading: 1.6,\n    tracking: '0.5px'\n  })\n  .element();\n\nexport const InfoSection = () =\u003e (\n  \u003cInfo\u003e\n    This paragraph demonstrates responsive typography with hover effects.\n  \u003c/Info\u003e\n);\n```\n\nMethods:\n\n* [text(sizeOrOptions: string | number | TextOptions, options?: TextOptions)](./docs/text.md#text-sizeoroptions-string-number-textoptions-options-textoptions-)\n* [sans(sizeOrOptions: string | number | TextOptions, options?: TextOptions)](./docs/text.md#sans-sizeoroptions-string-number-textoptions-options-textoptions-)\n* [mono(sizeOrOptions: string | number | TextOptions, options?: TextOptions)](./docs/text.md#mono-sizeoroptions-string-number-textoptions-options-textoptions-)\n* [serif(sizeOrOptions: string | number | TextOptions, options?: TextOptions)](./docs/text.md#serif-sizeoroptions-string-number-textoptions-options-textoptions-)\n* [ellipsis()](./docs/text.md#ellipsis-)\n* [text(sizeOrOptions: string | number | TextOptions, options?: TextOptions)](./docs/text.md#text-sizeoroptions-string-number-textoptions-options-textoptions-)\n\n## [Transform](./docs/transform.md)\n\nMethods for applying CSS transforms to React components.\n\n```typescript\nconst Card = View('div')\n  .scale(1.5) // zoom in by 1.5\n  .rotate(90) // 90deg\n  .translate(-25, -10) // x, y\n  .element();\n\nexport const InteractiveCard = ({ children }) =\u003e (\n  \u003cCard\u003e{children}\u003c/Card\u003e\n);\n```\n\nMethods:\n\n* [rotate(angle: string | number)](./docs/transform.md#rotate-angle-string-number-)\n* [scale(x: number, y?: number)](./docs/transform.md#scale-x-number-y-number-)\n* [translate(x: string | number, y?: string | number)](./docs/transform.md#translate-x-string-number-y-string-number-)\n* [skew(x: string | number, y?: string | number)](./docs/transform.md#skew-x-string-number-y-string-number-)\n* [transform(value: string)](./docs/transform.md#transform-value-string-)\n\n\n# Sponsor\n\n[![raylabs - logo](https://github.com/user-attachments/assets/506bbf72-e1e3-4c11-8cfc-4d32695a0a48)](https://raylabs.ai)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazer%2Ftile","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fazer%2Ftile","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazer%2Ftile/lists"}