scaleway · lisalupi · Nov 17, 2025 · Nov 5, 2025 · Nov 5, 2025 · Nov 12, 2025
@@ -4,7 +4,9 @@ import './globals.css'
 import { ThemeRegistry } from '@ultraviolet/nextjs'
 import { consoleLightTheme } from '@ultraviolet/themes'
 import type { ReactNode } from 'react'
-import { GlobalStyles } from './GlobalStyles'
+import '@ultraviolet/fonts/fonts.css'
+import '@ultraviolet/ui/styles'
+import '@ultraviolet/themes/global'
 
 // oxlint-disable-next-line react/only-export-components
 export const metadata: Metadata = {
@@ -20,10 +22,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
-        <ThemeRegistry theme={consoleLightTheme}>
-          <GlobalStyles />
-          {children}
-        </ThemeRegistry>
+        <ThemeRegistry theme={consoleLightTheme}>{children}</ThemeRegistry>
       </body>
     </html>
   )

@@ -1,55 +1,55 @@
 import { Alert, Stack, Text } from '@ultraviolet/ui'
-import { Container } from './Container'
+import '@ultraviolet/fonts/fonts.css'
+import '@ultraviolet/ui/styles'
+import '@ultraviolet/themes/global'
 
 export default function Home() {
   return (
-    <Container>
-      <main>
-        <Stack gap={2}>
-          <Text as="h1" variant="heading">
-            Welcome to Ultraviolet!
-          </Text>
-          <Text as="p" variant="body">
-            Ultraviolet is a powerful and flexible UI library for building
-            modern web applications.
-          </Text>
-          <Text as="p" variant="body">
-            Ultraviolet works with Next.js app router by providing{' '}
-            <Text as="code" variant="code">{`<ThemeRegistry />`}</Text>.
-          </Text>
-          <Text as="p" variant="body">
-            All components will work seamlessly with Next.js app router.
-          </Text>
-          <Alert sentiment="warning" title="Known limitations">
-            <Stack direction="column" width="100%">
-              <ul>
-                <Text as="li" variant="body">
-                  Components are not server component ready they all have{' '}
-                  <Text as="code" variant="code">
-                    &quot;use client&quot;
-                  </Text>{' '}
-                  on top.
-                </Text>
-                <Text as="li" variant="body">
-                  When using{' '}
-                  <Text as="code" variant="code">
-                    styled
-                  </Text>{' '}
-                  from{' '}
-                  <Text as="code" variant="code">
-                    emotion/styled
-                  </Text>{' '}
-                  will require you to add{' '}
-                  <Text as="code" variant="code">
-                    &quot;use client&quot;
-                  </Text>{' '}
-                  on top of your component file.
-                </Text>
-              </ul>
-            </Stack>
-          </Alert>
-        </Stack>
-      </main>
-    </Container>
+    <main>
+      <Stack gap={2}>
+        <Text as="h1" variant="heading">
+          Welcome to Ultraviolet!
+        </Text>
+        <Text as="p" variant="body">
+          Ultraviolet is a powerful and flexible UI library for building modern
+          web applications.
+        </Text>
+        <Text as="p" variant="body">
+          Ultraviolet works with Next.js app router by providing{' '}
+          <Text as="code" variant="code">{`<ThemeRegistry />`}</Text>.
+        </Text>
+        <Text as="p" variant="body">
+          All components will work seamlessly with Next.js app router.
+        </Text>
+        <Alert sentiment="warning" title="Known limitations">
+          <Stack direction="column" width="100%">
+            <ul>
+              <Text as="li" variant="body">
+                Components are not server component ready they all have{' '}
+                <Text as="code" variant="code">
+                  &quot;use client&quot;
+                </Text>{' '}
+                on top.
+              </Text>
+              <Text as="li" variant="body">
+                When using{' '}
+                <Text as="code" variant="code">
+                  styled
+                </Text>{' '}
+                from{' '}
+                <Text as="code" variant="code">
+                  emotion/styled
+                </Text>{' '}
+                will require you to add{' '}
+                <Text as="code" variant="code">
+                  &quot;use client&quot;
+                </Text>{' '}
+                on top of your component file.
+              </Text>
+            </ul>
+          </Stack>
+        </Alert>
+      </Stack>
+    </main>
   )
 }
