Demo page

This is a demo page to show off all the things MDX bundler can do.

Views •••4 min readUpdated 1 year ago

This is some highlighted text. This is some highlighted text just so you know.

lua

@name HMR Dukes 
@inputs [Entity]:entity 
@persist A
if(first()|dupefinished()){
Stripcolor1 = vec(0)
Stripcolor2 = vec(255,191,0)
Stripcolor3 = vec(127,0,0)
CarModel = "models/blu/gtav/dukes/dukes.mdl"
ClipAngle = 80
Entity:setAlpha(0)

A=0
holoCreate(A)
holoParent(A,Entity)
holoModel(A, CarModel)
holoAng(A,Entity:toWorld(ang(0,0,0)))
holoPos(A,Entity:toWorld(vec(0,0,0)))
holoClipEnabled(A,1,1)
holoClip(A,1,vec(0,0,10),vec(0,0,1),0)
holoColor(A, Stripcolor1)
holoBodygroup(A,2,3)
holoBodygroup(A,5,1)
holoBodygroup(A,6,1)
holoBodygroup(A,10,1)
holoBodygroup(A,9,1)

Components/tailwind.config.js

function SayHello(name) {
  return `Hello ${name}`;
}

Some line

test.css

function SomeComponent(name: string) {
  return <div className="font-semibold">Hello {name}</div>;
}

tsx

function SomeComponent(name: string) {
  return <div className="font-semibold">Hello {name}</div>;
}

Some other line

import Hello from './Hello'
	
export default function App () {
  return <Hello name="Chris" />
}

css

:root {
  --color: red;
}

.some-class {
  color: var(--color);
}

Some line of text

html

<html>
  <head>
    <title>Hello</title>
  </head>
  <body>
    <h1>Hello</h1>
    <script>
      alert("testing");
    </script>
  </body>
</html>

BlogBreakout

Default

Small

Medium

Large

Full

Hello World

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget egestas felis. Sed a leo nibh. Nulla eget rutrum est, et porta leo. Pellentesque gravida risus sit amet lobortis venenatis. Sed sit amet finibus ante. Nullam suscipit felis in dui condimentum, vel facilisis tortor convallis. Sed non metus odio. Fusce quis nisl non metus rhoncus rhoncus. Curabitur blandit ligula sit amet eros congue tempus. ~~Etiam consectetur~~ eleifend nulla, et ullamcorper ex posuere at. Mauris facilisis lacinia risus eu lobortis. Maecenas dignissim mi id erat iaculis rutrum. Maecenas eleifend dolor aliquet, imperdiet tellus nec, varius orci.

sdfsdfsdf

This is a HeroHeader component

Interactive example section

This is a HeroHeader component

Fusce quis nisl non metus rhoncus rhoncus. Curabitur blandit ligula sit amet eros congue tempus. ~~Etiam consectetur~~ eleifend nulla, et ullamcorper ex posuere at. Mauris facilisis lacinia risus eu lobortis. Maecenas dignissim mi id erat iaculis rutrum. Maecenas eleifend dolor aliquet, imperdiet tellus nec, varius orci.

Example 2

This is a HeroHeader component

Hello World

note

This is a Note block

info

This is a Note block

warning

This is a Note block

error

This is a Note block

Incremental adoption

Each component is its own independently versioned package, so new components can be added alongside your existing code. No need to disrupt feature work with a huge rewrite⁠—you can start small and add more components one by one.

Detailed docs and TypeScript support

Radix documentation contains real-world examples, extensive API references, accessibility details, and full TypeScript support. All components share a similar API, creating a consistent developer experience.