From 5ffe09fa304b9a729588fc3616879cf54b940958 Mon Sep 17 00:00:00 2001 From: Luke Bennett Date: Wed, 12 Aug 2026 14:29:41 +1000 Subject: [PATCH] Update docs and examples --- apps/docs/content/docs/docs/installation.mdx | 20 ++++++------------- apps/docs/src/examples/text/alignment.tsx | 13 ++++++++---- .../src/samples/theming/getting-started.tsx | 10 +++++----- 3 files changed, 20 insertions(+), 23 deletions(-) diff --git a/apps/docs/content/docs/docs/installation.mdx b/apps/docs/content/docs/docs/installation.mdx index fcceb051..1dfe7d77 100644 --- a/apps/docs/content/docs/docs/installation.mdx +++ b/apps/docs/content/docs/docs/installation.mdx @@ -3,12 +3,7 @@ title: Installation description: Install Luke UI, apply a bundled theme, and render a component. --- -Luke UI is a React component library with static CSS and bundled themes. This guide uses Tactile, -then shows the first component inside a themed root. - -## Installation - -### 1. Install Luke UI +## Install Luke UI Install the package in your application. @@ -16,22 +11,19 @@ Install the package in your application. pnpm add @luke-ui/react ``` -### 2. Import the CSS - -Import the shared stylesheet and one theme's stylesheet at your application root. This example uses -Tactile. To use Paper, import `@luke-ui/react/themes/paper/stylesheet.css` instead. +## Set up the theme -### 3. Add the theme root +Import `@luke-ui/react/stylesheet.css` and one theme stylesheet at your application root. This guide +uses Tactile. To use Paper, import `@luke-ui/react/themes/paper/stylesheet.css` instead. Apply `rootClassName` to an element you own, such as the application shell. The theme stylesheet supplies the semantic variables. `rootClassName` adds the reset and base typography. -### 4. Use components +## Use components -Import each component from its package path. The setup above renders `Text`. `Button` comes from -`@luke-ui/react/button`. +Import each component from its package path. diff --git a/apps/docs/src/examples/text/alignment.tsx b/apps/docs/src/examples/text/alignment.tsx index a27bbc55..9b3e10f2 100644 --- a/apps/docs/src/examples/text/alignment.tsx +++ b/apps/docs/src/examples/text/alignment.tsx @@ -1,16 +1,21 @@ import { Box } from '@luke-ui/react/box'; import { Text } from '@luke-ui/react/text'; +import { vars } from '@luke-ui/react/theme'; + +const rowStyle = { + backgroundColor: vars.color.background.neutral.subtle.rest, +} as const; export default () => { return ( - - + + Start aligned - + Centre aligned - + End aligned diff --git a/apps/docs/src/samples/theming/getting-started.tsx b/apps/docs/src/samples/theming/getting-started.tsx index a4c0b684..9cc542ca 100644 --- a/apps/docs/src/samples/theming/getting-started.tsx +++ b/apps/docs/src/samples/theming/getting-started.tsx @@ -1,14 +1,14 @@ import '@luke-ui/react/stylesheet.css'; import '@luke-ui/react/themes/tactile/stylesheet.css'; -import { Text } from '@luke-ui/react/text'; import { rootClassName } from '@luke-ui/react/theme'; import type { PropsWithChildren } from 'react'; export function App({ children }: PropsWithChildren) { return ( -
- Hello world - {children} -
+ +
+
{children}
+