@@ -9,13 +9,12 @@
     "start": "next start"
   },
   "dependencies": {
-    "@emotion/react": "11.14.0",
-    "@emotion/styled": "11.14.1",
     "@scaleway/regex": "5.6.0",
     "@ultraviolet/fonts": "workspace:*",
     "@ultraviolet/form": "workspace:*",
     "@ultraviolet/icons": "workspace:*",
     "@ultraviolet/nextjs": "workspace:*",
+    "@ultraviolet/themes": "workspace:*",
     "@ultraviolet/ui": "workspace:*",
     "next": "15.5.6",
     "react": "19.2.0",

@@ -9,9 +9,6 @@ const nextConfig = () => {
     },
     poweredByHeader: false,
     reactStrictMode: true,
-    compiler: {
-      emotion: true,
-    },
     eslint: {
       ignoreDuringBuilds: true,
     },

@@ -15,19 +15,19 @@
     "start": "next start"
   },
   "dependencies": {
-    "@emotion/react": "11.14.0",
-    "@emotion/styled": "11.14.1",
     "@scaleway/regex": "5.6.0",
     "@ultraviolet/fonts": "workspace:*",
     "@ultraviolet/form": "workspace:*",
     "@ultraviolet/icons": "workspace:*",
+    "@ultraviolet/themes": "workspace:*",
     "@ultraviolet/ui": "workspace:*",
     "next": "15.5.6",
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "react-schemaorg": "2.0.0",
     "react-syntax-highlighter": "15.6.6",
     "react-use-clipboard": "1.0.9",
+    "sass": "1.93.3",
     "schema-dts": "1.1.5"
   },
   "devDependencies": {

@@ -1,7 +1,7 @@
-import styled from '@emotion/styled'
 import { Card as ScwUICard, Text } from '@ultraviolet/ui'
 import Image from 'next/image'
 import type { ReactNode } from 'react'
+import styles from '../../styles/component.module.scss'
 
 type CardProps = {
   title: string
@@ -10,16 +10,10 @@ type CardProps = {
   className?: string
 }
 
-const StyledBorderedBox = styled(ScwUICard)`
-  display: grid;
-  grid-template-columns: fit-content(20%) 3fr;
-  gap: ${({ theme }) => theme.space['2']};
-  height: auto;
-  min-width: 350px;
-`
-
 const Card = ({ title, description, icon, className }: CardProps) => (
-  <StyledBorderedBox className={className}>
+  <ScwUICard
+    className={`${className ? `${className} ` : ''}${styles.borderedBox}`}
+  >
     <div>
       <Image alt="icon" height={64} src={icon} width={64} />
     </div>
@@ -35,7 +29,7 @@ const Card = ({ title, description, icon, className }: CardProps) => (
         description
       )}
     </div>
-  </StyledBorderedBox>
+  </ScwUICard>
 )
 
 export default Card
@@ -1,4 +1,3 @@
-import styled from '@emotion/styled'
 import { useTheme } from '@ultraviolet/themes'
 import { Stack, Tabs } from '@ultraviolet/ui'
 import type { ReactElement } from 'react'
@@ -8,21 +7,7 @@ import {
   dracula,
   oneLight,
 } from 'react-syntax-highlighter/dist/esm/styles/prism'
-
-const StyledStack = styled(Stack)`
-  background: ${({ theme }) => theme.colors.neutral.backgroundStrong};
-
-  span {
-    background: ${({ theme }) => theme.colors.neutral.backgroundStrong};
-  }
-
-  .react-syntax-highlighter-line-number {
-    font-style: normal !important;
-  }
-
-  padding: ${({ theme }) => `${theme.space['2']} ${theme.space['3']}`};
-  border-radius: ${({ theme }) => theme.radii.default};
-`
+import styles from '../../styles/component.module.scss'
 
 type CopyBoxProps = {
   children: ReactElement<CommandProps> | ReactElement<CommandProps>[]
@@ -37,7 +22,7 @@ const CopyBox = ({ children }: CopyBoxProps) => {
   const [tab, setTab] = useState(0)
 
   return (
-    <StyledStack gap={2}>
+    <Stack className={styles.copyBox} gap={2}>
       {flatChild.length > 1 ? (
         <Tabs
           onChange={value => {
@@ -55,7 +40,7 @@ const CopyBox = ({ children }: CopyBoxProps) => {
         </Tabs>
       ) : null}
       {flatChild[tab]}
-    </StyledStack>
+    </Stack>
   )
 }
 

@@ -1,36 +1,11 @@
-import styled from '@emotion/styled'
-import { down, Text } from '@ultraviolet/ui'
-import { APP_MAX_WIDTH } from '../constants'
+import { Text } from '@ultraviolet/ui'
+import styles from '../../styles/component.module.scss'
 import GithubAndDocumentationButtons from './GithubAndDocumentationButtons'
 import Logo from './Logo'
 
-const StyledFooter = styled.footer`
-  box-shadow: 0 0 8px 2px rgba(178, 182, 195, 0.37);
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  padding: ${({ theme }) => theme.space['4']};
-`
-
-const FooterRow = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: ${({ theme }) => theme.space['4']};
-  flex: 1;
-  max-width: ${APP_MAX_WIDTH}px;
-`
-
-const DisclaimerContainer = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${({ theme }) => theme.space['2']};
-  ${down('medium', 'flex-direction: row-reverse;')}
-`
-
 const Footer = () => (
-  <StyledFooter>
-    <FooterRow>
+  <footer className={styles.footer}>
+    <div className={styles.footerRow}>
       <div>
         <Text as="p" variant="body">
           Hosted in green datacenters in France
@@ -42,12 +17,12 @@ const Footer = () => (
           technologies that reduce our environmental impact.
         </Text>
       </div>
-      <DisclaimerContainer>
+      <div className={styles.disclaimerContainer}>
         <Logo />
         <GithubAndDocumentationButtons />
-      </DisclaimerContainer>
-    </FooterRow>
-  </StyledFooter>
+      </div>
+    </div>
+  </footer>
 )
 
 export default Footer