Get started with glamorous CDN

MIT licensed

A glamorous library enhances user interfaces with visually appealing components and streamlined development.

Tags:
  • react
  • css
  • css-in-js
  • cssinjs
  • styled-components
  • glamor
  • jsxstyle

Stable version

Copied!

How to start using glamorous CDN


// Import Glamorous library
const { Div, box, grid, prop } = require('glamorous');

// Create a component for a box with custom styles
const CustomBox = box({
  backgroundColor: prop('backgroundColor', '#f5f5f5'),
  borderRadius: 5,
  padding: 10,
  width: 200,
  height: 150
});

// Create a component for a grid with two columns
const CustomGrid = grid({
  columns: 'auto 1fr',
  width: '100%'
});

// Create a component for a div with custom styles and children
const CustomDiv = Div.withComponent(CustomBox)(
  ({ backgroundColor }) => (
    <CustomBox backgroundColor={backgroundColor}>
      <p>Hello, Glamorous!</p>
    </CustomBox>
  )
);

// Use the components in the JSX
ReactDOM.render(
  <CustomGrid>
    <CustomDiv backgroundColor="#3498db" />
    <CustomDiv backgroundColor="#e74c3c" />
  </CustomGrid>,
  document.getElementById('root')
);
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions