Block

A polymorphic building block component that serves as a foundational element to replace View components throughout the application. Similar to a <div> in web development. The bg prop resolves through the theme — same lookup rules as <Card bg=...>.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Basic usage

Combine spacing, layout, and polymorphic props on Block to build cards, responsive rows, and button-style actions without custom wrappers.

Loading demo…

import

 

{

 

Block

,

 

Text

 

}

 

from

 

'@platform-blocks/react-ui-library'

;

 

export

 

function

 

Demo

(

)

 

{

  

return

 

(

    

<Block

 

w

=

"100%"

 

maxW

=

{

420

}

>

      

<Block

 

bg

=

"#111827"

 

radius

=

"lg"

 

p

=

"lg"

>

        

<Block

>

          

<Text

 

weight

=

"semibold"

 

color

=

"white"

>

            

Release

summary

          

</Text

>

          

<Text

 

size

=

"sm"

 

color

=

"rgba(255,255,255,0.75)"

>

            

Apply

 

`bg`

,

 

`p`

,

and

`radius`

props on

`Block`

to build a card without custom stylesheets

.

          

</Text

>

        

</Block

>

      

</Block

>

 

      

<Block

 

direction

=

"row"

>

        

<Block

grow

bg

=

"#2563eb"

 

radius

=

"md"

 

p

=

"md"

>

          

<Text

 

weight

=

"semibold"

 

color

=

"white"

>

            

Velocity

          

</Text

>

          

<Text

 

size

=

"sm"

 

color

=

"rgba(255,255,255,0.8)"

>

            

Use

 

`grow`

so sibling

Blocks

share remaining space

.

          

</Text

>

        

</Block

>

        

<Block

 

w

=

{

140

}

 

bg

=

"#f9fafb"

 

radius

=

"md"

 

p

=

"md"

>

          

<Text

 

weight

=

"semibold"

>

Backlog

</Text

>

          

<Text

 

size

=

"sm"

 

color

=

"muted"

>

            

Combine

fixed widths with flexible layouts via the

`w`

prop

.

          

</Text

>

        

</Block

>

      

</Block

>

 

      

<Block

 

direction

=

"row"

>

        

<Block

 

component

=

"button"

 

bg

=

"#2563eb"

 

radius

=

"md"

 

px

=

"lg"

 

py

=

"sm"

>

          

<Text

 

color

=

"white"

 

weight

=

"semibold"

>

            

Create

project

          

</Text

>

        

</Block

>

        

<Block

          

component

=

"button"

          

radius

=

"md"

          

px

=

"lg"

          

py

=

"sm"

          

borderWidth

=

{

1

}

          

borderColor

=

"#2563eb"

        

>

          

<Text

 

color

=

"#2563eb"

 

weight

=

"semibold"

>

            

View

roadmap

          

</Text

>

        

</Block

>

      

</Block

>

    

</Block

>

  

)

;

}

bg shorthand

bg resolves through the theme. Pass a palette name ('primary', 'success') for a subtle tint (shade-1), a 'palette.shade' like 'primary.6' for a specific shade, a theme-background key ('surface', 'subtle', 'elevated'), or any CSS color string. The same resolver powers <Card bg=...>.

Loading demo…

import

 

{

 

Block

,

 

Row

,

 

Text

 

}

 

from

 

'@platform-blocks/react-ui-library'

;

 

export

 

function

 

Demo

(

)

 

{

  

return

 

(

    

<Block

>

      

<Block

>

        

<Text

 

size

=

"sm"

 

color

=

"muted"

>

Palette

names → subtle

tint

 

(

shade

-

1

)

</Text

>

        

<Row

 

gap

=

"sm"

 

wrap

=

"wrap"

>

          

<Block

 

bg

=

"primary"

 

p

=

"sm"

 

radius

=

"md"

>

            

<Text

>

primary

</Text

>

          

</Block

>

          

<Block

 

bg

=

"success"

 

p

=

"sm"

 

radius

=

"md"

>

            

<Text

>

success

</Text

>

          

</Block

>

          

<Block

 

bg

=

"warning"

 

p

=

"sm"

 

radius

=

"md"

>

            

<Text

>

warning

</Text

>

          

</Block

>

          

<Block

 

bg

=

"error"

 

p

=

"sm"

 

radius

=

"md"

>

            

<Text

>

error

</Text

>

          

</Block

>

        

</Row

>

      

</Block

>

 

      

<Block

>

        

<Text

 

size

=

"sm"

 

color

=

"muted"

>

          

Specific

shade with

`palette.shade`

syntax

        

</Text

>

        

<Row

 

gap

=

"sm"

 

wrap

=

"wrap"

>

          

<Block

 

bg

=

"primary.6"

 

p

=

"sm"

 

radius

=

"md"

>

            

<Text

 

c

=

"dimmed"

 

style

=

{

{

color

:

 

'#fff'

 

}

}

>

primary

.

6

</Text

>

          

</Block

>

          

<Block

 

bg

=

"gray.2"

 

p

=

"sm"

 

radius

=

"md"

>

            

<Text

>

gray

.

2

</Text

>

          

</Block

>

        

</Row

>

      

</Block

>

 

      

<Block

>

        

<Text

 

size

=

"sm"

 

color

=

"muted"

>

Theme

background keys

</Text

>

        

<Row

 

gap

=

"sm"

 

wrap

=

"wrap"

>

          

<Block

 

bg

=

"surface"

 

p

=

"sm"

 

radius

=

"md"

 

borderWidth

=

{

1

}

 

borderColor

=

"#ddd"

>

            

<Text

>

surface

</Text

>

          

</Block

>

          

<Block

 

bg

=

"subtle"

 

p

=

"sm"

 

radius

=

"md"

>

            

<Text

>

subtle

</Text

>

          

</Block

>

        

</Row

>

      

</Block

>

 

      

<Block

>

        

<Text

 

size

=

"sm"

 

color

=

"muted"

>

Plain

 

CSS

color

string

still works

</Text

>

        

<Block

 

bg

=

"#a855f7"

 

p

=

"sm"

 

radius

=

"md"

>

          

<Text

 

style

=

{

{

color

:

 

'#fff'

 

}

}

>

Custom

hex

</Text

>

        

</Block

>

      

</Block

>

    

</Block

>

  

)

;

}

Scan to open this page on your phonereact-ui-library.com/components/Block

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

ComponentsChartsHooks

Docs

Getting StartedLocalizationllms.txt

Resources

FAQChangelogAccessibilitySitemap